Android Drawable - Shape Drawable使用详解（附图）

Posted 2020-08-08 出身不及赵甲第，努力应过陈浮生。

TIPS

 

• shape图形 –简单介绍
• shape图形 –如何画?
• shape图形 –参数详细解析
• shape图形 –如何用?
• shape图形 –实际开发应用场景

• shape图形简单介绍

  用xml实现一些形状图形, 或则颜色渐变效果, 相比PNG图片, 占用空间更小; 相比自定义View, 实现起来更加简单

  ---

  怎么画?

  在res/drawable/目录下建一个XML资源文件 
  Shape图片语法相对复杂, 下面是一个总结性的注释, 涵盖了大部分的参数,属性, 建议先跳过这段, 回头再看

  [java] view plain

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!--rectangle 长方形 /默认-->  
  3. <!--oval 椭圆-->  
  4. <!--line 线-->  
  5. <!--ring 环形-->  
  6. <shape  
  7.     xmlns:android="http://schemas.android.com/apk/res/android"  
  8.     android:shape="rectangle">  
  9.   
  10.     <!--corners标签: 圆角-->  
  11.     <!--bottomLeftRadius 左下角-->  
  12.     <!--bottomRightRadius 右下角-->  
  13.     <!--topLeftRadius 左上角-->  
  14.     <!--topRightRadius 右上角-->  
  15.     <!--radius 是四个角, 设置了这个就不需要设置上面的四个了, PS:它的优先级比较低, 会被其他参数覆盖-->  
  16.     <corners  
  17.         android:bottomLeftRadius="5dip"  
  18.         android:bottomRightRadius="5dip"  
  19.         android:radius="5dip"  
  20.         android:topLeftRadius="5dip"  
  21.         android:topRightRadius="5dip"/>  
  22.   
  23.     <!--gradient标签: 简单的说: 让图形变成一个有颜色梯度的-->  
  24.     <!--angle 是颜色变换的角度, 默认是0, 取值必须是45的 倍数. 0: 是颜色从左边到右边, 90: 是颜色从底部到顶部, -->  
  25.     <!--startColor centerColor endColor 一起使用: 开始的颜色, 中间的颜色, 结束的颜色-->  
  26.     <!--centerX centerY是指定位置坐标, 取值是0.0f ~ 1.0f 之间, 例如: android:centerX="0.5f"  表示X方向的中间位置-->  
  27.     <!--type 颜色渐变的类型, 取值类型有三种: linear/radial/sweep  -->  
  28.     <!--linear 线性变化, 就是颜色从左往右, 从下往上-->  
  29.     <!--radial 放射变化, 例如: 从一个圆中心到圆的边缘变化-->  
  30.     <!--sweep 扫描式渐变, 类似雷达扫描的那种图形-->  
  31.     <!--gradientRadius 和android:type="radial"一起连用, 半径-->  
  32.     <gradient  
  33.         android:angle="0"  
  34.         android:centerColor="#000"  
  35.         android:centerX="0.5"  
  36.         android:centerY="0.5"  
  37.         android:endColor="#FFF"  
  38.         android:gradientRadius="20dip"  
  39.         android:startColor="#000"  
  40.         android:type="linear"  
  41.         android:useLevel="true"/>  
  42.   
  43.     <!--padding标签: 这里的padding是控件中间内容与shape图形图片的距离-->  
  44.     <padding  
  45.         android:bottom="5dip"  
  46.         android:left="5dip"  
  47.         android:right="5dip"  
  48.         android:top="15dip"/>  
  49.   
  50.     <!--size标签 shape图形的宽度和高度  这里一般不用设置, 它的优先级没有控件的优先级大, 他指定控件的宽高就好, shape图形会随控件拉伸-->  
  51.     <size  
  52.         android:width="50dip"  
  53.         android:height="10dip"/>  
  54.   
  55.     <!--solid标签: shape图形背景色-->  
  56.     <!--PS: 这个和上面的gradient标签会互斥, 一个是设置背景色, 一个是设置渐变色, 你懂得-->  
  57.     <solid  
  58.         android:color="@android:color/white"/>  
  59.   
  60.     <!--stroke标签: 边框-->  
  61.     <!--width 边框的宽度-->  
  62.     <!--color 边框的颜色-->  
  63.     <!--下面两个参数是 把边框变成虚线用-->  
  64.     <!--dashGap 虚线中空格的长度-->  
  65.     <!--dashWidth 虚线中实线的长度-->  
  66.     <stroke  
  67.         android:width="5dip"  
  68.         android:color="#0000FF"  
  69.         android:dashGap="2dip"  
  70.         android:dashWidth="1dip"/>  
  71. </shape>  
