关于shape和selector和layer-list的drawable详细说明

Posted 2020-07-03 Rex Wei

　　在android开发中，但凡涉及控件的的特效问题，<shape>，<selector>以及<layer-list>都是不可或缺的drawable。但是发现有同事并不了解或系统的记得一些常用的特性，经常是不知道就搜，用完又忘了……今天特意总结一下这几个。

　　<shape> —— 用于设置控件的自身属性的效果形状，这些效果不会因为状态的改变而改变，比如圆形，圆角，边框效果等等。

　　<selector> —— 顾名思义就是选择器，所以使用Selector设置的是跟状态有关的效果，比如点击时，获取焦点时，选中时等所展现的控件效果。

　　<layer-list> —— 用于控件效果的层叠。每一个item都可以实现独立的效果，比如shape或者selector，甚至item中也可以再包含一个layer-list。

　　有了总体概念，我们一一来分析各个drawable的使用格式：

　　一，<shape>属性

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/holo_purple" />
    <corners android:radius="20dp" />
    <gradient
        android:centerColor="@android:color/holo_purple"
        android:endColor="@android:color/holo_blue_dark"
        android:startColor="@android:color/holo_blue_light" />
</shape>

 

<shape>属性的设置比较中规中矩，没有什么特别好说的，只要你跟着属性设置规则走就行了。

<shape>常用属性如下：

<shape> android:shape=["rectangle" | "oval" | "line" | "ring"] 其中rectagle矩形，oval椭圆，line水平直线，ring环形
<shape>中子节点的常用属性：
　　<gradient> 设置渐变
　　　　　　android:startColor  起始颜色
　　　　　　android:endColor  结束颜色
　　　　　　android:angle  渐变角度，0从左到右，90表示从下到上，数值为45的整数倍，默认为0；
　　　　　　android:type 渐变的样式 liner线性渐变 radial环形渐变 sweep
　　<solid > 设置填充
　　　　　　android:color  填充的颜色
　　<stroke >描边
　　　　　　android:width 描边的宽度
　　　　　　android:color 描边的颜色
　　　　　　android:dashWidth 表示‘-‘横线的宽度
　　　　　　android:dashGap 表示‘-‘横线之间的距离
　　<corners >圆角
　　　　　　android:radius  圆角的半径 值越大角越圆
　　　　　　android:topRightRadius 右上圆角半径
　　　　　　android:bottomLeftRadius 右下圆角角半径
　　　　　　android:topLeftRadius 左上圆角半径
　　　　　　android:bottomRightRadius 左下圆角半径

　　<padding >填充
　　　　　　android:bottom="1.0dip"  底部填充
　　　　　　android:left="1.0dip"  左边填充
　　　　　　android:right="1.0dip" 右边填充
　　　　　　android:top="0.0dip"  上面填充

 

二，<selector>属性

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <transition android:opacity="transparent" android:paddingBottom="30dp" android:paddingLeft="10dp">
            <item android:drawable="@android:drawable/ic_delete" />
        </transition>
    </item>
    <item android:state_selected="false">
        <animated-rotate android:drawable="@android:drawable/dark_header" android:pivotX="30%" android:pivotY="70%" android:visible="true" />
    </item>
</selector>

如上所示，selector每一个item都会有状态的设置，如果没有设置就是默认状态。而每一个item里面包含的则是对应该item状态的效果。比如上面的transition就是在点击的时候背景显示ic_delete的图片，而不点击的时候，则是一个翻转的动画，很有意思。

由于item设置比较灵活，大家直接在编辑器的xml里面边设置边学习就可以了。主要就是关注一下shape标签的各种state属性设置，那些都是设置效果生效的状态的值。

 

三，<layer-list>属性

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="@android:color/holo_red_light" />
        </shape>
    </item>

    <item
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/background_light" />
        </shape>
    </item>

    <item>
        <selector>
            <item android:state_pressed="true">
                <transition
                    android:opacity="transparent"
                    android:paddingBottom="30dp"
                    android:paddingLeft="10dp">
                    <item android:drawable="@android:drawable/ic_delete" />
                </transition>
            </item>

            <item android:state_selected="false">
                <animated-rotate
                    android:drawable="@android:drawable/dark_header"
                    android:pivotX="30%"
                    android:pivotY="70%"
                    android:visible="true" />
            </item>
        </selector>
    </item>


</layer-list>

layer-list就更加灵活了，每一个item都是独立存在的，都可以独当一面，然后item可以包含任何的上面所说的效果设置！当然也包括layer-list自己本身。而item自身的属性中有各种left，gravity，width等属性跟我们平时在布局文件中使用的是一个意思，只是这次的对象是那些drawable图层罢了。最后要注意的是由于是层叠效果，所以后面的总是覆盖前面的。就比如上面的例子，如果把selector的属性挪到前面，那么动画就会被挡住。

 

结束语：纸上得来终觉浅，绝知此事要躬行～