2010.10.14 23:57

Android - Shape Drawable



안드로이드(Android)에는 Shape Drawable이라는 것이 있습니다. XML로 쉽게 Drawable 객체를 생성하는 것인데, 배경이미지를 만들 때 사용하면 편리합니다. 실제 비트맵을 사용하지 않아도 되므로 apk의 용량도 줄여주고 쉽게 모양을 바꿀수 있어서 개발자가 사용하기 딱 입니다.

파일 저장 위치: res/drawable/filename.xml
참조 방법      : Java : R.drawable.filename
                    XML : @[package:]drawable/filename



[Syntax]

<?xml version="1.0" encoding="utf-8"?>
<shape
   
xmlns:android="http://schemas.android.com/apk/res/android"
   
android:shape=["rectangle" | "oval" | "line" | "ring"] >
   
<corners
       
android:radius="integer"
       
android:topLeftRadius="integer"
       
android:topRightRadius="integer"
       
android:bottomLeftRadius="integer"
       
android:bottomRightRadius="integer" />
   
<gradient
       
android:angle="integer"
       
android:centerX="integer"
       
android:centerY="integer"
       
android:centerColor="integer"
       
android:endColor="color"
       
android:gradientRadius="integer"
       
android:startColor="color"
       
android:type=["linear" | "radial" | "sweep"]
       
android:usesLevel=["true" | "false"] />
   
<padding
       
android:left="integer"
       
android:top="integer"
       
android:right="integer"
       
android:bottom="integer" />
   
<size
       
android:width="integer"
       
android:color="color"
       
android:dashWidth="integer"
       
android:dashGap="integer" />
   
<solid
       
android:color="color" />
   
<stroke
       
android:width="integer"
       
android:color="color"

         android:dashWidth="integer"
       
android:dashGap="integer" />
</shape>


  • <shape> elements - shape xml의 루트 요소임.
    • xmlns:android="http://schemas.android.com/apk/res/android"
      shap xml의 namespace 부분. 위와 동일하게 값을 지정하면 됩니다.
    • android:shape
      shape의 도형을 저정하는 속성입니다. 지정가능한 값은 . “rectangle” (사각형), “oval” (타원), “line” (선), “ring” (링) 4개의 값을 지정할 수 있습니다.

      만일, android:shape="ring" 인 경우에는 추가적으로 다음의 속성을 지정할 수 있습니다.
    • android:innerRadius
      Dimension 값. 링의 안쪽원의 반지름의 값입니다.
    • android:innerRadiusRatio
      float 값. 링의 가로사이즈에 대한 안쪽원의 비율값. 디폴트값은 9. 만일 android:innerRadiusRatio="5" 로 지정하면 전체 ring의 width 값을 5로 나눈값이 아쪽 원의 반지름으로 설정됩니다. android:innerRadius 값이 설정되면 android:innerRadiusRatio 값을 덮어씁니다.
    • android:thickness
      Dimension 값. 링의 두께. 바깥쪽 원에서 안쪽 원을 제외한 부분이 두께가 됩니다.
    • android:thicknessRatio
      float 값. 전체 링의 가로 사이즈에 대한 비율값으로 표시되는 링의 두께값. 디폴트는 3. 만일 android:thicknessRatio="2" 라면 링의 두께는 링의 가로 사이즈를 2로 나눈 값이 됩니다. 이 값은 android:innerRadius 값이 설정되면 override 됩니다.
    • android:useLevel
      Boolean 값. 만일 이 값이 사용되고 "true"이면 Shape는 LevelListDrawable 객체로 생성됩니다. 일반적으로는 "false"로 설정하면 됩니다. "true"로 설정하면 Shape가 보이지 않게 됩니다.
  • <coners>
    가장자리를 둥글게  처리를 해 줍니다. 이 element는 shape가 "rectangle"일때만 유효합니다.
    • android:radius
      Dimension 값. 모든 coners를 위한 반지름 값. 아래에 나타나는 각 코너의 값을 지정하면 이 값을 덮어쓰게 됩니다.
    • android:topLeftRadius
      Dimension 값. top-left 코너의 반지름.
    • android:topRightRadius
      Dimension 값. top-right 코너의 반지름.
    • android:bottomLeftRadius
      Dimension 값. bottom-left 코너의 반지름.
    • android:bottomRightRadius
      Dimension 값. bottom-right 코너의 반지름.
  • <gradient>
    도형에 gradient 색상을 지정할 수 있습니다. 
    • android:angle
      Integer 값. gradient 각도. 값이 0이면 좌측에서 우측으로 gradient가 지정되며, 90이면, bottom에서 top 방향으로 gradient가 지정됩니다. 이 값은 45의 배수이어야 하며, 디폴트 값은 0입니다.
    • android:centerX
      Float 값. gradient 중심의 X 위치의 상대값. (0 ~ 1.0) 만일 android:type="linear" 이면 적용이 안됨.
    • android: centerY
      Float 값. gradient 중심의 Y 위치의 상대값. (0 ~ 1.0) 만일 android:type="linear" 이면 적용이 안됨.
    • android:centerColor
      Color 값. 시작 color 값과 끝 color 값 사이에 나타나는 Color 값. Optional 값.
    • android:startColor
      Color 값. gradient 시작 부분의 색상값.
    • android:endColor
      Color 값. gradient 끝 부분의 색상값.
    • android:gradientRadius
      Float 값. gradient의 반지름 값. android:type="radial" 인 경우에만 적용 가능함.
    • android:type
      Keyword 값. gradient 패턴의 종류를 지정함.
      "linear" - 선형 gradient (디폴트)
      "radial" - 방사형 gradient, 시작 Color가 Center Color와 동일함.
      "sweep" - sweeping line gradient
    • android:useLevel
      Boolean 값. 값이 "true"이면 LevelListDrawable 객체로 생성됨.
  • <padding>
    패딩값을 지정한다. 이 패딩값은 shape에 지정되는 게 아니고, shape를 포함하고 있는 View에 설정되는 값이다.
    • android:left
      Dimension 값. Left 패딩값.
    • android:right
      Dimension 값. Right 패딩값.
    • android:top
      Dimension 값. Top 패딩값.
    • android:bottom
      Dimension 값. Bottom 패딩값.
  • <size>
    Shape의 크기를 설정. 크기값은 shape를 감싸고 있는 container view의 스케일 설정에 따라 함께 scale  될 수 있습니다.
    • android:height
      Dimension 값. shape의 높이값.
    • android:width
      Dimension 값. shape의 너비값

  • <solid>
    shape를 단색을 채웁니다.
    • android:color
      Color 값. Shape를 칠할 색상값.
  • <stroke>
    테두리를 그릴 때. 선을 그릴때도 사용합니다.
    • android:width
      Dimension 값. 모든 coners를 위한 반지름 값. 아래에 나타나는 각 코너의 값을 지정하면 이 값을 덮어쓰게 됩니다.
    • android:color
      Color 값. 선 색
    • android:dashGap
      Dimension 값. 점선인 경우 점선의 간격
    • android:dashWidth
      Dimension 값. 점선의 크기값.
