드로어블

뷰의 background 속성을 이용하면 배경색을 지정할 수도 있고 /res/drawable 폴더에 넣어둔 이미지 파일을 설정하여 배경 이미지가 보이게 할 수도 있습니다.

그런데 배경으로 이미지를 설정하면 그 이미지는 아무런 변화가 없습니다. 버튼의 배경으로 설정하면 버튼이 눌렸을 때나 눌리지 않았을 때 모두 같은 이미지가 보이는 거죠.

그러면 버튼이 눌렸을 때 눌린 이미지, 평소에는 그냥 이미지가 배경으로 보이도록 하고 싶을 경우에는 어떻게 할까요?

드로어블을 사용하면 가능합니다.

드로어블을 사용하면 뷰나 화면 일부를 그래픽으로 그리는 기능을 XML로 만들 수 있습니다.

드로어블을 어떻게 만들 수 있는지 알아봅시다.

드로어블 (Drawable)

드로어블(Drawable)은 뷰에 설정할 수 있는 객체이며 그래픽으로 그릴 수 있습니다.

그래픽이라고 하면 흔히 떠올리는 것이 선이나 원을 선으로 그려주는 것인데요, 이런 작업은 보통 소스 코드에서 하게 됩니다.

하지만 소스 코드가 아닌 XML로 그래픽이 어떻게 그려질지 정의할 수 있다면 좀 더 편리하게 사용할 수 있을 겁니다.

드로어블은 소스 코드에서 만들 수도 있고 XML에서 정의할 수도 있는데 XML로 만들어 사용하는 경우가 많습니다.

드로어블 XML 파일은 /res/drawable 폴더 안에 넣어서 마치 이미지처럼 뷰의 배경으로 설정될 수 있습니다.

드로어블에는 이미지 파일을 보여줄 때 사용하는 비트맵 드로어블(BitmapDrawable), 상태별로 다른 그래픽을 참조할 수 있는 상태 드로어블(StateListDrawable), 두 개의 드로어블 간에 바뀌도록 만들 수 있는 전환 드로어블(TransitionDrawable), 색상과 그러데이션을 포함하여 도형 모양을 정의할 수 있는 쉐이프 드로어블(ShapeDrawable) 등이 있습니다.

지정한 거리만큼 안쪽으로 들어오도록 만들 수 있는 인셋 드로어블(InsetDrawable)은 뷰가 뷰의 실제 범위보다 작은 백그라운드가 필요 할 때 유용하게 사용됩니다.

다른 드로어블을 클리핑하는 클립 드로어블(ClipDrawable)은 진행률 표시 줄과 같은 항목을 구현하는 데 많이 사용됩니다.

그 외로 다른 드로어블의 크기를 바꿀 수 있는 스케일 드로어블(ScaleDrawable)도 있죠.

다양한 기능의 드로어블이 있지만 그중에서 앱을 만들 때 가장 많이 사용하는 드로어블이 상태 드로어블과 쉐이프 드로어블입니다.

 

상태 드로어블

상태 드로어블은 뷰의 상태에 따라 뷰에 보여줄 그래픽을 다르게 지정할 수 있도록 합니다.

/res/drawable 폴더 안에 새로운 XML 파일을 만들면 최상위 태그는 <selector>가 됩니다.

그 안에 <item> 태그를 넣을 수 있으며 drawable 속성에는 이미지나 다른 그래픽을 설정하여 화면에 보이도록 할 수 있습니다.

state_ 로 시작하는 속성은 상태를 나타내는데 예를 들어 state_pressed 속성은 눌린 상태를 의미하고 state_focused는 포커스를 받은 상태를 의미합니다.

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"  
android:drawable="@drawable/ic_thumb_up_selected" />

    <item android:drawable="@drawable/ic_thumb_up" />

</selector>

상태 속성이 지정되지 않은 <item> 태그에는 drawable 속성에 ic_thumb_up 이미지가 설정되어 있으므로 디폴트 이미지로 보이게 됩니다.

state_pressed 속성이 설정된 <item> 태그에는 ic_thumb_up_selected 이미지가 설정되어 있으며 이 이미지는 뷰가 눌렸을 때 보이게 됩니다.

이렇게 만든 XML 파일은 뷰의 background 속성으로 설정될 수 있습니다.

/res/drawable 폴더 안에 thumb_up.xml 이라는 이름의 파일을 만들었다면 다음과 같이 버튼의 배경으로 설정할 수 있습니다.

<Button
    android:id="@+id/button"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:background="@drawable/thumb_up"
    />

 Q.소스 코드로 드로어블을 만드는 것보다 XML로 드로어블을 만들어 사용하면 얼마나 더 편리해지는 걸까요?

