Android开发：shape和selector和layer-list的使用

        在开发中，经常要做一些边框颜色，形状的设计，自定义按钮点击样式的变化，或是将前两者结合，实现效果的叠加等操作，最常用到的就是shape，selector和layer_list这三个样式。
        之前想做一个上面两个是圆角，下面两个是直角的形状的按钮。然后百度了好多博客发现都只有代码并没有详细说

明它们的实现原理和代码的解释。一个一个测试了好久，总算是弄明白了怎么回事，所以打算参照查阅的资料写一篇详细一点的博客，阐述一下自己对它们的理解，希望可以帮到大家，让更多的人来享受自定义样式的乐趣。

         先简单介绍一下三个样式：

         shape：自定义样式的形状

<shape android:shape="line">

line:水平线     oval：椭圆     ring：环形      rectagle：矩形      不设置表示在引用样式的基础上

shape子节点中常用的属性：

<gradient> 根据起始位置和结束位置的样式 发生渐变

Android:startColor ：起始颜色         

Android:endColor ：结束颜色       

Android:angle  ：渐变角度，0从左到右，90表示从下到上，数值为45的整数倍，默认为0； 

Android:type  ：linear是线性渐变，从左到右或从上到下；sweep径向渐变，是圆心到圆边；radial是角度渐变，按照角度来变换颜色。

<solid >  填充

Android:color  ：填充的颜色（将区域内全部填满该颜色）

<stroke >描边（即外围包裹的边框，形状随原设定的形状）

Android:width ：描边的宽度

Android:color ：描边的颜色

Android:dashWidth :表示'-'横线的宽度（用虚线包裹时设置单个虚线的宽度）

Android:dashGap :表示'-'横线之间的距离（用虚线包裹时设置单个虚线间的距离）

<corners >圆角

Android:radius  : 设置 圆角的半径 ，值越大角越圆（如果是在长方形的按钮上用该样式，四个角都会发生变化）

Android:topRightRadius  :  右上圆角半径

Android:bottomLeftRadius :右下圆角角半径（注意是右下，不是左下）

Android:topLeftRadius :左上圆角半径

Android:bottomRightRadius ：左下圆角半径

<padding > 边距（和xml布局文件中一样）

android:bottom="1.0dip" ：底部

android:left="1.0dip" ：左边

android:right="1.0dip" ：右边

android:top="0.0dip" ：上面

        selector：设置按钮在默认状态下，获取焦点和点击时的变化

android:state_selected 选中

android:state_focused 获得焦点

android:state_pressed 点击

android:state_enabled 设置是否响应事件（所有事件）

android:state_window_focused 默认时的背景图片
       

<span style="font-size:12px;"><?xml version="1.0" encoding="utf-8" ?>       <selector xmlns:Android="http://schemas.android.com/apk/res/android">     <!-- 默认时的背景图片-->      <item Android:drawable="@drawable/pic1" />        <!-- 没有焦点时的背景图片 -->      <item      Android:state_window_focused="false"           android:drawable="@drawable/pic_blue"      />       <!-- 非触摸模式下获得焦点并单击时的背景图片 -->      <item      Android:state_focused="true"      android:state_pressed="true"        android:drawable= "@drawable/pic_red"      />     <!-- 触摸模式下单击时的背景图片-->      <item      Android:state_focused="false"      Android:state_pressed="true"        Android:drawable="@drawable/pic_pink"      />      <!--选中时的图片背景-->      <item      Android:state_selected="true"      android:drawable="@drawable/pic_orange"      />       <!--获得焦点时的图片背景-->      <item      Android:state_focused="true"      Android:drawable="@drawable/pic_green"      />       </selector></span>  

        layer_list：样式的叠加，后一种样式会叠加前一种，和帧布局类似。

        每个样式之间用item隔开，当只设置上边框和下边框上时，可以通过设置后面样式的padding的top和bottom。覆盖之后前一个样式填充的颜色即为边框的颜色。

         

<?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>

实现效果：

实例：

<?xml version="1.0" encoding="utf-8"?><selector    xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true" >        <shape>            <!-- 渐变 -->            <gradient                android:startColor="#ff8c00"                android:endColor="#FFFFFF"                android:type="radial"                android:gradientRadius="50" />            <!-- 描边 -->            <stroke                android:width="2dp"                android:color="#dcdcdc"                android:dashWidth="5dp"                 android:dashGap="3dp" />            <!-- 圆角 -->            <corners                android:radius="2dp" />            <padding                android:left="10dp"                android:top="10dp"                android:right="10dp"                android:bottom="10dp" />        </shape>    </item>    <item android:state_focused="true" >        <shape>            <gradient                android:startColor="#ffc2b7"                android:endColor="#ffc2b7"                android:angle="270" />            <stroke                android:width="2dp"                android:color="#dcdcdc" />            <corners                android:radius="2dp" />            <padding                android:left="10dp"                android:top="10dp"                android:right="10dp"                android:bottom="10dp" />        </shape>    </item>    <item>               <shape>            <solid android:color="#ff9d77"/>            <stroke                android:width="2dp"                android:color="#fad3cf" />            <corners                 android:topRightRadius="5dp"                android:bottomLeftRadius="5dp"                android:topLeftRadius="0dp"                android:bottomRightRadius="0dp"            />            <padding                android:left="10dp"                android:top="10dp"                android:right="10dp"                android:bottom="10dp" />        </shape>    </item></selector>

效果图：

一般状态：

获取焦点状态：

点击状态：