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>

效果图：

一般状态：

获取焦点状态：

点击状态：