A.xml파일은 가독성이 뛰어나고 각각의 함수가 어떤 역할을 하는지 이름으로 잘 나타나 있기 때문에 드로어블을 만들기 편리하고, 드로어블을 설정할때 또한 여러 이미지, 여러 상황을 하나의 드로어블 파일에 넣을 수 있기 때문에 한눈에 알아보기 편하다고 생각합니다.

쉐이프 드로어블

쉐이프 드로어블을 사용하면 XML을 이용해 도형을 그릴 수 있습니다.

도형을 그리려면 원래 소스 코드에서 캔버스(Canvas)라는 객체를 이용해야 하지만 쉐이프 드로어블을 사용하면 소스 코드없이 도형을 그려 보여줄 수 있으니 여러 가지 장점이 생기게 됩니다.

쉐이프 드로어블

쉐이프 드로어블은 XML로 도형을 그릴 수 있도록 합니다.

/res/drawable 폴더 안에 XML 파일을 만들고 최상위 태그를 <shape>로 바꾸면 도형 하나를 정의할 수 있습니다.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <size android:width="200dp" android:height="120dp"/>
    <stroke android:width="1dp" android:color="#0000ff"/>
    <solid android:color="#aaddff" />
    <padding android:bottom="1dp" />

</shape>

<shape> 태그에는 shape 속성이 들어갈 수 있으며 rectangle로 설정하면 직사각형, oval로 설정하면 타원, line으로 설정하면 선, ring으로 설정하면 고리 모양으로 그릴 수 있습니다.

도형의 테두리 선에 대해 굵기나 색상을 지정할 수도 있고 도형을 채우는 색상을 지정할 수도 있습니다.

<stroke> 태그는 <shape> 태그 안에 넣어서 테두리 선의 속성을 지정할 수 있으며 width는 선의 굵기, color는 선의 색상을 설정할 때 사용하죠. <solid> 태그는 도형의 안쪽을 채울 때 사용합니다.

배경색으로 그러데이션을 줄 때는 <gradient> 태그를 사용할 수 있습니다.

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient
        android:startColor="#7288DB"
        android:centerColor="#3250B4"
        android:endColor="#254095"
        android:angle="90"
        android:centerY="0.5"
        />

    <corners android:radius="2dp" />

</shape>

<shape> 태그 안에 <gradient> 태그를 넣으면 그러데이션이 만들어지게 됩니다.

startColor에는 시작 부분의 색상, centerColor에는 가운데 부분의 색상, endColor에는 끝 부분의 색상을 지정할 수 있습니다.

위쪽에서부터 아래쪽으로 내려오면서 색상이 바뀌는 모양이 되는 거죠.

테두리만 있는 버튼 배경

<layer-list> 태그를 사용하면 여러 그래픽을 하나의 XML 파일에 넣을 수 있습니다.

<layout-list> 태그 안에는 <item> 태그가 여러 개 들어갈 수 있으며 <item> 태그 안에는 <shape> 태그가 들어갈 수 있어 각각을 도형으로 정의할 수 있습니다.

만약 버튼의 테두리만 보이게 하는 드로어블을 만들고 싶다면 도형 안쪽을 투명하게 채우고 테두리 선만 색상을 주면 됩니다. 그런데 이것을 두 개의 그래픽으로 정의할 수도 있습니다.

하나의 그래픽으로 정의할 것인지 아니면 여러 개의 그래픽으로 정의할 것인지는 선택의 문제이지만 여러 개의 그래픽으로 나누면 그래픽을 중첩시켜서 좀 더 예쁜 배경을 만들 수 있습니다.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#BE55DA" />
            <solid android:color="#00000000" />
        </shape>
    </item>

    <item android:top="1dp" android:bottom="1dp" 
android:right="1dp" android:left="1dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#BE55DA" />
            <solid android:color="#00000000" />
        </shape>
    </item>

</layer-list>

 

Q.버튼의 테두리를 쉐이프 드로어블로 만들어 사용하면 포토샵으로 디자인한 버튼 배경 이미지를 사용하는 것에 비해어떤 장점이 생길까요?

A.drawable의 크기가 늘어남에 따라 깨지는 현상을 방지할 수 있습니다. 간단한 수정이 필요할 때 빠르게 처리할 수 있을 것 같습니다.

Q.여러 종류의 쉐이프 드로어블을 만들고 그 중 하나를 화면에 들어있는 버튼들의 배경으로 설정할 수 있습니다. 이 상태에서 사용자가 여러 종류 중 하나를 선택하면 화면에 있는 모든 버튼의  배경을 바꾸도록 만들 수 있을까요? 이렇게 하면 버튼의 배경 스타일을 한꺼번에 바꾸는 효과가 있을까요?

A. 가능할 것이라고 생각합니다. 해당 이벤트가 일어 났을때 각각의 버튼을 찾아 변경해주면 될 것 같습니다.