[Shape Sample]

몇가지 샘플을 만들어 보겠습니다. 위 설명을 보셨으니, XML만 보더라도 대충 이해가 가실겁니다.



1. 점선 외곽선을 가진 사각형. (첫번째 도형)


<shape android:shape="rectangle"

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

    <stroke android:color="#ffffffff"

            android:dashGap="2dp"

            android:dashWidth="2dp"

            android:width="2dp" />

    <solid android:color="#3FB7FF"/>

    <coners android:radius="3dip"/>                     

</shape>


2. Oval


<shape android:shape="oval"

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

    <stroke android:color="#ffffffff"

            android:width="4dp" /> 

    <padding android:left="10dip"

             android:right="10dip"

             android:top="10dip"

             android:bottom="10dip"/>           

</shape>

 


3. Ring


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

       android:shape="ring"

       android:innerRadiusRatio="3"

       android:useLevel="false">

    <solid android:color="#3FB7FF"/>           

</shape>


4. Ring - 링을 gradient로 채움.


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

       android:shape="ring"

       android:innerRadiusRatio="3"

       android:useLevel="false" >

     <gradient android:type="sweep"

         android:startColor="#3FB7FF"

         android:centerColor="#000000"

        android:endColor="#3FB7FF"

        android:centerX="1"

        android:centerY="1"/>       

</shape>


5. line

<shape android:shape="line"

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

   <stroke android:color="#ffffff"/>

</shape>


6. Rectangle - 사이즈를 줄여 선처럼 보이도록 처리.

<shape android:shape="rectangle"

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

   <gradient android:type="linear"

        android:startColor="#F8F8F8"

        android:centerColor="#000000"

        android:endColor="#F8F8F8" />

    <size android:height="2dip"/>       

</shape>



[Gradient Sample]

Gradient는 문서만 봐서는 제가 잘 이해가 가지 않아 속성값에 따른 샘플을 만들어 보았습니다. XML과 대응하는 이미지를 함께 보시면 쉽게 이해가 가실 겁니다.

