前言
我认为小伙伴可以直接去谷歌官方文档查看，强调一下：
官方文档是中文！
官方文档是中文！！
官方文档是中文！！！
准备
我们先把整体的属性列在下面：
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"] >
<corners
android:radius="integer"
android:topLeftRadius="integer"
android:topRightRadius="integer"
android:bottomLeftRadius="integer"
android:bottomRightRadius="integer" />
<gradient
android:angle="integer"
android:centerX="float"
android:centerY="float"
android:centerColor="integer"
android:endColor="color"
android:gradientRadius="integer"
android:startColor="color"
android:type=["linear" | "radial" | "sweep"]
android:useLevel=["true" | "false"] />
<padding
android:left="integer"
android:top="integer"
android:right="integer"
android:bottom="integer" />
<size
android:width="integer"
android:height="integer" />
<solid
android:color="color" />
<stroke
android:width="integer"
android:color="color"
android:dashWidth="integer"
android:dashGap="integer" />
</shape>
你所疑惑的也就这么点东西，也就这些属性。看明白后你想要的都能得到满足。哈哈！！
上面的还是看不懂没关系，我们来一张图：
shape.png
看到这个图，我认为你理解下面的内容更加容易。
实战
1.线（实线+虚线）
实线虚线图
实线：shape_line_solid.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:width="3dp"
android:color="@color/colorAccent" />
</shape>
虚线：shape_line_dashed.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android:color="@color/colorAccent"
android:width="2dp"
android:dashGap="3dp"
android:dashWidth="6dp"/>
</shape>
注意 ：
在使用的时候，控件的高度要比线的宽度大。要不不能显示。
如果需要竖线呢怎么处理?? 上面的实线和虚线都是横的！！
竖线：
1.控件旋转90度。
2.方案来源于：骑马倚斜桥w的简书文章
具体的文件：shape_line_vertical_dashed.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-300dp"
android:right="-300dp">
<rotate
android:fromDegrees="90"
android:visible="true">
<shape android:shape="line">
<stroke
android:width="1dp"
android:color="@color/colorAccent"
android:dashWidth="6dp"
android:dashGap="2dp" />
</shape>
</rotate>
</item>
</layer-list>
2.矩形（边框+填充+圆角）
矩形
圆角实线矩形-边框-填充: shape_rect_solid_round.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="3dp"
android:color="@color/colorAccent" />
<solid android:color="@color/colorPrimaryDark" />
<corners android:radius="5dp" />
</shape>
圆角虚线矩形-边框-填充：shape_rect_dashed_solid_round.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="3dp"
android:color="@color/colorAccent"
android:dashWidth="3dp"
android:dashGap="3dp"/>
<solid android:color="@color/colorPrimaryDark" />
<corners android:radius="5dp" />
</shape>
3.渐变效果（矩形为例）
渐变效果
横向渐变: rect_gradient_linear_horizon.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="50dp"
android:height="50dp" />
<stroke
android:width="1px"
android:color="#ffff00ff" />
<!-- 调整angle实现水平渐变，垂直渐变或者对角渐变 -->
<gradient
android:angle="0"
android:centerColor="#fff"
android:centerX="0.5"
android:centerY="0.5"
android:endColor="#ee3ffe"
android:startColor="#ff00ff00"
android:type="linear" />
</shape>
竖向渐变: rect_gradient_linear_vertical.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="50dp"
android:height="50dp" />
<stroke
android:width="1px"
android:color="#ffff00ff" />
<!-- 调整angle实现水平渐变，垂直渐变或者对角渐变 -->
<gradient
android:angle="-45"
android:centerColor="#fff"
android:centerX="0.5"
android:centerY="0.5"
android:endColor="#ee3ffe"
android:startColor="#ff00ff00"
android:type="linear" />
</shape>
对角线渐变: rect_gradient_linear_diagonal.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="50dp"
android:height="50dp" />
<stroke
android:width="1px"
android:color="#ffff00ff" />
<!-- 调整angle实现水平渐变，垂直渐变或者对角渐变 -->
<gradient
android:angle="45"
android:centerColor="#fff"
android:centerX="0.5"
android:centerY="0.5"
android:endColor="#ee3ffe"
android:startColor="#ff00ff00"
android:type="linear" />
</shape>
放射性渐变: rect_gradient_radial.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="50dp"
android:height="50dp" />
<stroke
android:width="1px"
android:color="#ffff00ff" />
<!-- gradientRadius渐变的半径，只有当渐变类型为radial时才能使用 -->
<gradient
android:centerColor="#fff"
android:centerX="0.5"
android:centerY="0.5"
android:endColor="#ee3ffe"
android:startColor="#ff00ff00"
android:gradientRadius="20dp"
android:type="radial" />
</shape>
扫描式渐变: rect_gradient_sweep.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="50dp"
android:height="50dp" />
<stroke
android:width="1px"
android:color="#ffff00ff" />
<gradient
android:centerColor="#fff"
android:centerX="0.5"
android:centerY="0.5"
android:endColor="#ee3ffe"
android:startColor="#ff00ff00"
android:type="sweep" />
</shape>
4.圆和椭圆（边框+填充）
圆和椭圆
圆和椭圆： rect_circle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="true">
<size
android:width="30dp"
android:height="30dp"/>
<stroke
android:width="1px"
android:color="#ffff00" />
<solid android:color="@color/colorPrimaryDark"/>
</shape>
椭圆的实现，View 的长和宽不是正方形，得到的就是椭圆了。
5. 圆环（边框+填充+渐变）
圆环
环内填充： shape_ring_fill.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="10dp"
android:shape="ring"
android:thickness="20dp"
android:useLevel="false">
<solid android:color="@color/colorPrimaryDark" />
</shape>
圆环边框：shape_ring_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="10dp"
android:thickness="20dp"
android:shape="ring"
android:useLevel="false">
<stroke android:color="@color/colorPrimaryDark"
android:width="1dp"/>
</shape>
边框填充：shape_ring_fill_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="10dp"
android:thickness="20dp"
android:shape="ring"
android:useLevel="false">
<stroke android:color="@color/colorPrimaryDark"
android:width="1dp"/>
<solid android:color="@color/colorAccent"/>
</shape>
线性渐变：shape_ring_gradient_linear.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="10dp"
android:thickness="20dp"
android:useLevel="false">
<gradient
android:endColor="@color/colorPrimaryDark"
android:startColor="@color/colorAccent"
android:type="linear" />
</shape>
径向渐变：shape_ring_gradient_radial.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="10dp"
android:thickness="20dp"
android:useLevel="false">
<gradient
android:endColor="@color/colorPrimaryDark"
android:startColor="@color/colorAccent"
android:gradientRadius="30dp"
android:type="radial" />
</shape>
扫描渐变：shape_ring_gradient_sweep.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="10dp"
android:thickness="20dp"
android:useLevel="false">
<gradient
android:endColor="@color/colorPrimaryDark"
android:startColor="@color/colorAccent"
android:gradientRadius="30dp"
android:type="sweep" />
</shape>
总结
上面的内容看完，shape的属性和使用相信小伙伴们都应该掌握了吧！
参考链接：
Android中shape的用法详解
(易懂详细)Android样式开发之shape详细使用
Android XML shape 标签使用详解
网友评论