【Android -- Res资源】layer-list

一、概念

定义

顾名思义 layer-list ，图层别表。 layer-list 是用来创建 LayerDrawable 的，而 LayerDrawable 又是 DrawableResource 的一种，所以简单来说，layer-list 所创建出来的图层列表就是一种 drawable 图形。

原理

layer-list 其实是试图叠加，有点像我们平时写 layout 布局时候的 RelativeLayout，后添加的视图会覆盖住先添加的。在 layer-list 中可以通过控制视图 上下左右 四个方向的距离属性，从而得到不同效果的样式。

文件位置

res/drawable/xxx.xml 文件名用作资源 ID。

资源引用

在 Java 中：R.drawable.xxx
在 XML 中：@[package:]drawable/xxx

语法

<?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>

<item ../> 的属性介绍

属性名	属性说明
android:drawable	可绘制对象资源。必备。引用可绘制对象资源
android:id	资源 ID。此可绘制对象的唯一资源 ID
android:top	整型。顶部偏移（像素）
android:right	整型。右边偏移（像素）
android:bottom	整型。底部偏移（像素）
android:left	整型。左边偏移（像素）

二、简单事例

2.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.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"/>

2.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="双边线效果"/>

2.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="阴影效果"/>

三、图片层叠

bitmap

默认情况下，所有可绘制项都会缩放以适应包含视图的大小。因此，将图像放在图层列表中的不同位置可能会增大视图的大小，并且有些图像会响应的缩放。为了避免缩放列表中的项目，在 item 元素内使用 bitmap 指定可绘制对象。

<item>
<bitmap
   android:gravity="center"
   android:src="@drawable/image" />
</item>

3.1 叠放不缩放

A. 不缩放的时候，必须在 item 节点中使用 bitmap 节点，并给 bitmap 设置 gravity=center ;

B. 虽然在实现缩放效果的时候，可以直接使用 item 中的 drawable属性，但实现不缩放的效果时，如果还用drawable 属性，即便给item 设置了gravity =center ，在真机上的效果依旧是缩放的。（但模拟器是不缩放的）

• layers.xml

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

• 引用

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

3.2 叠放缩放

• overlay.xml 方法1

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--默认缩放-->
    <item>
        <bitmap
            android:src="@drawable/ic_launcher"/>
    </item> 
 
    <item android:left="35dp"
          android:top="35dp">
        <bitmap
            android:src="@drawable/ic_launcher"/>
    </item>
 
    <item android:left="70dp"
          android:top="70dp">
        <bitmap
            android:src="@drawable/ic_launcher"/>
    </item>
</layer-list>

• overlay.xml 方法2

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--这种方式拿到的是带有缩放的效果，即便给item 设置了gravity 并且从模拟器上看到的效果是不缩放的，但是真机上依旧是缩放的效果-->
    <item android:drawable="@drawable/ic_launcher">
    </item>
    <item android:drawable="@drawable/ic_launcher"
          android:left="45dp"
          android:top="45dp">
    </item>
    <item android:drawable="@drawable/ic_launcher"
          android:left="90dp"
          android:top="90dp">
    </item>
</layer-list>

• 使用

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/overlay"
/>

3.3 叠加旋转

• layer-list.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate android:fromDegrees="-10" android:pivotX="0"
                android:pivotY="0">
            <bitmap android:src="@drawable/decibel_blue_background"/>
        </rotate>
    </item>
    <item>
        <rotate android:fromDegrees="10" android:pivotX="0"
                android:pivotY="0">
            <bitmap android:src="@drawable/decibel_orange_background"/>
        </rotate>
    </item>
    <item>
        <rotate android:fromDegrees="30" android:pivotX="0"
                android:pivotY="0">
            <bitmap android:src="@drawable/decibel_red_background"/>
        </rotate>
    </item>
 
 
</layer-list>

旋转的时候，只需要给出 起始的角度（ fromdegress ）即可。

• 使用

<!--图片叠加并带旋转效果-->
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/rotate"/>