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

时间：2016-09-09 09:59:20 阅读：285 评论：0 收藏：0 [点我收藏+]

标签：

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. 
3. 
4. 
5. 
6. <shape
7. xmlns:android="http://schemas.android.com/apk/res/android"
8. android:shape="rectangle">
10. 
11. 
12. 
13. 
14. 
15. 
16. <corners
17. android:bottomLeftRadius="5dip"
18. android:bottomRightRadius="5dip"
19. android:radius="5dip"
20. android:topLeftRadius="5dip"
21. android:topRightRadius="5dip"/>
23. 
24. 
25. 
26. 
27. 
28. 
29. 
30. 
31. 
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"/>
43. 
44. <padding
45. android:bottom="5dip"
46. android:left="5dip"
47. android:right="5dip"
48. android:top="15dip"/>
50. 
51. <size
52. android:width="50dip"
53. android:height="10dip"/>
55. 
56. 
57. <solid
58. android:color="@android:color/white"/>
60. 
61. 
62. 
63. 
64. 
65. 
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">
8. 
9. <TextView
10. android:layout_width="match_parent"
11. android:layout_height="100dip"
12. android:background="@drawable/shape_rectangle"
13. android:text="Hello Shape"/>
15. 
16. <TextView
17. android:layout_width="match_parent"
18. android:layout_height="100dip"
19. android:background="@drawable/shape_oval"
20. android:text="Hello Shape"/>
22. 
23. <TextView
24. android:layout_width="match_parent"
25. android:layout_height="100dip"
26. android:background="@drawable/shape_line"
27. android:text="Hello Shape"/>
29. 
30. <ImageView
31. android:layout_width="match_parent"
32. android:layout_height="100dip"
33. android:src="@drawable/shape_line"/>
35. 
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. <?xml version="1.0" encoding="utf-8"?>
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
3. android:shape="rectangle">
4. 
5. <solid android:color="#33000000"/>
6. 
7. </shape>
shape_oval.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="oval">
4. <solid android:color="#00ffff"/>
5. </shape>
shape_line.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="line">
4. 
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>
line形状下, solid标签下的color会无效,
需要为它设置stroke标签, stroke标签中: stroke标签中如果不指定color的颜色, 则默认是黑色,
需要指定width, 如果width如果大于控件的layout_height还无法显示? 背景也无法拉伸值整个控件?
用在background的时候, shape图片会被拉伸,
用在src的时候会按你指定的size大小去显示, 如果为指定size, 会和background一样效果.
还有上述几个疑问, 但没打算深究, 如果你知道, 请告诉我。
shape_ring.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: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>
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

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="20dip"
android:bottomRightRadius="20dip"
android:radius="20dip"
android:topLeftRadius="20dip"
android:topRightRadius="20dip"/>
<solid android:color="#FF4081"/>
</shape>

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="100dip"
android:background="@drawable/shape_rectangle_linear"
android:text="linear"/>
<TextView
android:layout_width="match_parent"
android:layout_height="100dip"
android:background="@drawable/shape_rectangle_radial"
android:text="radial"/>
<TextView
android:layout_width="match_parent"
android:layout_height="100dip"
android:background="@drawable/shape_rectangle_sweep"
android:text="sweep"/>
</LinearLayout>

shape_rectangle_linear.xml文件

[java] view plain

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dip"/>
<gradient
android:angle="0"
android:centerColor="#FF4081"
android:centerX="0.5"
android:centerY="0.5"
android:endColor="#000000"
android:startColor="#FFFFFF"
android:type="linear"
android:useLevel="false"/>
</shape>

shape_rectangle_radial.xml文件

[java] view plain

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dip"/>
<gradient
android:angle="0"
android:centerColor="#FF4081"
android:centerX="0.5"
android:centerY="0.5"
android:endColor="#FFFFFF"
android:gradientRadius="150dip"
android:startColor="#000000"
android:type="radial"
android:useLevel="false"/>
</shape>

shape_rectangle_sweep.xml文件

