[Android] 드로어블 만들기

📌드로어블(Drawable)

• 드로어블은 뷰에 설정할 수 있는 객체이며, 그 위에 그래픽을 그릴 수 있다. 또한 드로어블을 이용하여 상태에 따라 그래픽이나 이미지가 선택적으로 보이게 할 수 있다.
• 가장 많이 사용하는 드로어블은 상태 드로어블과 셰이프 드로어블이다.

📌상태 드로어블 만들기

• 상태 드로어블은 뷰의 상태에 따라 뷰에 보여줄 그래픽을 다르게 설정할 수 있다.

<item>태그의 drawable 속성에는 이미지나 다른 그래픽을 설정하여 화면에 보여줄 수 있고, state_로 시작하는 속성은 상태를 나타낸다. state_pressed 속성은 눌린 상태를 의미한다. 아래 예제를 보면 화면에 finger 이미지가 보이되, 이미지 버튼이 눌렸을 때는 finger_pressed 이미지가 보이게 된다.

앱을 실행하면 아래와 같이 버튼이 눌리지 않았을 때와 눌렸을 때 다른 이미지가 나타나는 것을 볼 수 있다.

📌셰이프 드로어블 만들기

• 셰이프 드로어블은 XML로 도형을 그릴 수 있게 해주는 드로어블이다.
• 최상위 태그에서 <selector> 태그를 사용한 상태 드로어블과 달리 셰이프 드로어블은 <shape> 태그를 사용한다.

위의 예제를 간단히 살펴보면

• shape라는 속성을 추가하여 속성 값으로 rectangle을 입력하여 사각형을 그릴 수 있게 하였다.
• <size> 태그에서 도형의 크기를 지정하기 위해 width와 height 속성을 이용하였다.
• <stroke> 태그로 테두리 선의 속성을 지정하기 위해 width와 color 속성을 이용하였다.
• <solid> 태그로 도형 안쪽을 채웠다.
• <padding> 태그로 테두리 안쪽 공간을 띄웠으며, bottom 속성을 이용하여 아래쪽에만 padding을 부여했다.

위의 예제는 그라데이션을 준 예제이다. <shape> 태그 안에 <gradient>를 넣으면 그라이데이션을 만들 수 있다. startColor, centerColor, endColor를 이용해 시작, 중간, 끝 부분의 색상을 지정할 수 있다. 이렇게 만든 후 최상위 레이아웃의 background 속성 값을 @drawable/back_drawable로 바꾸면 배경색을 그라데이션으로 바꿀 수 있다.

위 예제는 버튼의 배경을 투명하게 만들어 테두리만 있는 버튼을 만든 것이다. <layer-list> 태그를 이용하면 여러 개의 그래픽을 하나의 XML파일에 넣을 수 있다.