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	边框分段间隙	尺寸		2属性要同时设置

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) 编辑收藏举报

刷新页面返回顶部