Android图形层叠 – Layer-list

1 概述

1.1 编写目的

学习Android图形层叠layer-list相关的知识，记录下来，方便后续学习及查询。

2 Layer-list图形

Android上layer-list有layer-list和item两种属性，其中layer-list为一级属性，item为子属性。基本结构如下图：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item />
</layer-list>

2.1 Layer-list属性

Layer-list共包含以下属性：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:paddingTop="100px"
    android:paddingLeft="100px"
    android:paddingBottom="100px"
    android:paddingRight="100px"
    android:autoMirrored="true"
    android:opacity="opaque"
    android:paddingMode="stack"
    android:paddingStart="100px "
    android:paddingEnd="100px">
</layer-list>

PaddingTop：层叠图形距离上个图形上边的距离。
PaddingLeft：层叠图形距离上个图形左边的距离。
PaddingBottom：层叠图形距离上个图形下边的距离。
PaddingRight：层叠图形距离上个图形右边的距离。
AautoMirrored：设置图片是否需要镜像反转，当布局方向是RTL，即从右到左布局时才有用。
Opacity：透明性，["translucent " | " opaque "| " transparent "]，分别为半透明、不透明、透明。
PaddingMode：暂未试出效果，["stack" | " nest "]。
PaddingStart：层叠图形距离上个图形开始位置的距离。
PaddingEnd：层叠图形距离上个图形结束位置的距离。

2.1.1 PaddingTop、PaddingBottom、PaddingLeft、PaddingRight效果

如下分别创建三个图形layer_rotate.xml、layer_rotate_greeen.xml、layer_rotate_blue.xml,三个图形除颜色外完全一致， layer_rotate.xml如下：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="100px"
    android:height="100px"
    android:viewportWidth="100"
    android:viewportHeight="100">
    <path
        android:strokeWidth="0.5"
        android:strokeColor="@color/yellow"
        android:pathData="M0,0 h100 v100 h-100 z
                          M50,0 v100 M0,50 h100"/>
    <path
        android:fillColor="@color/yellow"
        android:pathData="M50,50 Q70,50 70,70
                          M50,50 Q50,70 70,70"/>
</vector>

创建my_layerlist.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list
            android:paddingTop="20px"
            android:paddingBottom="20px"
            android:paddingLeft="20px"
            android:paddingRight="20px">
            <item android:drawable="@drawable/layer_rotate_greeen"/>
        </layer-list>
    </item>
    <item>
        <layer-list
            android:paddingTop="20px"
            android:paddingBottom="20px"
            android:paddingLeft="20px"
            android:paddingRight="20px">
            <item android:drawable="@drawable/layer_rotate_blue"/>
        </layer-list>
    </item>
    <item android:drawable="@drawable/layer_rotate"/>
</layer-list>

效果如下：

2.1.2 PaddingStart、PaddingEnd效果

和paddingLeft、paddingRight等同时使用时，PaddingStart、PaddingEnd有效。效果如下：

 
 

2.2 Item属性

Item共包含以下属性：

<item
    android:id="@+id/my_layerlist_item"
    android:drawable="@drawable/my_layerlist_red"
    android:gravity="center"
    android:start="100px"
    android:end="100px"
    android:height="500px"
    android:width="500px"
    android:left="100px"
    android:right="100px"
    android:top="100px"
    android:bottom="100px">
	<animated-rotate />
<animated-selector />
<animation-list />
<bitmap />
<clip />
<color />
<inset />
<layer-list />
<level-list />
<nine-patch />
<ripple />
<rotate />
<scale />
<selector />
<shape />
<transition />
</item>

Id：item名字。
Drawble：指向图片资源。
Start：开始位置偏移距离。
End：结束位置偏移距离。
Height：图形高度。
Width：图形宽度。
Left：距离左边距离。
Right：距离右边距离。
Top：距离上边距离。
Bottom：距离下边距离。
其中animated-rotate、animated-selector、animation-list、bitmap、clip、color、inset、layer-list、level-list、nine-patch、ripple、rotate、scale、selector、shape、transition为下级属性：
Bitmap: 详情Bitmap图形。
Shape: 详情自定义图形。
Selector: 详情图形选择。

下面是各种一级属性的效果图。

2.2.1 Start属性

2.2.2 End属性

2.2.3 Start&End属性

2.2.4 Height&Width属性

2.2.5 Left属性

2.2.6 Right属性

2.2.7 Left&Right属性

2.2.8 Top属性

2.2.9 Bottom属性

2.2.10 Top&Buttom属性

2.3 一些layer-list效果

2.3.1 边框线效果

只画底部边框，修改item中top、right、left、bottom大小小于等于shape>stroke>width的-2倍可以使相应的边框显示不出来，修改my_layerlist.xml只显示底边如下：

 

实际效果：

 

显示上下两边，修改my_layerlist.xml如下：

 

实际效果：

 

2.3.2 缩放重叠效果

 创建my_layerlist_red.xml、my_layerlist_yellow.xml、my_layerlist_blue.xml,除了颜色其它都一样，my_layerlist_red.xml如下所示：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="@color/red"
        android:pathData="M12,12c2.21,0 4,-1.79 4,-4s-1.79,-4 -4,-4 -4,1.79 -4,4 1.79,4 4,4zM12,14c-2.67,0 -8,1.34 -8,4v2h16v-2c0,-2.66 -5.33,-4 -8,-4z"/>
</vector>

使用现成图片效果

2.3.3 不缩放重叠效果

设置gravity="center"，如下图所示：

 使用现成图片效果：

设置gravity="left|top"，如下图所示：

 

使用bitmap,其中gravity="center"，如下所示：

 

2.3.4 旋转重叠效果

使用layer_rotate.xml图片，如图所示图片大小100，左上角在50,50处，如下所示（黄色参考线，后面删除掉）：

使用rotate旋转，旋转中心设置为50,50。效果图如下：

 

每45度设置一个效果如下：