使用layer-list可以將多個(gè)圖層按照順序?qū)盈B在一起 作為一個(gè)整體顯示
第一個(gè)圖層放在最下邊 第二個(gè)圖層疊加在第一個(gè)圖層上面 第三個(gè)圖層以此類推
屬性
layer-list的item可以通過下面四個(gè)屬性設(shè)置偏移量：
- android:top 頂部的偏移量
- android:bottom 底部的偏移量
- android:left 左邊的偏移量
- android:right 右邊的偏移量
這四個(gè)偏移量和控件的margin設(shè)置差不多达址，都是外間距的效果皆疹。
1. 實(shí)現(xiàn)缺少一邊邊框的圖形
如果想實(shí)現(xiàn)兩個(gè)拼在一起的有邊框的圖形 要求圖形之間只有一條邊線 應(yīng)該如何實(shí)現(xiàn)呢?
效果圖.png
我們知道如果畫兩個(gè)有邊框的圖形拼在一起 中間會(huì)有兩條邊線 而非一條 這個(gè)時(shí)候 就需要對其中一個(gè)圖形的邊線進(jìn)行遮蓋 我們選擇遮蓋住左邊圖形的右邊線
- 畫一個(gè)邊框?yàn)?px的長方形
-
畫一個(gè)純白色的長方形 距離左邊 右邊 上邊 各1px 這樣可以把左右上邊的邊框保留下來 而右邊的邊框用白色遮蓋住
左邊三邊框圖.png
左邊缺少邊框的圖形就畫好了 再和右邊有完整邊框的圖形拼在一起 就形成了最終效果
XML
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 第一層 -->
<item>
<shape>
<solid android:color="#FFFFFF" />
<stroke
android:width="1px"
android:color="#ffdbdbdb" />
</shape>
</item>
<!-- 第二層 -->
<item
android:left="1px"
android:bottom="1px"
android:top="1px">
<shape>
<solid android:color="#FFFFFF" />
</shape>
</item>
</layer-list>
2. 給圖形畫上陰影效果
帶陰影的圓角矩形 是怎么實(shí)現(xiàn)的呢？
陰影.png
這個(gè)效果可以由一個(gè)灰色的圓角矩形疊加上一個(gè)白色的圓角矩形做成
XML
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 灰色陰影 -->
<item
android:left="2dp"
android:top="4dp">
<shape>
<solid android:color="@android:color/darker_gray" />
<corners android:radius="10dp" />
</shape>
</item>
<!-- 白色前景 -->
<item
android:bottom="4dp"
android:right="2dp">
<shape>
<solid android:color="#FFFFFF" />
<corners android:radius="10dp" />
</shape>
</item>
</layer-list>
