用layer-list自定义drawable图形

在日常开发中会碰到有些情况,背景图不算很复杂,但是用单纯的shape无法满足需求,特别是层叠的样式,其实不需要自定义控件,或者让UI切图.用layer-list创建一个drawable图形就可以了

1.layer-list的概念

其实就和新建drawable资源中的shape一样,都是root-element.其原理类似RelativeLayout,也就是一层层的叠加.这也就是图层的概念,每一个图层用item节点表示.

2.单一边线的样式

就像上面这个图形很简单,左右两边各一个Button,如果用单一的drawable中的shape绘制,就是左边背景是白色边线灰色背景左边两个圆角,右边背景是白色边线蓝色背景右边两个圆角,出来的实际效果是下图:

中间明显一条白线明显比较粗,这是因为左右两边作为背景的drawable图都有边线.这时候如果用layer-list,就可以将其中一侧(左边或右边)的背景定义为某一边无边线的样式:

实现起来也很简单,第一层item正常绘制,第二层绘制一个不带边框的同背景色的形状,如果某一边是无边界线,那么除了这个边,其它边都给一个偏移量(item节点里面的bottom等),偏移量取决于第一层的边线宽度

<?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="@color/text_gray" />
            <stroke
                android:width="2dp"
                android:color="@color/white" />
            <corners
                android:bottomLeftRadius="5dp"
                android:topLeftRadius="5dp" />
        </shape >
    </item >

    <item
        android:bottom="2dp"
        android:left="2dp"
        android:top="2dp" >
        <shape android:shape="rectangle" >
            <solid android:color="@color/text_gray" />
            <corners
                android:bottomLeftRadius="5dp"
                android:topLeftRadius="5dp" />
        </shape >
    </item >

</layer-list >

3.套环类样式

最典型的就是同心圆:

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

    <item>
        <shape android:dither="true"
            android:shape="oval">
            <solid android:color="@color/white" />
            <stroke
                android:color="@color/blue"
                android:width="1dp" />
        </shape>
    </item>

    <item
        android:bottom="20dp"
        android:left="20dp"
        android:right="20dp"
        android:top="20dp" >
        <shape
            android:shape="oval" >
            <solid android:color="@color/blue" />
            <size
                android:width="30dp"
                android:height="30dp" />

        </shape >
    </item >

</layer-list >

4.层叠样式

如果想定义一些类似扑克牌叠起来的,用layer-list也是很方便的:

画的比较丑,就是特意把层叠的间距突出了,以截图的整体方框看作背景的话,里面有三层带圆角的矩形,第一层是灰色,左右间距最大,第二层是红色,左右间距递减,距离top间距稍大,第三层是蓝色,左右无间距,上部间距最大.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:left="20dp"
        android:right="20dp" >
        <shape android:shape="rectangle" >
            <solid android:color="@color/text_gray" />
            <corners
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp"
                android:topLeftRadius="5dp"
                android:topRightRadius="5dp" />
        </shape >
    </item >

    <item
        android:left="15dp"
        android:right="15dp"
        android:top="10dp" >
        <shape android:shape="rectangle" >
            <solid android:color="@color/red" />
            <corners
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp"
                android:topLeftRadius="5dp"
                android:topRightRadius="5dp" />
        </shape >
    </item >

    <item android:top="20dp" >
        <shape android:shape="rectangle" >
            <solid android:color="@color/blue" />
            <corners
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp"
                android:topLeftRadius="5dp"
                android:topRightRadius="5dp" />
        </shape >
    </item >
</layer-list >

5.总结

实际应用中,综合前几种形式,可以用在RadioButton的选中和未选中状态,比如模拟出TabLayout的滑动效果,自己根据UI的设计自行调整即可,可满足不太复杂的组合图形的需求