【Android -- UI 开发】layer-list 的基本使用

简介

layer-list 图层列表，原理是图层的叠加，后添加的会覆盖之前添加，类似 RelativeLayout（或者FrameLayout）。

基本使用

1. 单边线

效果图：

示例代码：
singleline.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--底层使用蓝色填充色-->
    <item>
        <shape>
            <solid android:color="#02a0ef"/>
        </shape>
    </item>

    <!--上面一层距离底层的顶部1dp,类似marginTop,填充色为白色，这样就形成了一个带有蓝色顶部边线的白色背景的图-->
    <item android:top="1dp">
        <shape>
            <solid android:color="#fff"/>
        </shape>
    </item>
</layer-list>

使用：

<TextView
        android:layout_width="@dimen/DIMEN_120dp"
        android:layout_height="40dp"
        android:background="@drawable/singleline"
        android:gravity="center"
        android:text="单一边线效果"/>

2. 圆环

效果图：

示例代码：
layer_circle.xml

<?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:width="@dimen/DIMEN_2dp"
                android:color="#FFAA00"/>
        </shape>
    </item>

    <item android:bottom="@dimen/DIMEN_10dp"
        android:left="@dimen/DIMEN_10dp"
        android:right="@dimen/DIMEN_10dp"
        android:top="@dimen/DIMEN_10dp">
        <shape android:shape="oval">
            <solid android:color="@color/teal_200"/>
            <size android:width="@dimen/DIMEN_5dp"
                android:height="@dimen/DIMEN_5dp"/>
        </shape>
    </item>
</layer-list>

使用：

<TextView
        android:layout_width="@dimen/DIMEN_40dp"
        android:layout_height="@dimen/DIMEN_40dp"
        android:layout_marginTop="15dp"
        android:background="@drawable/layer_circle"
        android:gravity="center"/>

3. 双边线

效果图：

示例代码：
doubleline.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <!--底层使用蓝色填充色-->
        <item>
            <shape>
                <solid android:color="#02a0ef"/>
            </shape>
        </item>

        <!--上面一层距离底层的顶部1dp,距离底部1dp,类似marginTop,填充色为白色，这样就形成了一个带有蓝色顶部边线和底部边线的白色背景的图-->
        <item android:bottom="1dp"
            android:top="1dp">
            <shape>
                <solid android:color="#ffffff"/>
            </shape>
        </item>
</layer-list>

使用：

<TextView
        android:layout_width="@dimen/DIMEN_120dp"
        android:layout_height="40dp"
        android:layout_marginTop="15dp"
        android:background="@drawable/doubleline"
        android:gravity="center"
        android:text="双边线效果"/>

4. 阴影

效果图：

示例代码：
layer_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--底层的左边距离上层左边3dp, 底层的顶部，距离上层的顶部6dp,如果不做这个控制，底层和上层的左侧和上侧会重合在一起-->
    <item android:left="3dp"
        android:top="6dp">
        <shape>
            <solid android:color="#b4b5b6"/>
        </shape>
    </item>

    <!--上层的右边距离底层的右边3dp, 上层的底部距离底层的底部6dp-->
    <item android:bottom="6dp"
        android:right="3dp">
        <shape>
            <solid android:color="#fff"/>
        </shape>
    </item>
</layer-list>

使用：

<TextView
        android:layout_width="@dimen/DIMEN_120dp"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/layer_shadow"
        android:gravity="center"
        android:text="阴影效果"/>