• 
  

  shape图形参数详细解析

  • shape 图形形状
  • corners 圆角标签
  • gradient 阶梯渐变标签
  • padding 边距标签
  • size 大小标签
  • solid 背景标签
  • stroke 边框标签

  shape图形的形状, 一共四种形状.

  • 1.rectangle 长方形/默认是长方形
  • 2.oval 椭圆
  • 3.line 线
  • 4.ring 环形
  • 
    布局代码如下：
  
  
  
• [java] view plain

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.               android:layout_width="match_parent"  
  4.               android:layout_height="match_parent"  
  5.               android:background="@android:color/white"  
  6.               android:orientation="vertical">  
  7.   
  8.     <!--rectangle长方形-->  
  9.     <TextView  
  10.         android:layout_width="match_parent"  
  11.         android:layout_height="100dip"  
  12.         android:background="@drawable/shape_rectangle"  
  13.         android:text="Hello Shape"/>  
  14.   
  15.     <!--oval椭圆形-->  
  16.     <TextView  
  17.         android:layout_width="match_parent"  
  18.         android:layout_height="100dip"  
  19.         android:background="@drawable/shape_oval"  
  20.         android:text="Hello Shape"/>  
  21.   
  22.     <!--line线性  background-->  
  23.     <TextView  
  24.         android:layout_width="match_parent"  
  25.         android:layout_height="100dip"  
  26.         android:background="@drawable/shape_line"  
  27.         android:text="Hello Shape"/>  
  28.   
  29.     <!--line线性 src-->  
  30.     <ImageView  
  31.         android:layout_width="match_parent"  
  32.         android:layout_height="100dip"  
  33.         android:src="@drawable/shape_line"/>  
  34.   
  35.     <!--ring环形-->  
  36.     <TextView  
  37.         android:layout_width="match_parent"  
  38.         android:layout_height="100dip"  
  39.         android:background="@drawable/shape_ring"  
  40.         android:text="Hello Shape"/>  
  41. </LinearLayout>  

  shape_rectangle.xml
• [java] view plain

  1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.        android:shape="rectangle">  
  4.        <!--这里shape如果不指定是那种类型, 就会是默认的rectangle长方形.-->  
  5.     <solid android:color="#33000000"/>  
  6.        <!--solid标签:指定背景色-->  
  7. </shape></span>  

  
  shape_oval.xml
• [java] view plain

  1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.        android:shape="oval">  
  4.     <solid android:color="#00ffff"/>  
  5. </shape></span>  

  
  shape_line.xml
  

  [java] view plain

  1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.        android:shape="line">  
  4.     <!--line模式下solid标签无效-->  
  5.     <solid android:color="#33000000"/>  
  6.     <stroke  
  7.         android:width="99dip"  
  8.         android:color="#ff0000"/>  
  9.     <size  
  10.         android:width="500dip"  
  11.         android:height="300dip"/>  
  12. </shape></span>  

  line形状下, solid标签下的color会无效, 
  需要为它设置stroke标签, stroke标签中: stroke标签中如果不指定color的颜色, 则默认是黑色, 
  需要指定width, 如果width如果大于控件的layout_height还无法显示? 背景也无法拉伸值整个控件? 
  用在background的时候, shape图片会被拉伸, 
  用在src的时候会按你指定的size大小去显示, 如果为指定size, 会和background一样效果. 
  还有上述几个疑问, 但没打算深究, 如果你知道, 请告诉我。
