LayerDrawable：叠加图层

今天要介绍的Drawable只中的层叠Drawable：LayerDrawable，通过将一些图片层叠的方式组合起来，实现特殊的显示效果。比如EditText输入框的下划线背景：

1、LayerDrawable

LayerDrawable是管理其他可绘制对象阵列的可绘制对象。列表中的每个可绘制对象均按照列表顺序绘制，列表中的最后一个可绘制对象绘于顶部。

1.1、用法

①代码中使用

R.drawable.filename

②xml布局中引用

@[package:]drawable/filename

1.2、方法

LayerDrawable有很多API方法，就不一一介绍了，详见 Reference > LayerDrawable">Android Developers > Reference > LayerDrawable

2、语法

在res/drawable/目录下定义LayerDrawable资源的语法。根标签使用<layer-list>。

2.1、语法

LayerDrawable语法如下：

<?xml version="1.0" encoding="utf-8"?>
    <layer-list
        xmlns:android="http://schemas.android.com/apk/res/android" >
        
        <item
            android:drawable="@[package:]drawable/drawable_resource"
            android:id="@[+][package:]id/resource_name"
            android:top="dimension"
            android:right="dimension"
            android:bottom="dimension"
            android:left="dimension" />
            
    </layer-list>

2.2、<layer-list>标签

<layer-list>必须是根标签，包含一个或多个 <item> 元素。

2.3、<item>标签

每个可绘制对象由单一 <layer-list> 元素内的 <item> 元素表示。

①android:drawable：可绘制资源。

②android:top：顶部偏移。

③android:bottom：底部偏移。

④android:right：右侧偏移。

⑤android:left：左侧偏移。

⑥android:height：图层的高度。默认为图层的intrinsic(固有)高度。。

⑦android:width：图层的宽度。

⑧android:start：开始插入以应用于图层。根据布局方向向左或向右覆盖。。

⑨android:end：末端插图将应用于该图层。根据布局方向向左或向右覆盖。。

⑩android:id：层的标识符。这可用于从可绘制容器中检索图层。。

⑪android:paddingMode：指示图层填充应如何影响后续图层的边界。默认的填充模式值为nest。必须是nest或者stack。

⑫android:gravity：用于在容器中对齐图层的方向。

3、示例

举几个例子，真正发挥的还是需要想象力！

3.1、层叠背景

定义一个LayerDrawable类型的Drawable资源，层叠了几张其它类型的Drawable。如果各个item的图片资源大小不一样，可以指定height和width全部统一，效果更好，当然最好将长度定义在dimens.xml中方便复用和修改。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="100dp"
        android:height="100dp"
        android:drawable="@drawable/android1"
        android:gravity="center" />
    <item
        android:width="100dp"
        android:height="100dp"
        android:drawable="@drawable/android2"
        android:gravity="center"
        android:start="50dp"
        android:top="50dp" />
    <item
        android:width="100dp"
        android:height="100dp"
        android:drawable="@drawable/android3"
        android:gravity="center"
        android:start="100dp"
        android:top="100dp" />
    <item
        android:width="100dp"
        android:height="100dp"
        android:drawable="@drawable/android4"
        android:gravity="center"
        android:start="150dp"
        android:top="150dp" />
</layer-list>

效果如下：

3.2、EditText背景框

有了前面简单的示例，是不是可以发挥想象力。

<?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="#0ac39e" />
        </shape>
    </item>
    
    <item android:bottom="6dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </item>
    
    <item
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffffff" />
        </shape>
    </item>
    
</layer-list>