예를 한가지 들어보자.
먼저 <shape ~~” ~ ” android:shape “rectangle”> 의 의미는, 디자인 할 기본 도형이 직사각형이라는 의미이다. oval(타원), line(선), ring(고리) 등의 기본 도형이 더 있다. 따라서 위의 도형은 기본적으로 직사각형을 따른다.
<size/> 는 말 그대로 디자인 할 도형의 크기를 결정하는 요소이다.
android:width :도형의 가로 크기
android:height :도형의 세로 크기
따라서 위의 코드에 따르면 도형은 가로, 세로 100dp짜리 직사각형 도형이다.
<gradient/> 는 도형 안에 색을 채울 때, 그라데이션을 주고 싶다면 사용하는 요소이다.
android:angle :그라데이션의 방향
android:startColor :그라데이션의 시작색
android:endColor :그라데이션의 끝색
angle축은 -x축을 기준으로 시계방향이 양의 방향이다. 즉 ,45도로 설정한다면 왼쪽 아래부터 오른쪽 위로 가는 축이 형성되고, 왼쪽 아래부터 startColor를 배정한다.
따라서 위의 코드에 따르면, -x축 방향에서 시계방향으로 45도 돌린 축을 기준으로 왼쪽 아래에서부터, #123456 을 시작으로 #afd로 끝나는 그라데이션을 도형 안에 채우는 것이다.
<corners/> 는 사각형의 모서리를 둥글게 만들고 싶을 때 사용한다.
android:topRightRadius :오른쪽 상단 모서리의 반경
android:topLeftRadius:왼쪽 상단 모서리의 반경
android:bottomRightRadius :오른쪽 하단 모서리의 반경
android:bottomLeftRadius :왼쪽 하단모서리의 반경
따라서 위의 코드에 따르면 도형의 네 모서리의 반경의 크기는 각각 5dp이다.
<stroke/> 는 도형의 획의 속성의 지정한다.
android:width : 획의 두께를 나타낸다.
android:color : 획의 색깔을 나타낸다.
android:dashWidth : 점선의 크기를 나타낸다.
android:dashGap : 점선간의 거리를 나타낸다.
즉 위의 예에서는 획의 두께는 5dp이고, 획의 색은 #adadad이다. 그리고 획을 점선으로 나타낼껀데, 점선의 크기는 20dp이고 점선간의 거리는 40dp가 된다.
<padding/> 는 배경을 기준으로 안에 들어가는 뷰 요소의 상대적인 위치를 나타낸다.
android:left : 왼쪽 패딩 지정
android:right : 오른쪽 패딩 지정
android:top : 위쪽 패딩 지정
android:bottom :아래쪽 패딩 지정
따라서 위의 코드예시에 따르면, 배경을 기준으로 왼쪽에서 100dp 떨어진 위치에 뷰 요소가 배치된다.
<solid/> 속성은 도형안에 채울 색상을 지정한다.
android:color : 색상 지정
<solid/> 와 <gradient/>는 도형 안의 색을 채운다는 점에서 겹친다. 두 개를 다 쓴다면, 제일 아래에 있는 코드로 색을 채운다.
실제로 이 xml파일을 배경으로 지정하면 어떻게 될까?
<TextView
android:id="@+id/text_foldername"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/test_background"
android:text="메모 폴더 이름"
android:textColor="#000000"
android:textSize="25dp"
android:textStyle="bold" />그림을 보면, 텍스트뷰레이아웃 전체를 배경이 감싸는 것을 알 수 있고, 왼쪽 패딩을 100dp로 지정했기에 배경의 왼쪽 가장자리로부터 100dp 떨어진 곳에 텍스트가 위치하는 것을 확인할 수 있다. 만약, 왼쪽 패딩을 -100dp로 설정한다면, 글자 중에 왼쪽 100dp는 보이지 않게 된다.
쉐이프 드로어블을 통해 원하는 디자인을 만들어 볼 수 있으면 좋겠다.