• shape_ring.xml
  

  [java] view plain

  1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.        android:innerRadius="10dip"  
  4.        android:innerRadiusRatio="2"  
  5.        android:shape="ring"  
  6.        android:thickness="50dip"  
  7.        android:thicknessRatio="3"  
  8.        android:useLevel="false">  
  9.     <solid android:color="#FF4081"/>  
  10. </shape></span>  

  ring形状下, 有几个特殊的属性:

  • innerRadius 中间圆圈的半径;
  • innerRadiusRatio 如果和innerRadius同时存在是, innerRadiusRatio无效, 是一个比率: shape图片宽度/内半径, 默认是9;
  • thickness 圆环的厚度, 整的shape图片的半径减去内圆的半径;
  • thicknessRatio 同样如果和thickness同时存在是, thicknessRatio无效, 也是一个比率: shape图片宽度/圆环厚度, 默认值是3;
  • useLevel 一般使用false, 否则无法显示之类

  可能看到这里还是不会用, 下面就用最常用的rectangle长方形做详细的讲解:

  corners标签:

  作用: 指定长方形四角的圆滑度, 圆角矩形就是用这个corners标签办到

  • bottomLeftRadius 左下角
  • bottomRightRadius 右下角
  • topLeftRadius 左上角
  • topRightRadius 右上角
  • radius 是四个角, 设置了这个就不需要设置上面的四个了, 但是它的优先级比较低, 会被上面的设置所覆盖

  
  
  

shape_rectangle.xml文件

 

 

[java] view plain

1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
3.        android:shape="rectangle">  
4.     <corners  
5.         android:bottomLeftRadius="20dip"  
6.         android:bottomRightRadius="20dip"  
7.         android:radius="20dip"  
8.         android:topLeftRadius="20dip"  
9.         android:topRightRadius="20dip"/>  
10.     <solid android:color="#FF4081"/>  
11. </shape></span>  

 

gradient标签:

作用: 让图形有颜色的渐变效果

• angle 是颜色变换的角度, 默认是0, 取值必须是45的倍数. 0: 是颜色从左边到右边, 90: 是颜色从底部到顶部,
• startColor centerColor endColor : 开始的颜色, 中间的颜色, 结束的颜色
• centerX centerY是指定位置坐标, 取值是0.0f ~ 1.0f 之间, 例如: android:centerX=”0.5f” 表示X方向的中间位置
• type 颜色渐变的类型, 取值类型有三种: linear/radial/sweep 
  
  • linear 线性渐变, 就是颜色从左往右, 从下往上
  • radial 放射渐变, 例如: 从一个圆中心到圆的边缘变化
  • sweep 扫描式渐变, 类似雷达扫描的那种图形
• gradientRadius 和android:type=”radial”一起连用, shape图片的半径

XML布局代码

[java] view plain

1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.               android:layout_width="match_parent"  
4.               android:layout_height="match_parent"  
5.               android:background="@android:color/white"  
6.               android:orientation="vertical">  
7.   
8.     <!--rectangle长方形 linear 线性渐变-->  
9.     <TextView  
10.         android:layout_width="match_parent"  
11.         android:layout_height="100dip"  
12.         android:background="@drawable/shape_rectangle_linear"  
13.         android:text="linear"/>  
14.   
15.     <!--rectangle长方形 radial 放射式渐变-->  
16.     <TextView  
17.         android:layout_width="match_parent"  
18.         android:layout_height="100dip"  
19.         android:background="@drawable/shape_rectangle_radial"  
20.         android:text="radial"/>  
21.   
22.     <!--rectangle长方形 sweep 扫描式渐变-->  
23.     <TextView  
24.         android:layout_width="match_parent"  
25.         android:layout_height="100dip"  
26.         android:background="@drawable/shape_rectangle_sweep"  
27.         android:text="sweep"/>  
28. </LinearLayout></span>  

shape_rectangle_linear.xml文件

 

[java] view plain

1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
3.        android:shape="rectangle">  
4.     <corners android:radius="20dip"/>  
5.     <gradient  
6.         android:angle="0"  
7.         android:centerColor="#FF4081"  
8.         android:centerX="0.5"  
9.         android:centerY="0.5"  
10.         android:endColor="#000000"  
11.         android:startColor="#FFFFFF"  
12.         android:type="linear"  
13.         android:useLevel="false"/>  
14.     <!--    <solid android:color="#FF4081"/>-->  
15.     <!--android:gradientRadius="150dip"-->  
16. </shape></span>  

shape_rectangle_radial.xml文件

 

 

[java] view plain

1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
3.        android:shape="rectangle">  
4.     <corners android:radius="20dip"/>  
5.     <gradient  
6.         android:angle="0"  
7.         android:centerColor="#FF4081"  
8.         android:centerX="0.5"  
9.         android:centerY="0.5"  
10.         android:endColor="#FFFFFF"  
11.         android:gradientRadius="150dip"  
12.         android:startColor="#000000"  
13.         android:type="radial"  
14.         android:useLevel="false"/>  
15.     <!--    <solid android:color="#FF4081"/>-->  
16. </shape></span>  

