안드로이드(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 값. 점선의 크기값.
몇가지 샘플을 만들어 보겠습니다. 위 설명을 보셨으니, 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>
<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 설명은 위 링크의 구글 자료를 번역한 내용입니다.
'구글과인터넷 > 안드로이드' 카테고리의 다른 글
| 안드로이드 다이얼로그 관련, [Android Dev.]AlertDialog 활용하기 (0) | 2012.12.12 |
|---|---|
| 안드로이드 [Android 개발] Looper와 Handler (0) | 2012.12.12 |
| 안드로이드 WebView, EditText 이용한 그나마 매끄로운 채팅창 구현 (0) | 2012.12.12 |
