Android Drawable – Shape Drawable

안드로이드에서는 수 많은 Drawable이 존재한다. 흔히 알고 있는 Nine-Patch Drawable부터 시작해서 상태에 따른 Drawable을 변경 해주는 State List Drawable등 많이 존재한다. (http://developer.android.com/guide/topics/resources/drawable-resource.html)

View에서 간단한 줄이나 네모버튼 또는 배경이미지를 처리 할때 보통 이미지를 통해 처리하는 경우가 대부분이다. 왜냐면 디자이너가 이미지를 만들어 주기때문에 별도로 개발자가 처리할 필요가 없어서이다. 하지만 성능 면에서 이미지 리소스를 뷰에 로드해서 그리는 시간은 매우빠르게 느낄지 몰라도 Shape Drawable을 통해 비교해본다면 많은 차이가 난다. 결론적으로 간단한 줄이나 버튼의 경우에는 이미지처리보다는 개발자가 직접 안드로이드에서 지원하는 훌륭한 Shape Drawable로 그리는 것이 좋다.

Shape Drawalbe은 테두리를 그리거나 그라데이션을 넣는다거나 가장자리를 둥글게 처리하는 등 다양한 기능을 제공하고 있기 때문에 수준높은 버튼이나 배경을 그릴 수 있다.

Shape Drawable은 다른 drawable와 마찬가지로 안드로이드 프로젝트의 res/drawable 내에 xml을 생성하면된다.

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

    <solid android:color="#EEE" />

    <stroke
        android:dashGap="2dp"
        android:dashWidth="1dp"
        android:width="10dp"
        android:color="#FF4444" />

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

</shape>

효과

  • solid: 단색으로 영역을 채움
  • gradient: 그라데이션으로 영역을 채움
  • stroke: 가장자리에 줄을 그림
  • corners: 가장자리를 라디우스 값에 따라 둥글게 처리
  • padding: 패딩 설정
  • size: 높이, 넓이 설정

shape속성(android:shape)

  • rectangle : 사각형
  • oval: 원
  • line: 선
  • ring: 회전

좀 더 다양한 조합을 통해 만들어 보면 다음과 같다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <gradient
        android:angle="90"
        android:endColor="#2236B4FF"
        android:startColor="#36B4FF" />

    <stroke
        android:width="10dp"
        android:color="#EEE" />

    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />

    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />

</shape> 

만들어진 버튼들은 기본적으로 View의 크기에 따라 자동으로 사이즈가 늘어나거나 줄어든다. 비트맵 이미지의 경우 별도의 나인패치 작업을 하지 않는 경우 깨지지만 이렇게 Drawable로 만들게 되면 벡터이미지로 작동하게 된다. 또한 둥근 원의 경우 이미지처리하는것 보다 Shape Drawable을 이용하게 되면 훨씬더 깔끔하게 처리되는 것을 볼 수있다.

이렇게 간단한 버튼이나 선, 배경의 경우 이미지처리가 아닌 Drawable를 처리하도록 개발자들은 습관을 들여야 한다.

댓글 남기기