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度設定一個效果如下：