Android中Shape的基础使用

在实际开发中，我们经常需要自定义控件的外观，这个时候，shape就能派上用场了。
首先我们先创建在res/drawable目录下创建shape文件

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
          <!--填充颜色-->
          <solid android:color="#20b1b6"/>
          <stroke android:color="#000000"
                  android:width="1dp"/>
</shape>

在这里面我们看到了几个shape的常用的：solid,stroke。
solid:只有一个属性 color,表示填充的颜色
stroke:有4个属性
1.color：设置边框颜色
2.width：设置边框宽度
3.dashWidth：虚线每一个段的长度
4.dashGap：虚线的间隔。
其中，dashWidth和dashGap配合使用可以实现虚线边框
接下来我们看看效果,将布局的background设置成我们刚才写的shape

 <LinearLayout
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:background="@drawable/v_border">
</LinearLayout>

效果是这样的

Screenshot_2019-02-23-21-04-07.png

如果要实现虚线效果，则把dashWidth和dashGap的大小设置好即可
在这个基础上，如果要实现圆角怎么办
那么就要用到corners属性了

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

    <!--填充颜色-->
    <solid android:color="#20b1b6"/>

    <!--边框大小和颜色-->
    <stroke android:color="#000000"
        android:width="1dp"/>

     <!--圆角-->
     <corners android:bottomRightRadius="10dp"
              android:topRightRadius="10dp"
              android:topLeftRadius="10dp"
              android:bottomLeftRadius="10dp"/>

      <!--单独设置-->
      <!--<corners android:radius="10dp"/>-->
</shape>

corners可以设置4个方向的圆角，值是圆角半径，当4个圆角的大小一样的时候，可以单独设置一个radius属性即可。
设置完后我们看下效果

Screenshot_2019-02-23-21-16-29.png

如果填充颜色不想要纯色，那么就可以用到gradient，gradient可以实现渐变色

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

    <!--边框大小和颜色-->
    <stroke android:color="#000000"
        android:width="1dp"/>
    <!--圆角-->
    <corners android:radius="10dp"/>

    <!--渐变-->
    <gradient
        android:type="linear"
        android:startColor="#8b2828"
        android:centerColor="#55bcc7"
        android:endColor="#7d25a6"
        android:angle="45"
        android:centerX="0.4"
        android:centerY="0.5"/>

</shape>

其中
type是渐变类型，分别是linear：线性渐变，sweep扫描渐变，radial放射渐变，后面会有图的比较
startColor设置渐变开始的颜色
centerColor设置渐变中间的颜色（这个值可以不设置）
endColor设置渐变结束的颜色
centerX，centerY设置渐变中心的位置，范围是0到1。即如果都设置成0.5，渐变中心就刚好在中间
angle只在type=linear的时候有效，控制渐变倾斜，数值只能设置为45的倍数，比如45，90.
下面是type=sweep时的代码

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

    <!--边框大小和颜色-->
    <stroke android:color="#000000"
        android:width="1dp"/>
    <!--圆角-->
    <corners android:radius="10dp"/>

    <!--渐变-->
    <gradient
        android:type="sweep"
        android:startColor="#8b2828"
        android:centerColor="#55bcc7"
        android:endColor="#7d25a6"
        android:centerX="0.5"
        android:centerY="0.5"/>

</shape>

然后是type=radial的代码，需要注意的是，当type=radial的时候，需要设置gradientRadius，gradientRadius是声明放射渐变半径
代码如下

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

    <!--边框大小和颜色-->
    <stroke android:color="#000000"
        android:width="1dp"/>
    <!--圆角-->
    <corners android:radius="10dp"/>

    <!--渐变-->
    <gradient
        android:type="radial"
        android:startColor="#8b2828"
        android:centerColor="#55bcc7"
        android:endColor="#7d25a6"
        android:gradientRadius="80"
        android:centerX="0.5"
        android:centerY="0.5"/>

</shape>

下面是三种渐变的对比

Screenshot_2019-02-23-22-00-19.png

以上就是shape的基础使用。