【Android】【layer-list】【stroke】 边框 按需只展示某几条边

一般需求,我们给按钮或者自定义 View 加边框线,我们经常是四边一起加:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
       <solid android:color="#89c997" />
       <stroke android:width="1dp" android:color="#c3c3c3" />
</shape>

但是又有很多时候,产品提的需求,要求只显示下边框或者某几条边,也就是我们并不需要四边都会有边框,那我们就需要用到 layer-list 标签。

方式一:

通过设置偏移值大于 stroke width 的方式(对于 spinner 控件不生效)

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="-6dp"
        android:right="-6dp"
        android:top="-6dp">
        <shape>
            <solid android:color="#ffffff" />
            <stroke
                android:width="5dp"
                android:color="#ff0000" />
        </shape>
    </item>
</layer-list>

通过下方的预览图,可以发现,只有 下方 一条红色的边
在这里插入图片描述

方式二:

通过 layer-list 将两个 item 叠加,设置偏移值

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#ff298CDA" />
            <corners
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp" />
        </shape>
    </item>

    <item
        android:bottom="3dp"
        android:left="3dp"
        android:right="3dp">
        <shape>
            <solid android:color="#ff0000" />
            <corners
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp" />
        </shape>

    </item>
</layer-list>

通过下方的预览图,可以发现,只有 左、下、右 三条蓝色的边

在这里插入图片描述

## 关于 layer-list 图层列表

LayerDrawable 是管理其他可绘制对象阵列的可绘制对象。列表中的每个可绘制对象按照列表的顺序绘制,列表中的最后一个可绘制对象绘于顶部。每个可绘制对象由单一 <layer-list> 元素内的 <item> 元素表示。

layer-list 对应的 Java 类为 LayerDrawable。

layer-list 可以作为根节点,也可以作为 selector 中 item 的子节点。layer-list 可以添加多个 item 子节点,每个 item 子节点对应一个 drawable 资源,按照 item 从上到下的顺序叠加在一起,再通过设置每个 item 的偏移量就可以看到阴影等效果了。layer-list 的 item 可以通过下面四个属性设置偏移量:

  • android:top 顶部的偏移量
  • android:bottom 底部的偏移量
  • android:left 左边的偏移量
  • android:right 右边的偏移量

这四个偏移量和控件的 margin 设置差不多,都是外间距的效果(都是相对于外层 container 或者父节点的偏移量)。如果不设置偏移量,前面的图层就完全挡住了后面的图层,从而也看不到后面的图层效果了。那么如果偏移量设为负值会怎么样呢?经过验证,偏移超出的部分会被截掉而看不到。

默认情况下,所有可绘制项都会缩放以适应包含视图的大小。因此,将图像放在图层列表中的不同位置可能会增大视图的大小,并且有些图像会相应地缩放。为避免缩放列表中的项目,请在 <item> 元素内使用 <bitmap> 元素指定可绘制对象,并且对某些不缩放的项目(例如 “center”)定义重力。

例如,以下 <item> 定义缩放以适应其容器视图的项目:

<item android:drawable="@drawable/image" />

为避免缩放,以下示例使用重力居中的 <bitmap> 元素:

<item>
  <bitmap android:src="@drawable/image"
          android:gravity="center" />
</item>

layer-list 实例一:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
      <bitmap android:src="@drawable/android_red"
        android:gravity="center" />
    </item>
    <item android:top="10dp" android:left="10dp">
      <bitmap android:src="@drawable/android_green"
        android:gravity="center" />
    </item>
    <item android:top="20dp" android:left="20dp">
      <bitmap android:src="@drawable/android_blue"
        android:gravity="center" />
    </item>
</layer-list>

请注意,此示例使用嵌套的 <bitmap> 元素为每个具有“中心”重力的项目定义可绘制对象资源。这可确保没有图像会为了适应容器的大小而缩放,因为偏移图像会造成大小调整。如下图所示:
image.png

layer-list 实例二:自定义 X 符号

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <rotate
            android:fromDegrees="45"
            android:toDegrees="45">
            <shape android:shape="line">
                <stroke
                    android:width="1dp"
                    android:color="#BBBBBB" />
            </shape>
        </rotate>
    </item>

    <item>
        <rotate
            android:fromDegrees="135"
            android:toDegrees="135">
            <shape android:shape="line">
                <stroke
                    android:width="1dp"
                    android:color="#BBBBBB" />
            </shape>
        </rotate>
    </item>
</layer-list>

在这里插入图片描述
通过利用 layer-list 的叠加属性及 rotate 属性绘制一个 X 符号。

其中:
android:fromDegrees="45" 是起始的角度,以 x 轴右半轴方向为 0 度,向下旋转45度
android:toDegrees="45" 是结束的角度

------至所有正在努力奋斗的程序猿们!加油!!
有码走遍天下 无码寸步难行
1024 - 梦想,永不止步!
爱编程 不爱Bug
爱加班 不爱黑眼圈
固执 但不偏执
疯狂 但不疯癫
生活里的菜鸟
工作中的大神
身怀宝藏,一心憧憬星辰大海
追求极致,目标始于高山之巅
一群怀揣好奇,梦想改变世界的孩子
一群追日逐浪,正在改变世界的极客
你们用最美的语言,诠释着科技的力量
你们用极速的创新,引领着时代的变迁

——乐于分享,共同进步,欢迎补充
——Treat Warnings As Errors
——Any comments greatly appreciated
——Talking is cheap, show me the code
——诚心欢迎各位交流讨论!QQ:1138517609
——CSDN:https://blog.csdn.net/u011489043
——简书:https://www.jianshu.com/u/4968682d58d1
——GitHub:https://github.com/selfconzrr

发布了79 篇原创文章 · 获赞 207 · 访问量 30万+

猜你喜欢

转载自blog.csdn.net/u011489043/article/details/101673854