32、详解Android shape的使用方法（转载）

0、java绘制shape

在官方API介绍中：

ShapeDrawable：This object can be defined in an XML file with the <shape> element（这个对象可以用<shape>元素在xml文件中定义）

GradientDrawable：This object can be defined in an XML file with the <shape> element（这个对象可以用<shape>元素在xml文件中定义）

[父节点] shape   --   ShapeDrawable

[子节点] gradient   --

[子节点] padding   --

[子节点] corners   --   setCornerRadius 、setCornerRadii

[子节点] solid       --

[子节点]  stroke   --   setStroke

[子节点]  size --   setSize

1、概述

gradient   -- 对应颜色渐变。 startcolor、endcolor就不多说了。 android:angle 是指从哪个角度开始变。

solid      --  填充。

stroke   --  描边。

corners  --  圆角。

padding   -- 定义内容离边界的距离。 与android:padding_left、android:padding_right这些是一个道理。

 <?xml version="1.0" encoding="utf-8"?>
 <shape
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape=["rectangle" | "oval" | "line" | "ring"]      //共有4种类型，矩形（默认）/椭圆形/直线形/环形
     // 以下4个属性只有当类型为环形时才有效
     android:innerRadius="dimension"     //内环半径
     android:innerRadiusRatio="float"    //内环半径相对于环的宽度的比例，比如环的宽度为50,比例为2.5,那么内环半径为20
     android:thickness="dimension"   //环的厚度
     android:thicknessRatio="float"     //环的厚度相对于环的宽度的比例
     android:useLevel="boolean">    //如果当做是LevelListDrawable使用时值为true，否则为false.

     <corners    //定义圆角
         android:radius="dimension"      //全部的圆角半径
         android:topLeftRadius="dimension"   //左上角的圆角半径
         android:topRightRadius="dimension"  //右上角的圆角半径
         android:bottomLeftRadius="dimension"    //左下角的圆角半径
         android:bottomRightRadius="dimension" />    //右下角的圆角半径

     <gradient   //定义渐变效果
         android:type=["linear" | "radial" | "sweep"]    //共有3中渐变类型，线性渐变（默认）/放射渐变/扫描式渐变
         android:angle="integer"     //渐变角度，必须为45的倍数，0为从左到右，90为从上到下
         android:centerX="float"     //渐变中心X的相当位置，范围为0～1
         android:centerY="float"     //渐变中心Y的相当位置，范围为0～1
         android:startColor="color"      //渐变开始点的颜色
         android:centerColor="color"     //渐变中间点的颜色，在开始与结束点之间
         android:endColor="color"    //渐变结束点的颜色
         android:gradientRadius="float"  //渐变的半径，只有当渐变类型为radial时才能使用
         android:useLevel=["true" | "false"] />  //使用LevelListDrawable时就要设置为true。设为false时才有渐变效果

     <padding    //内部边距
         android:left="dimension"
         android:top="dimension"
         android:right="dimension"
         android:bottom="dimension" />

     <size   //自定义的图形大小
         android:width="dimension"
         android:height="dimension" />

     <solid  //内部填充颜色
         android:color="color" />

     <stroke     //描边
         android:width="dimension"   //描边的宽度
         android:color="color"   //描边的颜色
         // 以下两个属性设置虚线
         android:dashWidth="dimension"   //虚线的宽度，值为0时是实线
         android:dashGap="dimension" />      //虚线的间隔
 </shape>

2、圆角矩形，扫描式渐变

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

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

     <gradient
         android:type="sweep"
         android:endColor="@android:color/holo_blue_bright"
         android:startColor="@android:color/holo_green_dark"
         android:centerColor="@android:color/holo_blue_dark"
         android:useLevel="false" />

     <size android:width="60dp" android:height="60dp" />
 </shape>

