使用layer-list可以将多个图层按照顺序层叠在一起 作为一个整体显示
第一个图层放在最下边 第二个图层叠加在第一个图层上面 第三个图层以此类推
属性
layer-list的item可以通过下面四个属性设置偏移量:
- android:top 顶部的偏移量
- android:bottom 底部的偏移量
- android:left 左边的偏移量
- android:right 右边的偏移量
这四个偏移量和控件的margin设置差不多,都是外间距的效果。
1. 实现缺少一边边框的图形
如果想实现两个拼在一起的有边框的图形 要求图形之间只有一条边线 应该如何实现呢?
我们知道如果画两个有边框的图形拼在一起 中间会有两条边线 而非一条 这个时候 就需要对其中一个图形的边线进行遮盖 我们选择遮盖住左边图形的右边线
- 画一个边框为1px的长方形
-
画一个纯白色的长方形 距离左边 右边 上边 各1px 这样可以把左右上边的边框保留下来 而右边的边框用白色遮盖住
左边缺少边框的图形就画好了 再和右边有完整边框的图形拼在一起 就形成了最终效果
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. 给图形画上阴影效果
带阴影的圆角矩形 是怎么实现的呢?
这个效果可以由一个灰色的圆角矩形叠加上一个白色的圆角矩形做成
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>