shape的使用

shape可以定义一个View空间的，圆角，边框，padding，大小，填充颜色，渐变颜色。

shape定义

1 新建文件

shape属于drawable资源文件，根元素为shape，需要在drawable目录下新建一个Drawable Resuorce File，如下图，设置自己的shape的名字和根元素的，这里根元素要定义为shape，文件名自己随意定义，我也定义为了shape。

image.png

然后在drawable出现一个xml文件，就是你定义的文件名.xml。我这里就为shape.xml。

image.png

2 定义shape中的内容

2.1 shape的属性

在android:shape中定义shape的属性，即shape是什么形状的。有四种：
rectangle（矩形）
oval（椭圆形）
ring（圆形）
line（线形）

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

2.2 shape中的标签

shape中共有6中标签
corner：定义圆角
solid：定义内部填充色
stroke：定义边框
padding：定义padding
size：定义控件大小
gradient：定义控件内部的渐变颜色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--定义矩形的圆角，从上到下分别为定义所有的圆角，上下左右四个角的圆角
        如果下面四个都定义了，则第一个定义会被自动忽略。
        此属性只有在shape为rectangle时才会生效
    -->
    <corners
        android:radius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"
        android:bottomLeftRadius="5dp"
    android:bottomRightRadius="5dp"
    />
    <!--此属性定义边框，width为边框的宽度，color为颜色
        dashWidth和dashGap定义虚线
        dashWidth为虚线的每个条的长度
        dashGap为两个虚线点之间间隔的长度
    -->
    <stroke
        android:width="1sp"
        android:color="@color/colorAccent"
        android:dashGap="1sp"
        android:dashWidth="1sp"/>
    <!--此属性定义形状内部的填充色，只有一个color属性-->
    <solid
        android:color="@color/colorAccent"/>
    <!--此属性定义内部的东西与外部的距离-->
    <padding
        android:bottom="5dp"
        android:left="5sp"
        android:right="5dp"
        android:top="5dp"/>
    <!--此属性定义形状的大小，如果使用shape的元素也定义了长宽，则size被设置为外部元素定义的长宽-->
    <size
        android:width="20sp"
        android:height="20sp"/>
    <!--gradient定义渐变-->
   <gradient
       android:type="linear"
       android:startColor="#FFB6C1"
       android:centerColor="#FF1493"
       android:endColor="#4B0082"
       android:angle="45"
       />
</shape>

上面的代码展示了各种标签的使用，前5种标签没什么其他可说的，再单独说一下gradient标签
gardient标签定义内部颜色的渐变。
<b>gradient的属性：</b>
type:有三种可选项，分别为linear（线性渐变），radial（圆形渐变），sweep（扫描式渐变）,三种类型分别对应着不同的属性。
三种渐变公用的属性
startColor：定义渐变的起始演示
centerColor：定义渐变的中间颜色
endColor：定义渐变的结束颜色
linear渐变单独的属性
angle:定义渐变的角度，必须为45的整数倍，不能加单位
radial渐变单独的属性
gradienRadius:定义渐变的圆的半径，float类型，不能加单位
centerX，cneterY:0到1之间的数字，定义圆心的位置，值是圆心相对于整体的比例。float类型。不能加单位
sweep渐变单独的属性
centerX，cneterY:0到1之间的数字，定义扫描的中心点，值是扫描的中心点相对于整体的比例。float类型。不能加单位
举例说明

 <!--linear渐变，定义三个颜色分别为红黄蓝，角度为0-->
   <gradient
       android:type="linear"
       android:startColor="#FF0000"
       android:centerColor="#FFFF00"
       android:endColor="#0000FF"
       android:angle="0"
       />

image.png

<!--linear渐变，定义三个颜色分别为红黄蓝，角度为45度-->
   <gradient
       android:type="linear"
       android:startColor="#FF0000"
       android:centerColor="#FFFF00"
       android:endColor="#0000FF"
       android:angle="45"
       />

image.png

<!--radial渐变，定义三个颜色分别为红黄蓝，半径为100-->
   <gradient
       android:type="radial"
       android:startColor="#FF0000"
       android:centerColor="#FFFF00"
       android:endColor="#0000FF"
       android:gradientRadius="100"
       />

image.png

<!--sweep渐变，定义三个颜色分别为红黄蓝，中心为0.5，0.5-->
   <gradient
       android:type="radial"
       android:startColor="#FF0000"
       android:centerColor="#FFFF00"
       android:endColor="#0000FF"
       android:centerX="0.5"
       android:centerY="0.5"
       />
</shape>

image.png

2.3 不同属性的区别

rectangle：6种标签都有效果，如果不指定android:shape，则默认为rectangle
oval：corners标签对它没有效果，其他的都有效果
line：line只是一条线，用处不大，一般可以用作分割线，stroke和size标签对其有作用。size定义line所处的外层的长和宽，shroke定义线的粗细和颜色等，line只能是水平的，而且位于外层定义的框的中间。

image.png

引用虚线的view需要添加属性android:layerType，值设为"software"，否则显示不了虚线。
ring：除了corner标签，其他的标签对它都有效果。除此之外，ring还有一些自己的属性。
innerRadius：内环半径
innerRadiusRatio：浮点型，内环半径的大小为size或外层元素的宽的值除以这个值得到的结果。（如果外层元素和size不同，则size默认被设置为外层元素中的值，例如该shape用于一个TextView中，TextView定义了自己的长宽）例如该值为3，size的宽度为90sp，则内环半径为90/3=30sp。如果定义了innerRadius，则此属性被覆盖，没有任何效果。
thickness：定义环的宽度
thicknessRatio：也是定义环的宽度，和innerRadiusRatio一样。
useLevel:这个值被设置为false时，环才会显示，要显示圆环，必须设置此值为false。

<?xml version="1.0" encoding="utf-8"?>
<!--定义了内环半径为size/4，环厚度为size/4-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="4"  
    android:thicknessRatio="4"
    android:useLevel="false">
    <size
        android:width="50sp"
        android:height="50sp"/>
    <stroke
        android:width="2sp"
        android:color="#000000"
       />
    <solid
        android:color="#FF0000"/>
    <gradient
        android:type="linear"
        android:startColor="#FF0000"
        android:centerColor="#FFFF00"
        android:endColor="#0000FF"
        android:angle="45"
        />
</shape>

显示出来的图是这样的

image.png

说明几点：
1 内环就是空白的，所有的颜色都在定义的thickness厚度的里面显示
2 如果定义了边框，则内环外环都会有边框。

shape的使用

有了这么多类型的shape，现在需要把shape用在具体的控件中了,它其实就是drawable类型的资源文件，所以可以用在所有需要使用图片的地方，就像使用图片一样来使用它。先来说几种常用场景。

1 直接用于view控件

所有的view控件都可以应用shape
分为两类image类和非image类。
image类：让其src=@drawable/xml文件的名
非image类：让其background=@drawable/xml文件的名
前面已经定义了一个shape.xml,现在来使用

<EditText
        android:layout_width="150sp"
        android:layout_height="150sp"
        style="@style/Text"
        android:background="@drawable/shape"
        android:text="dddd"/>

2 用于selector中
详情参见selector那篇文章。
3 用于layer-list中
详情参见layer-list那篇文章。

不足之处请指正。