shape_rectangle_sweep.xml文件

 

 

[java] view plain

1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
3.        android:shape="rectangle">  
4.     <corners android:radius="20dip"/>  
5.     <gradient  
6.         android:angle="0"  
7.         android:centerColor="#FF4081"  
8.         android:centerX="0.5"  
9.         android:centerY="0.5"  
10.         android:endColor="#FFFFFF"  
11.         android:startColor="#000000"  
12.         android:type="sweep"  
13.         android:useLevel="false"/>  
14.     <!--<solid android:color="#FF4081"/>-->  
15.     <!--android:gradientRadius="150dip"-->  
16. </shape></span>  

 

PS: 
- solid标签会和gradient标签冲突, 会覆盖gradient配置的颜色; 
- gradient标签中的android:gradientRadius属性和android:type=”radial”一起连用, 配置shape图片的半径 
- centerX centerY是指定位置坐标, 取值是0.0f ~ 1.0f 之间, 例如: android:centerX=”0.5f” 表示X方向的中间位置, 这里就不做演示了

padding标签

作用: 设置控件中(文字)内容与shape图片边框的距离

• bottom 底部距离
• left 左边距离
• right 右边距离
• top 听不距离

 
XML布局代码:

 

[java] view plain

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.               android:layout_width="match_parent"  
4.               android:layout_height="match_parent"  
5.               android:background="@android:color/white"  
6.               android:orientation="vertical">  
7.     <!--这里是没有设置padding大小的shape的图片-->  
8.     <TextView  
9.         android:layout_width="match_parent"  
10.         android:layout_height="wrap_content"  
11.         android:layout_marginTop="30dip"  
12.         android:background="@drawable/shape_rectangle"  
13.         android:text="这里是没有设置padding大小的shape的图片"/>  
14.   
15.     <!--这里是设置padding大小为30dip的shape的图片-->  
16.     <TextView  
17.         android:layout_width="match_parent"  
18.         android:layout_height="wrap_content"  
19.         android:layout_marginTop="30dip"  
20.         android:background="@drawable/shape_rectangle_padding"  
21.         android:text="这里是设置padding大小为30dip的shape的图片"/>  
22. </LinearLayout>  
23.   
24. shape_rectangle.xml文件  
25.   
26. <?xml version="1.0" encoding="utf-8"?>  
27. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
28.        android:shape="rectangle">  
29.     <corners android:radius="20dip"/>  
30.     <solid android:color="#00ff00"/>  
31. </shape>  
32.   
33. shape_rectangle_padding.xml文件  
34.   
35. <?xml version="1.0" encoding="utf-8"?>  
36. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
37.        android:shape="rectangle">  
38.     <corners android:radius="20dip"/>  
39.     <solid android:color="#FF4081"/>  
40.     <padding  
41.         android:bottom="30dip"  
42.         android:left="30dip"  
43.         android:right="30dip"  
44.         android:top="30dip"/>  
45. </shape>  
46.   
47. size标签  
48.   
49. 作用: 指定图片的大小   
50. 使用drawable有两种方式, 一种是控件的background属性; 一种是控件的src属性;   
51. 两种方式在使用size方式的时候出现了不同的结果  
52.   
53. 当用background属性去使用drawable的时候, size标签无效, shape图片大小会随着控件的大小去放大或缩小  
54. 当用src属性去使用drawable的时候. 有两种情况:   
55. 一, 如果shape图片大小比控件指定大小小, shape图片会显示在控件的中间;  
56. 二, 如果shape图片大小比控件的大小大时, shape图片的宽高会等比例缩放, 一直压缩到宽或者高能放进控件内, 并放置在控件的中间, 如下图所示:  
57. 这里写图片描述   
58. XML布局代码:  
59.   
60. <?xml version="1.0" encoding="utf-8"?>  
61. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
62.               android:layout_width="match_parent"  
63.               android:layout_height="match_parent"  
64.               android:background="@android:color/white"  
65.               android:orientation="vertical">  
66.   
67.     <!--这里是用background属性去设置图片-->  
68.     <TextView  
69.         android:layout_width="match_parent"  
70.         android:layout_height="100dip"  
71.         android:background="@drawable/shape_rectangle_size"  
72.         android:text="这里是用background属性去设置图片"/>  
73.   
74.     <TextView  
75.         android:layout_width="match_parent"  
76.         android:layout_height="wrap_content"  
77.         android:layout_marginTop="30dip"  
78.         android:text="这里是用src属性去设置图片  宽度是200dip 高度是100dip"/>  
79.   
80.     <!--这里是用src属性去设置shape图片 宽度是200dip-->  
81.     <ImageView  
82.         android:layout_width="match_parent"  
83.         android:layout_height="100dip"  
84.         android:background="#33000000"  
85.         android:src="@drawable/shape_rectangle_size"/>  
86.   
87.     <TextView  
88.         android:layout_width="match_parent"  
89.         android:layout_height="wrap_content"  
90.         android:layout_marginTop="30dip"  
91.         android:text="这里是用src属性去设置图片  宽度是500dip 高度是100dip"/>  
92.   
93.     <!--这里是用src属性去设置shape图片 宽度是500dip-->  
94.     <ImageView  
95.         android:layout_width="match_parent"  
96.         android:layout_height="100dip"  
97.         android:background="#33000000"  
98.         android:src="@drawable/shape_rectangle_size_long"/>  
99. </LinearLayout>  
100.   
101. shape_rectangle_size.xml文件  
102.   
103. <?xml version="1.0" encoding="utf-8"?>  
104. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
105.        android:shape="rectangle">  
106.     <corners android:radius="20dip"/>  
107.     <solid android:color="#00ff00"/>  
108.     <size  
109.         android:width="200dip"  
110.         android:height="100dp"/>  
111. </shape>  
112.   
113. shape_rectangle_size_long.xml文件  
114.   
115. <?xml version="1.0" encoding="utf-8"?>  
116. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
117.        android:shape="rectangle">  
118.     <corners android:radius="20dip"/>  
119.     <solid android:color="#00ff00"/>  
120.     <size  
121.         android:width="500dip"  
122.         android:height="100dp"/>  
123. </shape>  

 

 

