使用layerDrawable绘制icon

最新推荐文章于 2025-09-12 17:34:15 发布

转载最新推荐文章于 2025-09-12 17:34:15 发布 · 68 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a31ee4951882554bd511137

文章标签：

#移动开发

本文分享了一次使用XML绘制图标的实践经验，介绍了如何通过layer-list组合不同形状来构建图标，并讨论了在这一过程中遇到的问题及解决方案。

需求里面有个icon这这样的

想尝试下用xml 直接绘制思路是一个layer-list 里面3个item

白色圆形背景
灰色线段1
灰色线段2

尝试了一下发现使用line 在设置padding 的时候起到的效果难以理解，始终无法使用一个layer-list就搞定

不管在item 上控制 height ,width 还是在shape中控制padding ，都不能准确获得合适长度的line

没有办法最后使用ImageView 设置 background 和src 显示两个drawable 完成，真的是太糟糕了(如果切图只需要一个文件，但是这里需要二份！)。

不过这二个文件

shape - 白色圆形
layer-list - 灰色叉在其他地方也可以用到，就先这样吧~

在使用过程中发现一个问题

在layer-list的item中我给其中一个item 设置了padding 居然会影响另外一个item 简直无语查看官方文档也没有对使用xml 绘制line做出一个比较友好的指导，太坑了

https://developer.android.google.cn/guide/topics/resources/drawable-resource.html#LayerList

白色圆形

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff"/>
    <corners android:radius="99dp"/>
</shape>
复制代码

灰色叉

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate android:fromDegrees="45">
            <shape android:shape="line">
                <stroke
                    android:width="2dp"
                    android:color="#8e8e91"/>
            </shape>
        </rotate>
    </item>
    <item>
        <rotate android:fromDegrees="-45">
            <shape android:shape="line">
                <stroke
                    android:width="2dp"
                    android:color="#8e8e91"/>
            </shape>
        </rotate>
    </item>
</layer-list>
复制代码

显示的图片

 <ImageView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@drawable/bg_white_circle"
        android:padding="10dp"
        android:src="@drawable/bg_close_ebank"/>
复制代码

显示效果

转载于:https://juejin.im/post/5a31ee4951882554bd511137