自定义layer-list在图层布局中的使用

layer-list就是将多个图片或两种效果按照顺序层叠在一起显示，默认情况下所有item中定义的图层都会自动根据它附上View的大小而进行缩放，其中的item是按照顺序从下往上进行叠加的，即先定义的item在最下面，后面添加的item依次往上面叠放。

先上显示效果图：

如上图示你们会如何实现？

第一种效果：使用文本View加分割线View来实现。
第二种效果：使用UI切图来实现。

先不说上面实现方式实现效果如何，遇到问题我们可以多找几种实现方案，选一种相对较好的方式来实现。

下面来说一下使用layer-list是如何实现这样的效果的，当然大家如果有其它好的实现方式欢迎提出。

首先来看下layer-list是如何定义的，在res/drawable包下定义layout_line.xml和layout_foul_line.xml文件。

第一种效果实现方式layout_line.xml：

<?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/green" />
        </shape>
    </item>

    <item android:bottom="@dimen/dip1">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>
</layer-list>

第一种效果实现方式layout_foul_line.xml：

<?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/green" />
        </shape>
    </item>

    <item android:bottom="@dimen/dip8">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>

    <item
        android:bottom="@dimen/dip1"
        android:left="@dimen/dip1"
        android:right="@dimen/dip1">
        <shape android:shape="rectangle">
            <padding
                android:left="@dimen/dip15"
                android:right="@dimen/dip15" />
            <solid android:color="@color/white" />
        </shape>
    </item>
</layer-list>

Shape各个子标签的作用想必大家都比较熟悉就不介绍了，这里简单介绍下Shape本身的属性，它有四个属性分别是rectangle、oval、line、ring，用来定义当前Shape的形状。

Shape的形状默认为矩形，当然也可以根据需要自定义设置为矩形(rectangle)、椭圆形(oval)、线性形状(line)、环形(ring)。

下面的属性只有在android:shape=”ring”时可用：
android:innerRadius // 尺寸，内环的半径
android:innerRadiusRatio // 浮点型，以环的宽度比率来表示内环的半径
android:thickness // 尺寸，环的厚度
android:thicknessRatio // 浮点型，以环的宽度比率来表示环的厚度
android:useLevel // boolean值，如果当做是LevelListDrawable使用时值为true，否则为false

在布局文件中使用：

 <TextView
    android:layout_width="match_parent"
    android:layout_height="@dimen/dip45"
    android:background="@drawable/layout_line"
    android:gravity="center_vertical"
    android:paddingLeft="@dimen/dip15"
    android:paddingRight="@dimen/dip15"
    android:text="世界杯！！！"
    android:textColor="@color/red_fa"
    android:textSize="@dimen/font_small" />

<EditText
    android:layout_width="match_parent"
    android:layout_height="@dimen/dip45"
    android:layout_marginTop="@dimen/dip20"
    android:background="@drawable/layout_foul_line"
    android:text="世界杯！！！"
    android:textColor="@color/red_fa"
    android:textSize="@dimen/font_small" />

使用方式也比较简单，希望能给有需要的道友一点小小的帮助。