14) 안드로이드 쉐이프 드로어블

출처 : http://www.edwith.org/boostcourse-android/lecture/20421/

쉐이프 드로어블

쉐이프 드로어블은 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>

 

 

---

생각해보기

1. 버튼의 테두리를 쉐이프 드로어블로 만들어 사용하면 포토샵으로 디자인한 버튼 배경 이미지를 사용하는 것에 비해어떤 장점이 생길까요?
   - 당연히 첫번째로는 포토샵에서 만든이미지를 따로 불러와서 쓸 필요가 없다는 것이고, 해상도가 딱맞아서 깨질일이 없다.
2. 여러 종류의 쉐이프 드로어블을 만들고 그 중 하나를 화면에 들어있는 버튼들의 배경으로 설정할 수 있습니다. 이 상태에서 사용자가 여러 종류 중 하나를 선택하면 화면에 있는 모든 버튼의  배경을 바꾸도록 만들 수 있을까요? 이렇게 하면 버튼의 배경 스타일을 한꺼번에 바꾸는 효과가 있을까요?
   - ID로 일일히 찾아서 바꿔주면되는데 좀더 효과적인 방법이있을것같다.