本文出自 “阿敏其人” 簡書博客，轉(zhuǎn)載或引用請注明出處。
LayerDrawable對應(yīng)的XML的根元素是<layer-list>,，它使一種層次化顯示的Drawable集合。也就說，可以通過顯示由多個Drawable的疊加，旋轉(zhuǎn)，位移等組合顯示出與單一Drawable不同的效果。在本文中我們會附上相關(guān)的效果。
一、語法
根據(jù)官網(wǎng)顯示它的語法如下：
<?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>
二、子節(jié)點
子節(jié)點有這么幾個：drawable、id、（四個方向）top、right、buttom和left。
（關(guān)于這四個方向可以大概理解為padding，單位為px）
android:drawable
對應(yīng)的圖片資源android:id
id資源名 （少用）android:top 可以理解為padding top，單位是px
android:right 可以理解為padding right，單位是px
android:bottom 可以理解為padding buttom，單位是px
android:left 可以理解為padding left，單位是px
三、特點
對于LayerDrawable有這么幾個特點
1、每一個item表示一個Drawable
2、下面的Drawale覆蓋上面的Drawable
3、item里面常見放的是bitmap，當(dāng)然也可以是shape，不管是什么肯定是Drawable。
四、Demo示例
簡單的疊加
<?xml version="1.0" encoding="utf-8"?>
<!--疊加的效果 兩個shape的疊加 -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp"/>
<stroke
android:width="2dp"
android:color="#ff0000" />
</shape>
</item>
<item
android:top="10dp"
android:bottom="12dp"
>
<shape
android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp"/>
<solid android:color="#00ff00"/>
</shape>
</item>
</layer-list>
簡單的疊加.png
旋轉(zhuǎn)
<?xml version="1.0" encoding="utf-8"?>
<!--旋轉(zhuǎn)的效果 這是簡單的三個shape的疊加旋轉(zhuǎn) -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<!-- 最底層的圖片，以x，y軸坐標(biāo)為中心進(jìn)行旋轉(zhuǎn)-->
<rotate android:pivotX="0" android:pivotY="0"
android:fromDegrees="-10" android:toDegrees="-10">
<bitmap android:src="@mipmap/pic1"/>
</rotate>
</item>
<!-- 第二層的圖片，以x，y軸坐標(biāo)為中心進(jìn)行旋轉(zhuǎn)-->
<item>
<rotate android:pivotX="0" android:pivotY="0"
android:fromDegrees="15" android:toDegrees="15">
<bitmap android:src="@mipmap/pic2"/>
</rotate>
</item>
<!-- 最上層的圖片，以x，y軸坐標(biāo)為中心進(jìn)行旋轉(zhuǎn)-->
<item>
<rotate android:pivotX="0" android:pivotY="0"
android:fromDegrees="35" android:toDegrees="55">
<bitmap android:src="@mipmap/pic3"/>
</rotate>
</item>
</layer-list>
疊加旋轉(zhuǎn).png
陰影
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 陰影部分 -->
<!-- 個人覺得更形象的表達(dá)：top代表下邊的陰影高度，left代表右邊的陰影寬度。其實也就是相對應(yīng)的offset，solid中的顏色是陰影的顏色，也可以設(shè)置角度等等 -->
<item
android:left="6dp"
android:top="6dp">
<shape android:shape="rectangle" >
<!--漸變-->
<gradient
android:angle="270"
android:endColor="#0F000000"
android:startColor="#0F000000" />
<!--圓角-->
<corners
android:bottomLeftRadius="6dip"
android:bottomRightRadius="6dip"
android:topLeftRadius="6dip"
android:topRightRadius="6dip" />
</shape>
</item>
<!-- 背景部分 -->
<!-- 形象的表達(dá)：bottom代表背景部分在上邊緣超出陰影的高度，right代表背景部分在左邊超出陰影的寬度（相對應(yīng)的offset） -->
<item
android:bottom="10dp"
android:right="10dp">
<shape android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#FFFFFF"
android:startColor="#FFFFFF" />
<corners
android:bottomLeftRadius="6dip"
android:bottomRightRadius="6dip"
android:topLeftRadius="6dip"
android:topRightRadius="6dip" />
</shape>
</item>
</layer-list>
陰影.png
至此效果展示完成。
在這里提一點，我們一般做評價的星星也需要利用LayerDrawable，這里就不附上源碼了，這個網(wǎng)上游很多參考。
補充
補充1、畫一個只有底邊的矩形（其實說畫不嚴(yán)格，應(yīng)該是疊加組合）
- 只有底邊
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#f00"/>
<padding android:bottom="1dp"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#EFEFEF"/>
</shape>
</item>
</layer-list>
.
.
- 如果想要保留底邊和右邊，只需要多加一行代碼
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#f00"/>
<padding android:bottom="1dp"/>
<padding android:right="1dp"/>
</shape>
.
.
實踐
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="這個shape只有底邊"
android:textSize="24sp"
android:background="@drawable/shape_rectangle_only_bottom_side"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="70dp"
android:text="這個shape只有底邊和右邊"
android:textSize="24sp"
android:layout_marginTop="20dp"
android:background="@drawable/shape_rectangle_bottom_right"
/>
</LinearLayout>
image.png
.
.
原理，以底邊為例
image.png
了解更多的Drawable分類 Drawable圖像資源抽象類
本篇完。
相關(guān)參考：
《android開發(fā)藝術(shù)探索》
用layer-list實現(xiàn)圖片旋轉(zhuǎn)疊加、錯位疊加、陰影、按鈕指示燈
