layer-list 的用法

使用layer-list可以将多个图层按照顺序层叠在一起 作为一个整体显示
第一个图层放在最下边 第二个图层叠加在第一个图层上面 第三个图层以此类推

属性

layer-list的item可以通过下面四个属性设置偏移量：

• android:top 顶部的偏移量
• android:bottom 底部的偏移量
• android:left 左边的偏移量
• android:right 右边的偏移量
  这四个偏移量和控件的margin设置差不多，都是外间距的效果。

1. 实现缺少一边边框的图形

如果想实现两个拼在一起的有边框的图形 要求图形之间只有一条边线 应该如何实现呢?

效果图.png

我们知道如果画两个有边框的图形拼在一起 中间会有两条边线 而非一条 这个时候 就需要对其中一个图形的边线进行遮盖 我们选择遮盖住左边图形的右边线

1. 画一个边框为1px的长方形

2. 画一个纯白色的长方形 距离左边 右边 上边 各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. 给图形画上阴影效果

带阴影的圆角矩形 是怎么实现的呢？

阴影.png

这个效果可以由一个灰色的圆角矩形叠加上一个白色的圆角矩形做成

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>