PS: 用src去设置drawable处理起来会比较麻烦, 实际开发中其实也很少有人这么用

solid标签

给图片设置背景色. 上面已经用到了, 就不多说了, 
PS: 它和gradient标签是冲突的, solid标签会覆盖gradient标签配置的颜色 
我常用的用法, 在solid标签中的color属性配置颜色选择器selector.xml, 实现点击换色的点击效果

stroke标签

作用: 给shape图形设置边框, 设置边框的宽度, 颜色, 实现还是虚线, 以及虚线的间隔大小

• width 边框线的宽度
• color 边框线的颜色
• 下面两个参数是设置虚线是需要用到的
• dashGap 虚线间隔的长度
• dashWidth 虚线中实线的长度

 
XML布局代码

[java] view plain

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.               android:layout_width="match_parent"  
4.               android:layout_height="match_parent"  
5.               android:background="@android:color/white"  
6.               android:orientation="vertical">  
7.   
8.     <TextView  
9.         android:layout_width="match_parent"  
10.         android:layout_height="100dip"  
11.         android:layout_marginTop="30dip"  
12.         android:background="@drawable/shape_rectangle_stroke"  
13.         android:gravity="center"  
14.         android:text="stroke标签"/>  
15. </LinearLayout>  

shape_rectangle_stroke.xml布局文件

 

[java] view plain

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
3.        android:shape="rectangle">  
4.     <corners android:radius="20dip"/>  
5.     <solid android:color="#00ff00"/>  
6.     <stroke  
7.         android:width="5dip"  
8.         android:color="#FF4081"  
9.         android:dashGap="5dip"  
10.         android:dashWidth="10dip"/>  
11. </shape>  

 

现在在去看那个总结图是不是不一样呢?

shape图形实际开发应用场景

我想说, shape图形真的非常非常常见

场景一: 显示圆角的图形

用shape图片设置background实现起来非常简单 
只需要设置形状，背景色，四个角的圆角度数，边框的宽度， 以及边框的颜色

布局XML文件

[java] view plain