[Linear Gradient]




<shape android:shape="rectangle"

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

    <gradient android:type="linear"

        android:startColor="#3FB7FF"

        android:centerColor="#ffffff"

        android:endColor="#000994"/>

</shape>


위 그림중 좌측 첫번째 그림입니다.
android:angle의 값을 설정하지 않았으므로 0값인 좌측에서 우측으로 그라디언트 효과가 주어졌습니다. centerColor 값을 흰색으로 설정하였습니다.


<shape android:shape="rectangle"

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

    <gradient android:type="linear"

        android:startColor="#3FB7FF"

        android:centerColor="#ffffff"

        android:endColor="#000994"

        android:angle="270"/>

</shape>


angle을 270으로 설정하여 위에서 아래쪽으로 그라디언트 효과를 주었음.


<shape android:shape="rectangle"

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

    <gradient android:type="linear"

        android:startColor="#3FB7FF"

        android:endColor="#000994"

        android:angle="270"/>

</shape>


android:centerColor 값을 설정하지 않았음.

[radial Gradient]



<shape android:shape="rectangle"

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

    <gradient android:type="radial"

         android:startColor="#3FB7FF"

        android:centerColor="#ffffff"

        android:endColor="#000994"

        android:gradientRadius="100"/>

</shape>




<shape android:shape="rectangle"

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

    <gradient android:type="radial"

         android:startColor="#3FB7FF"

        android:centerColor="#ffffff"

        android:endColor="#000994"

        android:gradientRadius="100"

        android:angle="270"/>

</shape>


radial gradient에서는 angle 값은 크게 의미가 없는것 같습니다.


<shape android:shape="rectangle"

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

    <gradient android:type="radial"

         android:startColor="#3FB7FF"

        android:endColor="#000994"

        android:gradientRadius="100"

        android:angle="270"

        android:centerX="0.3"

        android:centerY="0.3"/>

</shape>


centerX 및 centerY를 설정하여 중심축을 옮기니 좀 있어보입니다.

[sweep gradient]




<shape android:shape="rectangle"

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

    <gradient android:type="sweep"

         android:startColor="#3FB7FF"

        android:centerColor="#ffffff"

        android:endColor="#000994" />

</shape>


sweep 그라디언트는 원뿔 모양이 나오는 군요.


<shape android:shape="rectangle"

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

    <gradient android:type="sweep"

         android:startColor="#3FB7FF"

        android:centerColor="#ffffff"

        android:endColor="#000994"

        android:angle="270"/>

</shape>


android:angle 값을 변경해도 처음 이미지와 동일하게 결과가 나오는 걸로 보아 angle은 sweep에서는 별 의미가 없는 것 같습니다.


<shape android:shape="rectangle"

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

    <gradient android:type="sweep"

         android:startColor="#3FB7FF"

        android:endColor="#000994"

        android:angle="270"/>

</shape>


android:centerColor 값을 빼버리는 원뿔의 안쪽 모양 같은 그라디언트 효과가 나타납니다.


<shape android:shape="rectangle"

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

    <gradient android:type="sweep"

         android:startColor="#3FB7FF"

         android:centerColor="#ffffff"

        android:endColor="#3FB7FF"

        android:centerX="0.3"

        android:centerY="0.3"

        android:angle="270"/>

</shape>


중심축을 이동한 모습입니다.


<shape android:shape="rectangle"

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

    <gradient android:type="sweep"

         android:startColor="#3FB7FF"

         android:centerColor="#000994"

        android:endColor="#ffffff"

        android:centerX="1.0"

        android:centerY="1.0"/>

</shape>


중심축을 하단 끝점으로 옮겨서 그라디언트 효과를 준 모습입니다.


<shape android:shape="rectangle"

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

    <gradient android:type="sweep"

         android:startColor="#3FB7FF"

         android:centerColor="#000000"

        android:endColor="#3FB7FF"

        android:centerX="1"

        android:centerY="1"/>

</shape>



[참고자료]
http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape 본 포스트의 앞쪽 Shape 설명은 위 링크의 구글 자료를 번역한 내용입니다.
Trackback 2 Comment 3
  1. wow account 2010.11.26 15:33 신고 address edit & del reply

    好好生活

  2. uggs on sale 2011.11.25 16:13 신고 address edit & del reply

    사랑은 포도주처럼해야합니다.더 이상 당신은 그것이 맛이납니다 강하고, 그것을 유지.

  3. huewu 2012.03.23 14:27 신고 address edit & del reply

    많은 도움이 되었습니다. 감사합니다~