前言

本节内容主要讲解drawable文件夹下Shape的使用。

Shape主要是为了给控件背景设定一个形状，使UI看起来更加美观。本实例以Android Studio为开发工具。在/app/src/main/res/drawable文件夹下新建drawable resource file，在选项Root element下输入或选择shape。

一、Shape根标签

Shape根标签为设置形状属性的标签。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:dither="false|true"          
    android:innerRadius="dimension"
    android:innerRadiusRatio="float"
    android:shape="rectangle|line|oval|ring"
    android:thickness="dimension"
    android:thicknessRatio="float"
    android:tint="color"
    android:tintMode="src_in|src_atop|src_over|add|multiply|screen"
    android:useLevel="false|true"
    android:visible="false|true">
</shape>

• dither：在位图的像素配置与屏幕不同时启用位图的抖动；true开启抖动，false停用抖动。默认值为 true。
• innerRadius：内环半径，形状为圆环时可用。只写数字会报错，需要在后面在加上“px”或者“dp”。如果内圆环太大，超出控件的大小也会不显示。
• innerRadiusRatio：内环的比例（环的半径/内环半径），形状为圆环时可用。默认为3，如果设置了innerRadius，那这个属性不再生效。
• shape：rectangle矩形、line线、oval椭圆、ring环。默认为矩形rectangle。
• thickness：环的厚度，形状为圆环时可用。
• thicknessRatio：环的厚度比（环的半径/环的厚度），形状为圆环时可用。默认为9。如果设置了thickness，那这个属性不再生效。
• tint：给圆环着色，只能在API 21及以上才能使用，否则没有效果。
• tintMode：着色类型，只能在API 21及以上才能使用，否则没有效果。
• useLevel：只有当shape使用在LevelListDrawable中的时候，这个值为true，否则为false。这个属性很少使用,一般别用就行。
• visible：顾名思义，可见性。true可见，false不可见。默认为true。

二、solid标签

solid标签为设置填充属性的标签。

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

• color：填充颜色，此标签只有这一个属性。
  

三、corners标签

corners标签为设置圆角属性的标签。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/rosy_brown" />
    <corners android:radius="8dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="10dp"
        android:bottomLeftRadius="15dp"
        android:bottomRightRadius="20dp"/>
</shape>

• radius：圆角半径，统一指定四个角的圆角半径。后面单独设定的圆角半径会覆盖radius。
• topLeftRadius：左上角的圆角半径。
• topRightRadius：右上角的圆角半径。
• bottomLeftRadius：左下角的圆角半径。
• bottomRightRadius：右下角的圆角半径。
  
  四个角的圆角半径

四、stroke标签

stroke标签为设置边框属性的标签。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:color="@color/green"
        android:dashWidth="3dp"
        android:dashGap="4dp"
        android:width="1dp"/>
</shape>

• color：边框颜色值，需要配合width属性使用，否则没有效果。
• width：边框的宽度值。不设置颜色时，默认为黑色。
• dashWidth：虚线每条小线段的长度。如果只是想显示一条虚线，将shape根标签的shape属性改为 line。
• dashGap：小线段之间的间距。
  
  边框颜色为绿色，线段长度为3dp,间距4dp

五、size标签

size标签为设置大小属性的标签。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <size android:height="40dp" android:width="80dp" />
</shape>

• width: 指定shape的宽度。
• height：指定shape的高度。

六、padding标签

padding标签为设置内边距属性的标签。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />
</shape>

• bottom: 与底部的内边距。在控件中设置padding属性会覆盖此属性。
• left：与左边的内边距。在控件中设置padding属性会覆盖此属性。
• right：与右边的内边距。在控件中设置padding属性会覆盖此属性。
• top：与顶部的内边距。在控件中设置padding属性会覆盖此属性。

七、gradient标签

gradient标签为设置渐变属性的标签。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="integer"
        android:centerColor="color"
        android:centerX="float"
        android:centerY="float"
        android:endColor="color"
        android:gradientRadius="dimension"
        android:startColor="color"
        android:type="linear|radial|sweep"
        android:useLevel="false|true" />
</shape>

• angle：渐变角度。只能是45的整数倍，type属性为linear时才有效。
• centerColor：渐变过程中的颜色值。
• startColor：渐变起始的颜色值。
• endColor：渐变结束的颜色值。
• centerX：渐变原点相对控件X坐标轴的值，默认为0.5。
• centerY：渐变原点相对控件Y坐标轴的值，默认为0.5。
• gradientRadius：渐变半径，type属性为radial时才有效
• type：渐变类型。linear线性渐变，radial放射渐变，sweep扫描渐变
• useLevel：暂时别管它。

示例：

1、linear线性渐变

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="0|45|90|135|180|225|270|315|360"
        android:centerColor="@color/brown"
        android:endColor="@color/red"
        android:startColor="@color/rosy_brown"
        android:type="linear" />
</shape>

渐变角度示例

• 那么centerX 和centerY 对线性渐变有什么影响呢？
  当centerColor不存在时，centerX 和centerY对渐变没有任何影响。
  当centerColor存在时，渐变起始颜色的宽度以centerX为准，如果centerX没有定义，则以centerY为准。
  
  angle = 45,centerX =0.1|0.5 |0.8时的效果图
  
  通过上图可以看到起始颜色值的范围占比跟centerX 有关，如果centerX 不存在，则跟centerY 有关，跟 centerY = 0. 1|0.5|0.8 是一样的效果。

2、radial渐变

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:gradientRadius="20dp"
        android:centerX="0.5"
        android:centerY="0.5"
        android:centerColor="@color/brown"
        android:endColor="@color/red"
        android:startColor="@color/rosy_brown"
        android:type="radial" />
    <size android:width="40dp" android:height="40dp"/>
 </shape>

radial渐变，centerX=0.5,centerY=0.5

radial渐变，centerX=0.4,centerY=0.4

3、sweep渐变

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:centerX="0.4"
        android:centerY="0.4"
        android:centerColor="@color/brown"
        android:endColor="@color/red"
        android:startColor="@color/rosy_brown"
        android:type="sweep" />
    <size android:width="40dp" android:height="40dp"/>
</shape>

扫描圆点默认在控件中心，从X轴正方向开始顺时针方向开始渐变

八、后言

如有问题，欢迎留言交流。