您的当前位置:首页正文

使用layerDrawable绘制icon

来源:要发发知识网

需求里面有个icon这这样的


xx.png

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

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

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

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

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

不过这二个文件

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

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

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

白色圆形

<?xml version="1.0" encoding="utf-8"?>
<shape 
    <solid android:color="#ffffff"/>
    <corners android:radius="99dp"/>
</shape>

灰色叉

<layer-list 
    <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"/>

显示效果

xx.png