Shape Drawable Resources

1，示例

它们的代码如下：

shape_oval.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <shape xmlns:android="http://schemas.android.com/apk/res/android"
 3        android:shape="oval">
 4     <gradient
 5         android:endColor="#fa1621"
 6         android:gradientRadius="50"
 7         android:startColor="#f793ac"
 8         android:type="sweep"/>
 9     <size
10         android:width="72dp"
11         android:height="72dp"/>
12     <!--<solid android:color="#e3e3e3"/>-->
13 </shape>

shape_rectangle.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <shape xmlns:android="http://schemas.android.com/apk/res/android"
 3        android:shape="rectangle">
 4     <gradient
 5         android:endColor="#fa1621"
 6         android:gradientRadius="50"
 7         android:startColor="#f793ac"
 8         android:type="radial"/>
 9     <corners
10         android:bottomLeftRadius="5dp"
11         android:bottomRightRadius="5dp"
12         android:topLeftRadius="5dp"
13         android:topRightRadius="5dp"/>
14     <size android:width="72dp" android:height="72dp" />
15 </shape>

shape_ring.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <shape xmlns:android="http://schemas.android.com/apk/res/android"
 3        android:shape="ring"
 4        android:thickness="2dp"
 5        android:innerRadius="30dp"
 6        android:useLevel="false">
 7     <!--<gradient-->
 8         <!--android:endColor="#fa1621"-->
 9         <!--android:gradientRadius="50"-->
10         <!--android:startColor="#f793ac"-->
11         <!--android:type="radial"/>-->
12     <!--<padding-->
13         <!--android:left="10dp"-->
14         <!--android:top="10dp"-->
15         <!--android:right="10dp"-->
16         <!--android:bottom="10dp" />-->
17     <stroke
18         android:width="1dp"
19         android:color="color"
20         android:dashWidth="1dp"
21         android:dashGap="1dp" />
22     <solid android:color="#f8a17e" />
23     <size android:width="72dp" android:height="72dp"/>
24 </shape>

shape_line.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <shape xmlns:android="http://schemas.android.com/apk/res/android"
 3        android:shape="line" >
 4     <!-- 显示一条虚线，破折线的宽度为 dashWith，破折线之间的空隙的宽度为 dashGap，当 dashGap=0dp 时，为实线 -->
 5     <stroke
 6         android:dashGap="3dp"
 7         android:dashWidth="2dp"
 8         android:width="1dp"
 9         android:color="#777777" />
10 
11     <!-- 虚线的高度 -->
12     <size android:height="2dp" />
13 </shape>

 ring_circle.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <shape xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:shape="ring"
 4     android:innerRadiusRatio="5555"
 5     android:thicknessRatio="2"
 6     android:useLevel="false">
 7     <!--android:innerRadiusRatio="5555"含义：按比值计算内圆半径，整个图形宽度／该值,就是36dp/5555=0.006480648dp-->
 8     <!--android:thicknessRatio="2"含义：按比值计算外环厚度。整个图形宽度／该值 就是36dp/2 = 18dp -->
 9     <solid android:color="#ff0000" />
10     <size android:width="36dp" android:height="36dp"/>
11 </shape>

如图：

oval_circle.xml

1 <?xml version="1.0" encoding="utf-8"?>
2 <shape xmlns:android="http://schemas.android.com/apk/res/android"
3     android:shape="oval" >
4     <size
5         android:width="16dp"
6         android:height="60dp"/>
7     <solid android:color="#e3e3e3" />
8 </shape>

注意，虽然shape="oval"，且width=16dp,height=60dp，但是在使用的时候将控件比如imageview或textview的高宽设置成一样就是正圆。

2，语法

　   其中android:shape有4个类型，rectangle 矩形，oval椭圆，line线条，ring环形。

　　<shape>有6个子元素。<corners>圆角,<gradient>渐变颜色,<padding>内边距,<size>大小,<solid>填充,<stoke>描边。

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <shape
 3     xmlns:android="http://schemas.android.com/apk/res/android"
 4     android:shape=["rectangle" | "oval" | "line" | "ring"] >
 5     <corners
 6         android:radius="integer"
 7         android:topLeftRadius="integer"
 8         android:topRightRadius="integer"
 9         android:bottomLeftRadius="integer"
