23.08.01 실무에서 버튼 디자인(스압)

목표 

: 버튼1개를 (nomal상태, pressed상태, disable상태 총 3장씩 X 해상도별5장씩 = 15장) 내가원하는 이미지를 이용해서 만들어 보자!!

 

우선 버튼 1개를 만들기 위해서

버튼 상태에 따라서 nomal -my_2버튼/ pressed - my_3버튼 / disable - my_1버튼 각각의 이미지를 준비했다.

또한 해상도에 따라서(hdpi,mdpi,xhdpi,xxhdpi,xxxhdpi) 각각의 이미지를   5장씩 준비했다.

즉, 버튼 1개를 만들기위해서 이미지 15장을 준비완료 했다.

(왜냐하면 버튼이 눌러졌을때랑 안눌러졌을때 각각의 이미지가 다를테고, 해상도마다 이미지가 깨질 수 있으니까)

 

문제점

1. 첫번째로 해야 할일이 이 이미지15장을 가지고 버튼 1개를 만들어줘야했다. 하지만 3-1 강의에서 

위와 같은 코드를 옆에 작게 적어 놓으셨는데, 

아니 이걸 나같이 처음하는사람들은 어디에 적으란건지?

해당 코드가 의미하는게 뭔지?

이렇게 쓴다고쳐 근데 어떻게 실 사용 하라는건지?

도저히 알아먹을 수 없다. 애초에 위 두장의 코드가 15장의 이미지로 버튼을 설정하라는 말인지 부터 몰랐다.

검색해서 찾아보면서 공부하라는 의미로 받아들였다. 

어쩔 수 있나?  찾아봐야지 

 

2. 검색을 하다보면 Drawable얘기가 간간히 보이지만 난 버튼을 만들고 싶다는 마음에 재대로 읽어 보지도 않고 넘어갔었다. 오로지 버튼만 찾았다. 왜냐하면 강의 내용, 강의 영상에도 위쪽 두번째코드 <selector><item/></selector> 를 Drawable에서 xml파일을 만들고 그곳에다 쓰라는 말은 없다.

그렇게 시간을 보내다 결국 자꾸 언급되는 Drawable얘기에 결국 눈길이 가게되었다. 

 

해결 과정

1.

이런식으로 각 해상도별로

폴더안에 이미지파일을

형식에맞게(첫글자숫자x,영어대문자x) 넣은다음

 

 

 

 

2.

이런식으로 drawable 폴더안에 xml파일을 만들고

(난 training.xml 이라는 이름으로 만들었다.)

 

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/my_1"
        android:state_enabled="false"/>
    <item android:drawable="@drawable/my_2"
        android:state_pressed="false"
        android:state_enabled="true"/>
    <item android:drawable="@drawable/my_3"
        android:state_pressed="true"
        android:state_enabled="true"/>
</selector>

3. 그 다음 이런식으로 drawable폴더에 만든 training.xml에 적어주는 것이다.

위 코드를 간략하게 설명해보면 

(우선 my_1,my_2,my_3은 개인적으로 강의3. 실무에서 버튼 디자인을 직접 해보려고 이미지를 따온것이다. 해상도 별로 총 15장)

첫번째 item은 @drawable/my_1 이미지를 쓸꺼다. 여기에서 state_enabled는 활성화 여부를 말하는것이고 나는 false를 주었기때문에 비활성화 상태라는 뜻이다. 정리해보면 이 버튼이 비활성화 상태일때 my_1이미지를 쓸꺼란 얘기다.

 

두번째 item은 @drawable/my_2 이미지를 쓸꺼다. 여기에서 state_pressed는 눌렀을때를 의미하고 false를 주었다, 정리해보면 이 버튼이 활성화 상태일때 누르지 않은 상태라면 my_2이미지를 쓸꺼란 얘기다.

 

세번째 item은 @drawable/my_3 이미지를 쓸꺼다. 여기에선 위내용을 정리해보면 활성화 상태일때 누른 상태라면 my_3이미지를 쓸꺼란 얘기다.

 

최종적으로 요약해보면  

my_1이미지 : 비활성화 상태일때

my_2이미지 : 활성화 상태인데 버튼을 안눌렀을때

my_3이미지 : 활성화 상태인데 버튼을 눌렀을때

 

이런식으로 버튼을 설정해 줬다.

 

4. 근데 이버튼을 써야되는데 이것도 만만치가 않다.

버튼은 설정해줬는데 얘를 어떻게 쓰란말이냐? 

구글 검색과 오랜 사투중 결국 해결은 했다. 

 

다시 res/layout에 만든 xml파일에서 그냥 이미지 버튼을 하나 만들면

이런식으로 창이 뜨는데 내려보면 내가만든 training.xml 파일을 찾을 수 있었다.

선택하고 OK를 눌러서 만들고 일반 버튼을 만들어서 사용하는거처럼 사용하면 정상적으로 작동했다.

 

드디어!!!! 그 험난한 여정을 버텨내어 고지가 보인다.

 

5. 그런데 이게 무슨일이란 말이냐!!!!

앱을 실행 시키는데 my_1버튼이 활성화가 안된다. 도대채 왜? 

 

또 엄청난 시간을 소모하고 알아낸것은 

애초에 앱이 실행하면 버튼은 자동으로 활성화가 된다는것이다.

 

즉, 활성화된 버튼이란소리다.

my_2버튼은 활성화 되었는데 안눌렀을때 버튼이고, my_3버튼은 활성화 되었는데 눌렀을때 버튼이니까 

my_2버튼과 my_3버튼만 활성화가 된다.

 

아니 그럼 도대채 비활성화 버튼 my_1버튼은 왜만든걸까? ? ? ??????????

검색을 해보면 비활성화 버튼일때의 상황이 존재했다. (https://codinghero.tistory.com/121참조)

현재 내가 만든 얘는 그런상황이 될 수 없는 상태였기때문에 my_1버튼을 볼 수없었던것이다.

 

이렇게 궁금한것도 많고 탈도 많은 "실무에서 버튼 디자인"을 간단? 하게 실습해 보았다.

 

느낀점

원래 4주차 강의 까지 오늘 다들으려고했는데, 3주차 강의 복습하다 시간을 너무 많이 소모했다.

그래도 계획은 잡았으니 마무리 해보려고 발악은 해봐야겠다.

 

이렇게 간단한 실습하는데 너무 오랜 시간이 걸린것 같다. 이렇게 까지 해보고 난 뒤에 다시 강의 내용을 보니 이해가 잘 되긴하는데,

 

애초에 강의 내용이 기초적인 지식을 너무 건너뛴거같다.

내가 너무 초보라 못알아 듣는것도 있고, 처음 강의내용을 보고 직접 따라해보기가 꽤 많이 어려웠다.

결론은 열심히하자!

 

코드는 아래 깃허브

https://github.com/seongssu/-Introduction-to-Android-App-Development-3weak

GitHub - seongssu/-Introduction-to-Android-App-Development-3weak