Shape详解

引言

我们在开发中经常会对按钮或者布局等进行一些颜色或者形状方面的设置，这个时候Android为我们提供了使用xml就可以设置的方式----shape。并且使用shape文件可以减少图片资源的应用，减小安装包的大小。

小例子

使用shape画一个圆角的button

第一步，在drawable文件夹下创建文件shape_test.xml

shape_test.xml

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

第二步，在布局中通过background引用

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

<Button
        android:layout_width="200dp"
        android:layout_centerInParent="true"
        android:layout_height="200dp"
        android:background="@drawable/shape_test"
        android:text="按钮" />
</RelativeLayout>

查看效果

可以发现，button的圆角和颜色都发生了改变。

正题

看了小例子，应该对shape有了基本的认识，那么开始看一下常用的方法吧。shape中子标签有corners、gradient、padding、size、solid、stroke。

shape本身的属性

android:shape="" 类型，有四个值：矩形（rectangle）、椭圆形(oval)、线性形状(line)、环形(ring)

corners 圆角

corners的属性：

        android:bottomLeftRadius=""       底部左边的角
        android:bottomRightRadius=""   	  底部右边的角
        android:topLeftRadius=""		  顶部左边的角
        android:topRightRadius=""		  顶部右边的角
        android:radius=""				  四个角统一设置

例子

在shape_test.xml中修改corners属性，代码如下

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

效果

如果我想四个角设置同样的值呢？难道要把四个角都写上？不不不，没那么麻烦，直接用android:radius=""即可
代码

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

效果

可以看到50dp要比10dp能让角更圆一些，那这个值代表的什么呢？其实这个值代表的是圆的半径，为了更清楚的描述，我把button的宽高设置为200dp，半径设置为100dp，看下效果：
shape_test.xml

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

activity_main.xml(布局文件)

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

    <Button
        android:layout_width="200dp"
        android:layout_centerInParent="true"
        android:layout_height="200dp"
        android:background="@drawable/shape_test"
        android:text="按钮" />

</RelativeLayout>

效果

可以看到这就是一个正圆了。

solid 内部填充颜色

solid只有一个属性：android:color

gradient 颜色渐变

gradient 属性

	    android:endColor=""			渐变结束点的颜色
        android:startColor=""		渐变开始点的颜色
        android:angle=""			渐变的角度，必须是45的倍数，0是从左到右，90是从上到下，仅对类型为linear有效
        android:centerColor=""		渐变中间点的颜色
        android:centerX=""			渐变中心x的相对位置，取值范围是0到1
        android:centerY=""			渐变中心y的相对位置，取值范围是0到1
        android:gradientRadius=""	渐变的半径，只有当渐变类型为radial时才有用
        android:type=""				渐变类型，有linear（线性渐变）、radial（放射渐变）、sweep（扫描试渐变）3中类型
        android:useLevel=""			很少使用，当使用LevelListDrawable时，要设置为true，设置为false时才有渐变效果

例子

线性渐变

shape_test.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="linear"
        android:startColor="@color/colorAccent"
        android:angle="0"
        android:endColor="@color/colorPrimary" />
</shape>

效果

放射性渐变

shape_test.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="radial"
        android:startColor="@color/colorPrimaryDark"
        android:endColor="@color/colorAccent"
        android:gradientRadius="100dp"
        />
</shape>

效果

扫描时渐变

shape_test.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="sweep"
        android:startColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"
        android:centerY="0.5"
        android:centerX="0.5"
        />
        <!-- 其中  
        android:centerY="0.5"
        android:centerX="0.5"
        用于设置中心点的位置，默认就为0。5
        -->
</shape>

效果

stroke 边框

stroke 的属性

 	    android:color=""   		边框颜色
        android:width=""  	    边框宽度
        android:dashGap=""      虚线的间隔
        android:dashWidth=""    虚线的宽度，当值为0时，为实线

例子

shape_test.xml

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

    <stroke
        android:dashWidth="15dp"
        android:dashGap="1dp"
        android:width="2dp"
        android:color="@color/colorAccent" />
</shape>

效果

参考链接：
https://www.cnblogs.com/MianActivity/p/5867776.html
https://www.jianshu.com/p/70dc784a88d9
https://blog.csdn.net/ln_zoofa/article/details/61199244

点击这里获取找到我，获取更多哦

QQ群：

微信公众号

分享小知识，记录你的小故事呀