美化UI,谈谈XML中的Shape

shape drawbable用于在xml文件中绘制一个几何图形,多样的搭配能带来不同的效果使UI进行美化。
在res/drawable下创建xml文件,文件的filename就是这个资源的访问ID。
在代码中可以通过R.drawable.filename进行引用,在xml文件中通过@drawable/filename进行引用。

shape的形状
一共有四种形状可供选择,rectangle矩形、oval椭圆形、line线性、ring环形。
如果不设置,则默认为rectangle矩形。
Shape的属性

<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"    <!--渐变角度(必须为45°的倍数)-->
        android:centerX="integer"    <!--渐变中心x坐标的相对位置-->
        android:centerY="integer"    <!--渐变中心Y坐标的相对位置-->
        android:centerColor="color"    <!--渐变中间颜色-->
        android:endColor="color"    <!--渐变结束颜色-->
        android:gradientRadius="integer"
        android:startColor="color"    <!--渐变开始颜色-->
        android:type=["linear" | "radial" | "sweep"]    <!--渐变类型:linear线性渐变;radial放射性渐变;sweep扫描线式渐变-->
        android:useLevel=["true" | "false"] />    <!--如果要使用LevelListDrawable对象,就要设置为true。设置为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>

渐变角度0°时,渐变从左到右。
Angle对应的起点如图:这里写图片描述
Shape属性Rectangle形状的实际应用
绘制出好看效果光有Shape还远远不够,还需要layer-list来帮忙。
layer-list是层叠样式,它的子元素是,每一个代表一个绘制图案。Layer-list根据顺序依次绘制。

下面来看看效果代码
1.绘制黑色虚线
效果图:
虚线

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

    <stroke 
        android:width="1dp"
        android:dashWidth="5dp"
        android:dashGap="2dp"
        android:color="#000000"/>
</shape>

PS:只有关闭了硬件加速后才能显示出虚线,但是这个BUG并不影响虚线框的显示。
关闭硬件加速
View.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

2.绘制微信聊天框
效果图:微信聊天框

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

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#0ac39e" />
        </shape>
    </item>
    <item android:bottom="6dp">
        <shape android:shape="rectangle" >
            <solid android:color="#ffffff" />
        </shape>
    </item>
    <item
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp">
        <shape android:shape="rectangle" >
            <solid android:color="#ffffff" />
        </shape>
    </item>

</layer-list>

3.绘制虚线框
虚线框

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

    <stroke
        android:dashGap="2dp"
        android:dashWidth="6dp"
        android:width="0.5dp"
        android:color="#ff4560" />
    <!-- dashWidth 折线宽度  dashGap 间距宽度 -->

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

</shape>

4.绘制阴影背景
效果图阴影背景

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

    <!-- 背影部分 -->
    <item
        android:left="2dp"
        android:top="2dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="270"
                android:endColor="#2f000000"
                android:startColor="#0f000000" />

            <corners android:radius="6dp" />
        </shape>
    </item>
    <!-- 背景部分 -->
    <item
        android:bottom="3dp"
        android:right="3dp">
        <shape android:shape="rectangle" >
            <solid android:color="#ffffff" />

            <corners android:radius="6dp" />
        </shape>
    </item>

</layer-list>

通过android:right和android:bottom属性让上下两层错层,绘制出阴影效果。
android:left/right/top/bottom分别表示leftMargin、rightMargin、topMargin、bottomMargin

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值