Android应用资源总结七:layer-list使用详解

layer-list，顾名思义就是可以把图层按顺序叠起来一起显示，里面使用item节点来添加图层，一般情况下，layer-list中的所有图层会自动根据使用它的view的大小进行缩放，layer-list中的item是按照顺序从下到上叠加显示的，即先定义的item在下面，后面的依次往上面叠加显示，例子：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item >
        <shape android:shape="rectangle" >
            <solid android:color="#0000ff"/>
        shape>
    item>

    <item android:bottom="25dp" android:top="25dp" android:left="25dp" android:right="25dp">
        <shape android:shape="rectangle" >
            <solid android:color="#00ff00" />
        shape>
    item>

    <item android:bottom="50dp" android:top="50dp" android:left="50dp" android:right="50dp">
        <shape android:shape="rectangle" >
            <solid android:color="#ff0000" />
        shape>
    item>
layer-list>

布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="150dp"
        android:layout_height="150dp" 
        android:background="@drawable/layer_list"/>
LinearLayout>

效果图：

红色item最后定义在最上方，绿色item中间，最先定义蓝色最下边

这里设置了android:bottom="50dp" android:top="50dp" android:left="50dp" android:right="50dp"属性
android:top="50dp"表示该item上边以ImageView上边界往里面缩了50dp
android:bottom="50dp"表示该item下边以ImageView下边界往里面缩了50dp
android:left="50dp"表示该item左边以ImageView左边界往里面缩了50dp
android:right="50dp"表示该item右边以ImageView右边界往里面缩了50dp

android:bottom="25dp" android:top="25dp" android:left="25dp" android:right="25dp"类似

实现

1.layer-list给指定view实现三面边框

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >


    <item >
        <shape android:shape="rectangle" >
            <solid android:color="#ff0000"/>
        shape>
    item>

    <item android:bottom="2dp" android:top="2dp"  android:right="2dp">
        <shape android:shape="rectangle" >
            <solid android:color="#ffffff" />
        shape>
    item>


layer-list> 

布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >


    <LinearLayout
        android:layout_width="150dp"
        android:layout_height="50dp"
        android:background="@drawable/border"
        android:layout_gravity="center"
        android:orientation="vertical"
        >
    LinearLayout>
LinearLayout>

效果图：

2.Tab选项卡

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    
    
    
    <item android:state_checked="true">
        <layer-list>
            
            <item>
                <color android:color="#E4007F" />
            item>
            
            <item android:bottom="4dp" android:drawable="@android:color/white" />
        layer-list>
    item>
    <item>
        <layer-list>
            
            <item>
                <color android:color="#E4007F" />
            item>
            
            <item android:bottom="1dp" android:drawable="@android:color/white" />
        layer-list>
    item>
selector>

效果图：

从上面的示例代码可以看到，layer-list可以作为根节点，也可以作为selector中item的子节点。

3.带阴影的按钮

使用layer-list可以将多个drawable按照顺序层叠在一起显示，像上图中的Tab，是由一个红色的层加一个白色的层叠在一起显示的结果，阴影的圆角矩形则是由一个灰色的圆角矩形叠加上一个白色的圆角矩形。先看下代码吧，以下是Tab背景的代码：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item
        android:left="2dp"
        android:top="4dp">
        <shape>
            <solid android:color="@android:color/darker_gray" />
            <corners android:radius="10dp" />
        shape>
    item>
    
    <item
        android:bottom="4dp"
        android:right="2dp">
        <shape>
            <solid android:color="#FFFFFF" />
            <corners android:radius="10dp" />
        shape>
    item>
layer-list>

效果图：

总结

另外，关于item的用法，也做下总结：
1 . 根节点不同时，可设置的属性是会不同的，比如selector下，可以设置一些状态属性，而在layer-list下，可以设置偏移量；

2 . 就算父节点同样是selector，放在drawable目录和放在color目录下可用的属性也会不同，比如drawable目录下可用的属性为android:drawable，在color目录下可用的属性为android:color；

3 . item的子节点可以为任何类型的drawable类标签，除了上面例子中的shape、color、layer-list，也可以是selector，还有其他没讲过的bitmap、clip、scale、inset、transition、rotate、animated-rotate、lever-list等等。