2、 圆形，线性渐变

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

     <gradient
         android:type="linear"
         android:angle="45"
         android:startColor="@android:color/holo_green_dark"
         android:centerColor="@android:color/holo_blue_dark"
         android:endColor="@android:color/holo_red_dark"
         android:useLevel="false" />

     <size android:width="60dp" android:height="60dp" />

     <stroke android:width="1dp"
         android:color="@android:color/white" />

 </shape>

3、虚线

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

     <size android:width="60dp"
         android:height="60dp" />

     <stroke android:width="2dp"
         android:color="@android:color/holo_purple"
         android:dashWidth="10dp"
         android:dashGap="5dp" />
 </shape>

4、 环形，放射型渐变

 <?xml version="1.0" encoding="utf-8"?>
 <shape
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="ring"
     android:useLevel="false"
     android:innerRadius="40dp"
     android:thickness="3dp">

     <gradient android:type="radial"
         android:gradientRadius="150"
         android:centerY="0.1"
         android:centerX="0.2"
         android:startColor="@android:color/holo_red_dark"
         android:centerColor="@android:color/holo_green_dark"
         android:endColor="@android:color/white" />

     <size android:width="90dp"
         android:height="90dp" />

 </shape>

5、demo

XML/HTML代码

1. <Button
2. android:layout_width="wrap_content"
3. android:layout_height="wrap_content"
4. android:text="TestShapeButton"
5. android:background="@drawable/button_selector"
6. />

button_selector.xml：

XML/HTML代码

1. <?xml version="1.0" encoding="utf-8"?>
2. <selector
3. xmlns:android="http://schemas.android.com/apk/res/android">
4. <item android:state_pressed="true" >
5. <shape>
6. <!-- 渐变 -->
7. <gradient
8. android:startColor="#ff8c00"
9. android:endColor="#FFFFFF"
10. android:type="radial"
11. android:gradientRadius="50" />
12. <!-- 描边 -->
13. <stroke
14. android:width="2dp"
15. android:color="#dcdcdc"
16. android:dashWidth="5dp"
17. android:dashGap="3dp" />
18. <!-- 圆角 -->
19. <corners
20. android:radius="2dp" />
21. <padding
22. android:left="10dp"
23. android:top="10dp"
24. android:right="10dp"
25. android:bottom="10dp" />
26. </shape>
27. </item>
28. <item android:state_focused="true" >
29. <shape>
30. <gradient
31. android:startColor="#ffc2b7"
32. android:endColor="#ffc2b7"
33. android:angle="270" />
34. <stroke
35. android:width="2dp"
36. android:color="#dcdcdc" />
37. <corners
38. android:radius="2dp" />
39. <padding
40. android:left="10dp"
41. android:top="10dp"
42. android:right="10dp"
43. android:bottom="10dp" />
44. </shape>
45. </item>
46. <item>
47. <shape>
48. <solid android:color="#ff9d77"/>
49. <stroke
50. android:width="2dp"
51. android:color="#fad3cf" />
52. <corners
53. android:topRightRadius="5dp"
54. android:bottomLeftRadius="5dp"
55. android:topLeftRadius="0dp"
56. android:bottomRightRadius="0dp"
57. />
58. <padding
59. android:left="10dp"
60. android:top="10dp"
61. android:right="10dp"
62. android:bottom="10dp" />
63. </shape>
64. </item>
65. </selector>

运行效果如下图：

一般状态：

获得焦点状态：

按下状态：

6、官方资料

<shape>

Basic method for drawing shapes via XML.

Attributes