1. <pre name="code" class="java"><?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.               android:layout_width="match_parent"  
4.               android:layout_height="match_parent"  
5.               android:background="#22000000"  
6.               android:orientation="vertical">  
7.   
8.     <View  
9.         android:layout_width="match_parent"  
10.         android:layout_height="48dip"  
11.         android:layout_marginLeft="10dip"  
12.         android:layout_marginRight="10dip"  
13.         android:layout_marginTop="10dip"  
14.         android:background="@drawable/shape_test_top"/>  
15.   
16.     <View  
17.         android:layout_width="match_parent"  
18.         android:layout_height="48dip"  
19.         android:layout_marginLeft="10dip"  
20.         android:layout_marginRight="10dip"  
21.         android:background="@drawable/shape_test_middle"/>  
22.   
23.     <View  
24.         android:layout_width="match_parent"  
25.         android:layout_height="48dip"  
26.         android:layout_marginLeft="10dip"  
27.         android:layout_marginRight="10dip"  
28.         android:background="@drawable/shape_test_bottom"/>  
29.   
30.     <View  
31.         android:layout_width="match_parent"  
32.         android:layout_height="48dip"  
33.         android:layout_marginLeft="10dip"  
34.         android:layout_marginRight="10dip"  
35.         android:layout_marginTop="10dip"  
36.         android:background="@drawable/shape_test_single"/>  
37. </LinearLayout>  

 

shape_test_top.xml

[java] view plain

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape  
3.     xmlns:android="http://schemas.android.com/apk/res/android"  
4.     android:shape="rectangle">  
5.   
6.     <corners  
7.         android:topLeftRadius="10dip"  
8.         android:topRightRadius="10dip"/>  
9.   
10.     <!--背景色-->  
11.     <solid android:color="@android:color/white"/>  
12.   
13.     <!--边框的宽度以及颜色-->  
14.     <stroke  
15.         android:width="0.5dip"  
16.         android:color="#44000000"/>  
17. </shape>  

shape_test_middle.xml

[java] view plain

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape  
3.     xmlns:android="http://schemas.android.com/apk/res/android"  
4.     android:shape="rectangle">  
5.   
6.     <!--背景色-->  
7.     <solid android:color="@android:color/white"/>  
8.   
9.     <!--边框的宽度以及颜色-->  
10.     <stroke  
11.         android:width="0.5dip"  
12.         android:color="#44000000"/>  
13. </shape>  

shape_test_bottom.xml

 

 

 

[java] view plain

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape  
3.     xmlns:android="http://schemas.android.com/apk/res/android"  
4.     android:shape="rectangle">  
5.   
6.     <corners  
7.         android:bottomLeftRadius="10dip"  
8.         android:bottomRightRadius="10dip"/>  
9.   
10.     <!--背景色-->  
11.     <solid android:color="@android:color/white"/>  
12.   
13.     <!--边框的宽度以及颜色-->  
14.     <stroke  
15.         android:width="0.5dip"  
16.         android:color="#44000000"/>  
17. </shape>  

场景二:显示消息的数目

 

直接上图： 

布局XML代码

[java] view plain

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.               android:layout_width="match_parent"  
4.               android:layout_height="match_parent"  
5.               android:background="#22000000"  
6.               android:orientation="vertical">  
7.   
8.     <TextView  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content"  
11.         android:layout_margin="20dip"  
12.         android:background="@drawable/shape_test_circle"  
13.         android:text="1"  
14.         android:textColor="@android:color/white"/>  
15.   
16.     <TextView  
17.         android:layout_width="wrap_content"  
18.         android:layout_height="wrap_content"  
19.         android:layout_margin="20dip"  
20.         android:background="@drawable/shape_test_circle"  
21.         android:text="99+"  
22.         android:textColor="@android:color/white"/>  
23. </LinearLayout>  

shape_test_circle.xml

 

[java] view plain

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:shape="rectangle">  
4.   
5.     <!--圆角大小-->  
6.     <corners android:radius="10dip"/>  
7.   
8.     <!--文字到shape图片边缘的距离-->  
9.     <padding  
10.         android:bottom="1dip"  
11.         android:left="3dip"  
12.         android:right="3dip"  
13.         android:top="1dip"/>  
14.   
15.     <!--背景色-->  
16.     <solid android:color="@android:color/holo_red_light"/>  
17. </shape>  

 

最后这种样式是开发中用到比较多的情况，就是给按钮设置背景

 

 

下面是样式代码：

 

[java] view plain

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:shape="rectangle">  
4.      <corners  
5.         android:bottomLeftRadius="15dip"  
6.         android:bottomRightRadius="15dip"  
7.         android:topLeftRadius="15dip"  
8.         android:topRightRadius="15dip"/>  
9.      <solid  
10.         android:color="#01BAFD"/>  //这个是底色颜色<span style="white-space:pre"> </span>  
11.      
12.    <stroke android:color="@color/white"  
13.        android:width="1dip"  
14.        />  
15.      
16.   
17. </shape>