Layer-list介绍与使用

layer-list 其实就是将多个图片或两种效果按照顺序层叠起来

一. 用于叠加多个图片

实现方式如下：

第一步，在 drawable 文件夹中新建 xml 文件: img_layers.xml 代码如下：

<?xml version="1.0" encoding="utf-8"?>  
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
    <item>  
      <bitmap android:src="@drawable/android_red"  
        android:gravity="center" />  
    </item>  
    <item android:top="10dp" android:left="10dp">  
      <bitmap android:src="@drawable/android_green"  
        android:gravity="center" />  
    </item>  
    <item android:top="20dp" android:left="20dp">  
      <bitmap android:src="@drawable/android_blue"  
        android:gravity="center" />  
    </item>  
</layer-list> 

第二步，在 layout 中调用，代码如下：

<ImageView  
    android:layout_height="wrap_content"  
    android:layout_width="wrap_content"  
    android:src="@drawable/img_layers" />  

第三步，效果图如下：

二. 用于叠加两个样式

实现方式如下：

第一步：上方圆角，下方直角的边框样式
在 drawable 文件夹下新建 xml 文件： top_circular_shape.xml ，代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <shape>
            <solid android:color="#FFFFFF" />
            <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"
                android:bottomRightRadius="0.1dp" android:bottomLeftRadius="0.1dp"/>
            <stroke android:width="1dp" android:color="#ffa8abad" />
        </shape>
    </item>
    <item android:top="1dp" android:left="1dp" android:right="1dp" >
        <shape>
            <solid android:color="#FFFFFF" />
            <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"
                android:bottomRightRadius="0.1dp" android:bottomLeftRadius="0.1dp" />
            <stroke android:width="1dp" android:color="#ffffffff" />
        </shape>
    </item>
</layer-list>

第二步：中间矩形的的边框样式
在 drawable 文件夹下新建 xml 文件：rectangle_shape.xml ，代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape>
            <solid android:color="#FFFFFF" />
            <stroke
                android:width="1dp"
                android:color="#ffa8abad" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="1dp">
        <shape>
            <solid android:color="#FFFFFF" />
            <stroke
                android:width="1dp"
                android:color="#ffffffff" />
        </shape>
    </item>
</layer-list>

第三步：下方圆角，上方直角的边框样式
在 drawable 文件夹下新建 xml 文件： bottom_circular_shape.xml ，代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#FFFFFF" />
            <corners android:topLeftRadius="0.1dp" android:topRightRadius="0.1dp"
                android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" />
            <stroke android:width="1dp" android:color="#ffa8abad" />
        </shape>
    </item>
    <item android:top="1dp" android:bottom="1dp" android:left="1dp" android:right="1dp">
        <shape>
            <solid android:color="#FFFFFF" />
            <corners android:topLeftRadius="0.1dp" android:topRightRadius="0.1dp"
                android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" />
            <stroke android:width="1dp" android:color="#ffffffff" />
        </shape>
    </item>
</layer-list>

第四步，实现效果如下：

博客借鉴

1. Android开发：shape和selector和layer-list的（详细说明）
2. 通过layer-list多图层叠加效果实现圆角功能