引言
我们在开发中经常会对按钮或者布局等进行一些颜色或者形状方面的设置,这个时候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群:
微信公众号
分享小知识,记录你的小故事呀