最近在开发的时候,遇到一个有关 UI 的需求,大概就是要实现一个背景图,存在左、右、下方向上的边框,并且下边两个角要为圆角。
示例的效果图如下:
其中黑色的为边框。
然后就是具体的实现逻辑,使用的就是 shape
,借助 layer-list
:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="-10dp">
<shape>
<solid android:color="#f1cccc" />
<stroke
android:width="10dp"
android:color="#000000" />
<corners
android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp" />
</shape>
</item>
</layer-list>
使用 layer-list 可以将多个图层按照顺序层叠在一起 作为一个整体显示,第一个图层放在最下边,第二个图层叠加在第一个图层上面,第三个图层以此类推。
layer-list
的 item 可以通过下面四个属性设置偏移量:
android:top 顶部的偏移量
android:bottom 底部的偏移量
android:left 左边的偏移量
android:right 右边的偏移量
这四个偏移量和控件的 margin
设置的效果差不多,都是外间距的效果。
就像上面的示例代码,因为边框的 width
为 10dp
,所以设置 android:top="-10dp"
,即往顶部偏移 10dp
,这样顶部的边框线就偏移出了视图范围,那么在视觉上就相当于没有。
另外,使用 layer-list
还可以实现阴影等效果。