[java] view plain

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dip"/>
<gradient
android:angle="0"
android:centerColor="#FF4081"
android:centerX="0.5"
android:centerY="0.5"
android:endColor="#FFFFFF"
android:startColor="#000000"
android:type="sweep"
android:useLevel="false"/>
</shape>

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dip"
android:background="@drawable/shape_rectangle"
android:text="这里是没有设置padding大小的shape的图片"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dip"
android:background="@drawable/shape_rectangle_padding"
android:text="这里是设置padding大小为30dip的shape的图片"/>
</LinearLayout>
shape_rectangle.xml文件
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dip"/>
<solid android:color="#00ff00"/>
</shape>
shape_rectangle_padding.xml文件
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dip"/>
<solid android:color="#FF4081"/>
<padding
android:bottom="30dip"
android:left="30dip"
android:right="30dip"
android:top="30dip"/>
</shape>
size标签
作用: 指定图片的大小
使用drawable有两种方式, 一种是控件的background属性; 一种是控件的src属性;
两种方式在使用size方式的时候出现了不同的结果
当用background属性去使用drawable的时候, size标签无效, shape图片大小会随着控件的大小去放大或缩小
当用src属性去使用drawable的时候. 有两种情况:
一, 如果shape图片大小比控件指定大小小, shape图片会显示在控件的中间;
二, 如果shape图片大小比控件的大小大时, shape图片的宽高会等比例缩放, 一直压缩到宽或者高能放进控件内, 并放置在控件的中间, 如下图所示:
这里写图片描述
XML布局代码:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="100dip"
android:background="@drawable/shape_rectangle_size"
android:text="这里是用background属性去设置图片"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dip"
android:text="这里是用src属性去设置图片宽度是200dip 高度是100dip"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="100dip"
android:background="#33000000"
android:src="@drawable/shape_rectangle_size"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dip"
android:text="这里是用src属性去设置图片宽度是500dip 高度是100dip"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="100dip"
android:background="#33000000"
android:src="@drawable/shape_rectangle_size_long"/>
</LinearLayout>
shape_rectangle_size.xml文件
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dip"/>
<solid android:color="#00ff00"/>
<size
android:width="200dip"
android:height="100dp"/>
</shape>
shape_rectangle_size_long.xml文件
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dip"/>
<solid android:color="#00ff00"/>
<size
android:width="500dip"
android:height="100dp"/>
</shape>

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

solid标签

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

stroke标签

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

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

技术分享
XML布局代码

[java] view plain

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="100dip"
android:layout_marginTop="30dip"
android:background="@drawable/shape_rectangle_stroke"
android:gravity="center"
android:text="stroke标签"/>
</LinearLayout>

shape_rectangle_stroke.xml布局文件

[java] view plain

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

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

shape图形实际开发应用场景

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

场景一: 显示圆角的图形

技术分享

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

技术分享

布局XML文件

[java] view plain

<pre name="code" class="java"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#22000000"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="48dip"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="10dip"
android:background="@drawable/shape_test_top"/>
<View
android:layout_width="match_parent"
android:layout_height="48dip"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:background="@drawable/shape_test_middle"/>
<View
android:layout_width="match_parent"
android:layout_height="48dip"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:background="@drawable/shape_test_bottom"/>
<View
android:layout_width="match_parent"
android:layout_height="48dip"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="10dip"
android:background="@drawable/shape_test_single"/>
</LinearLayout>

shape_test_top.xml

[java] view plain

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="10dip"
android:topRightRadius="10dip"/>
<solid android:color="@android:color/white"/>
<stroke
android:width="0.5dip"
android:color="#44000000"/>
</shape>

shape_test_middle.xml

[java] view plain

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/white"/>
<stroke
android:width="0.5dip"
android:color="#44000000"/>
</shape>

shape_test_bottom.xml

[java] view plain

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="10dip"
android:bottomRightRadius="10dip"/>
<solid android:color="@android:color/white"/>
<stroke
android:width="0.5dip"
android:color="#44000000"/>
</shape>

场景二:显示消息的数目

技术分享

直接上图：
技术分享

布局XML代码

[java] view plain

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#22000000"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dip"
android:background="@drawable/shape_test_circle"
android:text="1"
android:textColor="@android:color/white"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dip"
android:background="@drawable/shape_test_circle"
android:text="99+"
android:textColor="@android:color/white"/>
</LinearLayout>

shape_test_circle.xml

[java] view plain

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="10dip"/>
<padding
android:bottom="1dip"
android:left="3dip"
android:right="3dip"
android:top="1dip"/>
<solid android:color="@android:color/holo_red_light"/>
</shape>

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

下面是样式代码：

[java] view plain

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="15dip"
android:bottomRightRadius="15dip"
android:topLeftRadius="15dip"
android:topRightRadius="15dip"/>
<solid
android:color="#01BAFD"/> //这个是底色颜色
<stroke android:color="@color/white"
android:width="1dip"
/>
</shape>

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

标签：

原文地址：http://www.cnblogs.com/itgoyo/p/5855400.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

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

shape图形简单介绍

怎么画?

shape图形参数详细解析

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

corners标签:

gradient标签:

padding标签

solid标签

stroke标签

shape图形实际开发应用场景

场景一: 显示圆角的图形

shape_test_top.xml

shape_test_middle.xml

shape_test_bottom.xml

场景二:显示消息的数目