shape标签详解

虽然一些比较日常的效果都能轻松使用shape实现，但是一些稍微复杂的效果还是得去查，实在麻烦

写个文章记录一下

ShapeDrawable是一种很常见的Drawable，可以理解为通过颜色来构造的图形，它既可以是纯色的图形，也可以是具有渐变效果的图形，ShapeDrawabled语法如下所示：

<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="integer"
    android:centerY="integer"
    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>标签中的 android:shape=["rectangle" | "oval" | "line" | "ring"]

这个属性有四个可选项，分别表示rectangle（矩形）oval（椭圆）line（横线）ring（圆环），默认为rectangle，需要注意line和ring需要通过标签来指定线的宽度和颜色等信息，否则无法达到预期效果

接下来是<corners>标签，这个标签表示圆角,只适用于矩形，即当<shape>标签中的android:shape=rectangle时有效

android:radius—— 给四个角设置相同的角度，优先级较低，会被其他四个属性覆盖 

android:bottomLeftRadius——设定左下角的角度 

android:bottomRightRadius——设定右下角的角度

android:TopLeftRadius——设定左上角的角度 

android:TopRightRadius——设定右上角的角度

效果图如下:

代码分别如下：

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

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

其中<solid>标签表示填充颜色，稍后讲

接下来是<solid>标签，这个标签表示填充颜色，只有一个属性android:color="color"

说到<solid>标签就必须说一说<gradient>标签

<gradient>标签表示渐变色，他与<solid>是互相排斥的

他可以设置2色渐变也可以设置为三色渐变，语法如下：

<gradient   
    android:type=["linear" | "radial" | "sweep"]    //共有3中渐变类型，线性渐变（默认）/放射渐变/扫描式渐变    
    android:angle="integer"     //渐变角度，必须为45的倍数，0为从左到右，90为从上到下    
    android:centerX="float"     //渐变中心X的相当位置，范围为0～1    
    android:centerY="float"     //渐变中心Y的相当位置，范围为0～1    
    android:startColor="color"   //渐变开始点的颜色    
    android:centerColor="color"  //渐变中间点的颜色，在开始与结束点之间    
    android:endColor="color"    //渐变结束点的颜色    
    android:gradientRadius="float"  //渐变的半径，只有当渐变类型为radial时才能使用    
    android:useLevel=["true" | "false"] />  //使用LevelListDrawable时就要设置为true。设为false时才有渐变效果    

三种样式的代码如下：

<!--第一个线性渐变-->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="15dp"/>
    <gradient android:angle="45"
        android:centerX="0.7"
        android:type="linear"
        android:centerY="0.5"
        android:startColor="@color/colorAccent"
        android:centerColor="@color/colorPrimary"
        android:endColor="@color/colorPrimaryDark"/>
</shape>

    <!--第二个放射性渐变-->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="15dp" />
    <gradient
        android:angle="180"
        android:centerColor="@color/colorPrimary"
        android:centerX="0.5"
        android:centerY="0.5"
        android:endColor="@color/colorPrimaryDark"
        android:gradientRadius="500dp"
        android:startColor="@color/colorAccent"
        android:type="radial" />
</shape>

    <!--第三个扫描式渐变-->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="15dp" />
    <gradient
        android:angle="180"
        android:centerColor="@color/colorPrimary"
        android:centerX="0.5"
        android:centerY="0.5"
        android:endColor="@color/colorPrimaryDark"
        android:startColor="@color/colorAccent"
        android:type="sweep" />
</shape>

<stroke>是描边属性，可以定义描边的宽度，颜色，虚实线等

<stroke         
    android:width="dimension"   //描边的宽度    
    android:color="color"   //描边的颜色    
    // 以下两个属性设置虚线    
    android:dashWidth="dimension"   //虚线的宽度，值为0时是实线    
    android:dashGap="dimension" />      //虚线的间隔   

上面各个属性的意义如下：

直接上代码和效果图

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:color="@color/Black"
        android:dashGap="3dp"
        android:dashWidth="8dp"
        android:width="2dp"/>
    <solid android:color="@color/colorAccent"/>
</shape>

size和padding

这两个基本上不怎么用，因为他们所具有的功能，控件本身也能实现。
size:是用来定义图形的大小的。

padding：用来定义内部边距

再写几个看起来比较屌的用法

做一个渐变色圆环

代码：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="100dp"
    android:thickness="50dp"
    android:useLevel="false"
    >
    <gradient android:startColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"
        android:centerY="0.4"
        android:centerColor="@color/colorAccent"/>
</shape>

以下属性只能在android:shape="ring"的时候使用：

属性	意义
android:innerRadius	尺寸，内环的半径
android:thickness	尺寸，环的厚度
android:innerRadiusRatio	浮点型，以环的宽度比率来表示内环的半径， 例如，如果android:innerRadiusRatio=5，表示内环半径等于环的宽度除以5，这个值是可以被android:innerRadius的值覆盖，默认为9.
android:thicknessRatio	浮点型，以环的宽度比率来表示环的厚度，例如，如果android:thicknessRatio=2， 那么环的厚度就等于环的宽度除以2。这个值是可以被android:thickness覆盖的，默认值是3.
android:useLevel	boolean值，如果当做是LevelListDrawable使用时值为true，否则为false.这个值一般为false,否则你的环可能不会出现

底部的线

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <color android:color="@color/colorAccent"/>
    </item>
    <item android:bottom="5dp">
        <shape>
            <solid android:color="@color/Black"/>
        </shape>
    </item>
</layer-list>

这里的《item》每一个都可以表示一个drawable，top,bottom,left,right表示item在四个方向上的偏移量，可以理解为类似于padding的效果