Android UI美化之 shape的使用及其属性总结

最新推荐文章于 2023-04-04 23:15:19 发布

weixin_34184561

最新推荐文章于 2023-04-04 23:15:19 发布

阅读量76

点赞数

文章标签：移动开发 ui

原文链接：https://juejin.im/post/5a9e0721f265da23866f65ef

版权

近期在整理项目的过程中突然发现项目中有好多未曾使用过的图片，经过对比UI设计图片并检查代码后发现在UI上的这些地方都是通过drawable 下面的资源文件设置的背景，于是便想起来整理一下关于此类UI美化的东西，若存在写的不好的地方还希望大家多多指导。

本系列预计共3部分，本文具体内容为 shape 的使用，由于另外两篇文章暂时未整理，此处便先列出文章标题，后期会对此添加链接：

Android UI 美化之 shape 的使用
Android UI 美化之 selector 的使用
Android UI 美化之 layer-list 的使用

言归正传，相信大家在项目中都用过很多用 shape 定义的效果，大多是一些较为规则的图形，如圆形、矩形、实线虚线以及渐变色等样式，而这种地方如果要让美工再去做张图片的话未免有点小题大做的感觉，而且有时候还要考虑各种适配问题，所以这个时候使用我们的 shape 的话便再好不过了，下面便介绍一下关于 shape 的使用过程中出现的一些属性。

android:shape 此属性有以下4种类型可供选择

rectangle：矩形( 默认)，可以画出直角矩形、圆角矩形、弧形等
oval：椭圆形，用得比较多的是画正圆
line：线形，可以画实线或虚线
ring：环形，可以画环形边框或环形进度条

（注：只有当 android:shape 的值设置为 ring 时以下4种属性才会生效）

android:innerRadius：内环半径

android:innerRadiusRatio：内环半径相对于环的宽度的比例，比如环的宽度为50,比例为2.5,那么内环半径为20

android:thickness：环的厚度

android:thicknessRatio：环的厚度相对于环的宽度的比例

android:useLevel 如果当做是LevelListDrawable使用时值为true，否则为false.

上面这些便是 shape 标签的一些属性了,接下来的话便是我们的重点部分了,那就是使用 shape 做一些形状的绘制,下面便简单介绍下使用shape 绘制形状时的一些标签及其属性

corners 定义圆角,其属性如下

android:radius：全部的圆角半径
android:topLeftRadius：左上角的圆角半径
android:topRightRadius：右上角的圆角半径
android:bottomLeftRadius：左下角的圆角半径
android:bottomRightRadius：右下角的圆角半径

在定义圆角的时候大家应该可以看出可以通过两种形式来进行设置,即:

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

    <corners android:radius="15dp"/>
    <solid android:color="#F00"/>

</shape>
复制代码

与

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

    <corners android:bottomLeftRadius="15dp"
        android:bottomRightRadius="15dp"
        android:topLeftRadius="15dp"
        android:topRightRadius="15dp"/>
    <solid android:color="#F00"/>

</shape>
复制代码

上面两种的效果相同

gradient 定义渐变,其属性如下

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

代码如下

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

    <corners android:radius="15dp"/>

    <gradient
        android:type="sweep"
        android:angle="90"
        android:centerX="0.2"
        android:centerY="0.2"
        android:centerColor="@color/colorAccent"
        android:startColor="@color/colorPrimary"
        android:endColor="@color/colorPrimaryDark"/>

    <stroke android:width="1dp"
        android:color="@android:color/white"/>

</shape>
复制代码

solid 定义填充色

android:color：形状内部的填充色

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

    <solid android:color="#F00"/>

</shape>
复制代码

stroke 定义描边

android:width：描边的宽度
android:color：描边的颜色
android:dashWidth：虚线的宽度，值为0时是实线
android:dashGap：虚线的间隔

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <!--实线-->
    <stroke android:width="2dp"
        android:color="@android:color/holo_purple" />

</shape>
复制代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <!--虚线-->
    <stroke android:width="2dp"
        android:color="@android:color/holo_purple"
        android:dashWidth="10dp"
        android:dashGap="5dp" />

</shape>
复制代码

padding 定义形状内边距

android:left：左边内边距
android:top：上方内边距
android:right：右方内边距
android:bottom：下部内边距

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

    <padding
        android:left="2dp"
        android:top="1dp"
        android:right="2dp"
        android:bottom="1dp" />

</shape>
复制代码

size 定义形状的大小

android:width：宽度
android:height：高度

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

    <solid
        android:color="#F00" />

    <size android:width="15dp"
        android:height="15dp" />

</shape>
复制代码

最后附上本文代码,敬请大神指导Android 的UI 美化方式

更多内容请移驾我的博客