Name	Type	Default	Description
visible	boolean	parent|true	Determines if drawable is visible.
shape	enum (rectangle, oval, line, ring)	rectangle	Determines the shape: rectangle (shape is a rectangle, possibly with rounded corners); oval (shape is an ellipse); line (shape is a line); ring (shape is a ring).
innerRadiusRatio	float	3.0	Only valid if shape == 'ring'. Inner radius of the ring expressed as a ratio of the ring's width. For instance, if innerRadiusRatio=3, then the inner radius equals the ring's width divided by 3. This value is ignored if innerRadius is defined.
innerRadius	float	-1	Only valid if shape == 'ring'. Inner radius of the ring. When defined, innerRadiusRatio is ignored. When undefined, innerRadiusRatio's default is used.
thicknessRatio	float	9.0	Only valid if shape == 'ring'. Thickness of the ring expressed as a ratio of the ring's width. For instance, if thicknessRatio=9, then the thickness equals the ring's width divided by 9. This value is ignored if thickness is defined. Default value is 9.
thickness	float	-1	Only valid if shape == 'ring'. Thickness of the ring. When defined, thicknessRatio is ignored. When undefined, thicknessRatio's default is used.
useLevel	boolean	true	Only valid if shape == 'ring'. Allows one to draw only part of the ring (arc-wise), by modifying the drawable's level. This setting only makes sense in context of a <level-list> (LevelListDrawable).

Children

Element	Description
<size>	Determines the size of the shape.
<gradient>	Adds a background gradient to the shape.
<solid>	Adds a solid background color to the shape. Overides gradient element.
<stroke>	Adds a border to the shape.
<corners>	Adds rounded corners to the shape.
<padding>	The padding for the content within this drawable. (Does not pad graphics in any way.)

<size>

Determines the size of the shape.

Attributes

Name	Type	Default	Description
width	dimension	-1	Width of the shape.
height	dimension	-1	Height of the shape.

<gradient>

Adds a background gradient to the shape.

Attributes

Name	Type	Default	Description
startColor	color	0	The color at the start of the gradient.
centerColor	color	0	The color in the center of the gradient. Optional; if not included, there is no center color.
endColor	color	0	The color at the end of the gradient.
type	enum (linear, radial, sweep)	linear	Determines the type of gradient.
centerX	float|fraction	.5	Determines the location of the centerColor. Ranges from 0 to 1. Ignored if centerColor is undefined.
centerY	float|fraction	.5	Determines the location of the centerColor. Ranges from 0 to 1. Ignored if centerColor is undefined.
angle	float	0	Only valid if type == 'linear'. Determines the angle of a linear gradient. Must be a multiple of 45 degrees.
gradientRadius	float|fraction	N/A	Only valid if type == 'radial' or 'sweep'. Required if type == 'radial'. Determines the radius of the gradient.
useLevel	boolean	false	Determines the amount of the gradient to be drawn, based on the level of the shape. Affects all three gradient types.

<solid>

Adds a solid background color to the shape. Overides gradient element.

Attributes

Name	Type	Default	Description
color	color	0	The color of the background.

<stroke>

Adds a border to the shape.

Attributes

Name	Type	Default	Description
width	dimension	0	The width of the stroke.
color	color	0	The color of the stroke.
dashWidth	dimension	0	The width of each dash. Ignored unless dashGap is also defined.
dashGap	dimension	0	The width of gaps between eahc dash. Ignored unless dashWidth is also defined.

<corners>

Adds rounded corners to the shape.

Attributes

Name	Type	Default	Description
radius	dimension	0	The radius of every corner.
topLeftRadius	dimension	radius	Determines the radius of the top left corner. Ignored unless radius for all corners is defined, either through 'radius' or the other corners' attributes.
topRightRadius	dimension	radius	Determines the radius of the top right corner. Ignored unless radius for all corners is defined, either through 'radius' or the other corners' attributes.
bottomLeftRadius	dimension	radius	Determines the radius of the bottom left corner (buggy; is actually bottom right corner). Ignored unless radius for all corners is defined, either through 'radius' or the other corners' attributes.
bottomRightRadius	dimension	radius	Determines the radius of the bottom right corner (buggy; is actually bottom left corner). Ignored unless radius for all corners is defined, either through 'radius' or the other corners' attributes.

<padding>

The padding for the content within this drawable. (Does not pad graphics in any way.)

Attributes

Name	Type	Default	Description
left	dimension	0	Left padding.
top	dimension	0	Top padding.
right	dimension	0	Right padding.
bottom	dimension	0	Bottom padding.