用 layer-list 实现指定边际的边框

最新推荐文章于 2022-11-26 22:38:50 发布

原创最新推荐文章于 2022-11-26 22:38:50 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

Android附加技能同时被 2 个专栏收录

30 篇文章

订阅专栏

Android基础

29 篇文章

订阅专栏

本文介绍如何利用Android的Layer-List来实现一个具有特定样式需求的UI组件，该组件包括左右及底部边框，并在底部两角采用圆角设计。通过XML布局文件中的Layer-List及Shape元素，巧妙地设置了背景颜色、边框宽度、颜色及圆角半径。

最近在开发的时候，遇到一个有关 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 还可以实现阴影等效果。

参考文章：https://www.jianshu.com/p/3999f21510f7