chapter 10.4 - drawable에 xml 추가하기

drawable은 지금까지는 사진이나 그림을 저장하는 용도로 사용하였습니다.

이번에는 drawable에 xml을 추가하여 활용해보겠습니다.

 

xml을 넣는 이유는 단순한 모양의 테두리를 사각형이나 모서리가 둥근 사각형(roundrect) 등의 모양은 그림파일을 배치하는 것보다는 xml로 직접 코딩해서 배치하면 앱에 긍정적인 영향을 줍니다.

 

그림에 비하여 xml로 작업을 하면 용량이 절약되어, 작은 용량의 파일을 처리하므로 동작 속도가 빠릅니다.

그림 파일의 경우 작은 이미지를 큰 곳에 배치를 하면 화질이 깨지지만, xml은 코드를 기반으로 계산해서 배치하는 것이므로 크기와 상관없이 선명하게 할 수 있습니다. 예를 들면, roundrext의 둥근 비율을 유지할 수 있습니다.

그리고 상황 별로 다른 모양이나 색깔을 보여줄 수 있습니다. 예를 들면, 손으로 누르고 있을 때와 손을 떼었을 때 보이는 모양을 다르게 처리하는 것이 가능합니다.

 

 

 

버튼이 있는 화면을 작성하여 버튼의 구성을 drawable의 xml로 바꿔보겠습니다.

 

메인화면을 작성하기 전에 버튼의 구성을 바꾸기 위해서는 한 가지 설정을 해야 합니다.

최신 버전의 경우 버튼의 구성을 강제화하여 메인화면에서 코드를 작성하여도 적용이 되지 않습니다.

그래서 Theme로 들어가서 설정을 바꾸겠습니다.

3번째 줄의 prent 부분을 위와 같이 설정해주겠습니다.

AppCompat.Light 이외에도 다른 것으로 설정하여도 버튼 구성을 바꿀 수 있다는 것은 같으나, 위와 같이 바꿔서 설명하겠습니다.

 

버튼이 있는 activity_main.xml을 작성하겠습니다.

xml

화면 구성에 대해서는 따로 설명하지는 않겠습니다.

메인화면을 구성하였으므로 이제 버튼에 넣을 xml을 만들겠습니다.

 

xml을 추가하는 방법은 drawable > New > Drawable Resource File을 누릅니다.

위와 같은 화면에 원하는 이름을 설정합니다.

이름은 소문자와 _(언더바)만 사용할 수 있습니다.

 

xml을 만들었다면 위와 같은 새로운 태그를 볼 것입니다.

2번째 줄의 <selector>은 어떤 상황에서 무엇이 보일 것인지를 구별하기 위한 태그입니다. 내용물로 <item> 캐그를 배치해서 상황을 종류 별로 나누어줍니다. 

<item> 태그 안에는 pressed, checked, focused 등등의 여러 가지 상황을 구별하는 것이 가능합니다. 상황에 따라 true 또는 false 여부에 따라 다른 모양을 표기합니다. 4번 줄의 pressed는 눌렀을 경우의 여부에 따라 상황을 설정하는 것입니다. 4번째 줄의 경우에는 false를 입력했기 때문에 누르지 않았을 때의 상황을 설정합니다.

6번째 줄의 <layer - list> 태그는 여러 개의 도형을 겹쳐서 표현할 때 사용하는 것입니다. 여러 개의 <item> 태그를 겹쳐서 배치하는 것인데, <item> 태그 속성으로 방향 별로 여백을 얼마나 줄 것인지를 설정할 수 있습니다. 설정한 여백의 크기만큼 밑에 깔린 layer가 드러나게 됩니다.

10번째 줄의 <shape> 태그는 어떤 모양을 표시할 것인지를 결정합니다. shape 속성을 추가해서 모양(rectangle, oval 등)을 결정해주어야 합니다.

<shape> 태그 내부에는 solid(단색), gradient(그러데이션) 등을 도형 내부 색을 정할 수 있습니다. 14번 줄과 같습니다.

그리고 사각형으로 설정할 경우 모서리를 둥글게 만들고 싶다면 16번 줄처럼 <corners> 태그를 사용하여 설정하면 됩니다.

8 ~ 21번 줄은 가장 바닥에 깔릴 <item> 태그였습니다. 그 위에 여백을 두어 <item>을 놓겠습니다. 23 ~ 40번 줄과 같습니다.

여기까지  설정을 하면 버튼을 누르지 않았을 때의 상황에서 보여줄 빨간 둥근 테두리의 xml을 설정하였습니다.

 

버튼을 눌렀을 때의 상황에서 보여줄 xml은 테두리는 위와 같이 빨간 둥근 테두리지만 내부의 색을 회색으로만 설정하겠습니다.

47번 줄에 pressed를 true로 설정하여 눌렀을 때의 상황을 만들겠습니다.

나머지 코드는 위와 동일하고, 75번 줄의 <solid> 태그의 색만 변경하였습니다.

 

여기까지 버튼의 xml 설정을 하였습니다.

이제 xml을 넣어주어야 합니다.

다시 activity_main.xml로 이동하겠습니다.

xml을 넣어주는 방법은 쉽습니다.

25번 줄과 같이 background를 만들어둔 xml을 찾아 넣어주면 됩니다.

 

에뮬레이터를 실행하면 기존에는 빨간 둥근 테두리에서 버튼을 눌렀을 때에는 흰 바탕이 회색으로 바뀌는 것을 볼 수 있습니다.