10         android:bottomRightRadius="integer" />
11     <gradient
12         android:angle="integer"
13         android:centerX="integer"
14         android:centerY="integer"
15         android:centerColor="integer"
16         android:endColor="color"
17         android:gradientRadius="integer"
18         android:startColor="color"
19         android:type=["linear" | "radial" | "sweep"]
20         android:useLevel=["true" | "false"] />
21     <padding
22         android:left="integer"
23         android:top="integer"
24         android:right="integer"
25         android:bottom="integer" />
26     <size
27         android:width="integer"
28         android:height="integer" />
29     <solid
30         android:color="color" />
31     <stroke
32         android:width="integer"
33         android:color="color"
34         android:dashWidth="integer"
35         android:dashGap="integer" />
36 </shape>

 3，各元素属性详解

3.1<shape>形状

属性

含义

类型

取值

备注

android:shape

形状

枚举

rectagle矩形|正方形，oval椭圆|正圆，

line水平直线，ring环形 

画line时，用<stroke>定义线的高度

android:innerRadius

内半径

尺寸

内圆的半径。一个尺寸值（dip等等）或者一个尺寸资源。

 

 

只在android:shape="ring"有效

 

注意，android:innerRadiusRatio

和 android:thicknessRatio

指定的都是一个被除数，比值。

 

 

 

 

android:thickness

外环厚度

尺寸

外环的厚度，是一个尺寸值或尺寸的资源

 

 

android:innerRadiusRatio

 

 

内圆半径比值

 

 

float

按比值计算内圆半径，整个图形宽度／该值

例如,如果android:innerRadiusRatio="5",

则,内圆半径＝整个图形宽度的宽度／5。

这个值会被android:innerRadius重写。默认值是9

见上面 ring_circle.xml

 

 

android:thicknessRatio

 

 

外环厚度比值

 

 

float

按比值计算外环厚度。整个图形宽度／该值

例如,如果android:thicknessRatio="2",

则,外环厚度＝整个图形宽度／2。

这个值是被android:innerRadius重写，默认值是3。 

见上面 ring_circle.xml

android:useLevel

 是否用作图层

bool

如果用在 LevelListDrawable里，那么就是true。

如果通常不出现则为false。

3.2<size>大小 

属性

含义

类型

取值

备注

android:width

长度

尺寸

 

 

android:height

高度  

尺寸

 

 

 3.3<padding>内边距 

属性

含义

类型

取值

备注

android:left

左边距

尺寸

 

 

android:top

上边距 

尺寸

 

 

android:right

右边距

尺寸

 

 

android:bottom

下边距

尺寸

 

 

 3.4<corners>圆角 

属性

含义

类型

取值

备注

android:radius

四角的弧度

尺寸

设置0dp，无圆角

设置>1dp, 有圆角

值越大角越圆

只适用于rectagle

android:topRightRadius

右上角弧度

尺寸

android:bottomLeftRadius

右下角弧度

尺寸

android:topLeftRadius

左上角弧度

尺寸

android:bottomRightRadius

左下角弧度

尺寸

3.5<stroke> 描边

属性

含义

类型

取值

备注

android:width

描边的宽度

尺寸

 

 

android:color

描边的颜色  

颜色

 

 

android:dashWidth

边框分段长度

尺寸

 

2属性要同时设置

android:dashGap

边框分段间隙

尺寸

 

 

3.6<solid>填充 

属性

含义

类型

取值

备注

android:color

填充的颜色

颜色

 

 

3.7<gradient> 渐变颜色

属性

含义

类型

取值

android:startColor

渐变开始颜色

颜色

 

android:centerColor

渐变中间颜色

颜色

 

android:endColor

渐变结束颜色

颜色

 

android:angle

渐变角度

整字

0，默认值表示从左到右渐变90表示从下到上渐变，

取值必须是45的倍数

android:centerX

渐变中心相对于x轴位置

小数

0-1.0

android:centerY

渐变中心相对于y轴位置

小数

0-1.0

android:type

渐变的样式

枚举

linear线性渐变radial环形渐变sweep

android:gradientRadius

渐变半径

小数

 android:type="radial"必填

android:useLevel

 是否用作图层

布尔

true用于LevelListDrawable
posted @ 2016-05-20 14:41  f9q  阅读(199)  评论(0)  编辑  收藏  举报