Android开发之Shape和Selector、Layer-list的详解

转载请备注出自于：http://blog.csdn.net/qq_22118507/article/details/51505844

三者的使用的方法：

Java代码中：R.drawable.文件的名称 

XML中：Android:background="@drawable/文件的名称"

1.Shape

[html] view plain copy

 

<?xml version="1.0" encoding="utf-8"?>

 <!--
    android:shape=["rectangle" | "oval" | "line" | "ring"]
    shape的形状，默认为矩形，可以设置为矩形（rectangle）、椭圆形(oval)、线性形状(line)、环形(ring) 下面的属性只    android:shape="ring" 时可用：
    android:innerRadius         尺寸，内环的半径。
    android:innerRadiusRatio    浮点型，以环的宽度比率来表示内环的半径,例如，如果android:innerRadiusRatio，表示                        
        内环半径等于环的宽度除以5，这个值是可以被覆盖的，默认为9.
    android:thickness           尺寸，环的厚度
    android:thicknessRatio      浮点型，以环的宽度比率来表示环的厚度，例如，如果               android:thicknessRatio="2"，那么环的厚度就等于环的宽度除以2。这个值是可以被android:thickness覆盖的，默认值是
                                3.
    android:useLevel            boolean值，如果当做是LevelListDrawable使用时值为true，否则为false.
  -->
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!--
        圆角
        android:radius              整型 半径
        android:topLeftRadius       整型 左上角半径
        android:topRightRadius      整型 右上角半径
        android:bottomLeftRadius    整型右下角半径
        android:bottomRightRadius   整型左下角半径

这里有个地方需要注意，bottomleftradius是右下角，而不是左下角，这个不要记错了。还有网上看到有人说设置成0dp无效，不过我在测试中发现是可以的，我用的是2.2，可能修复了这个问题吧，如果无效的话那就只能设成1dp了。
     -->
     <corners
        android:radius="8dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="15dp"
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="25dp"
        />

     <!--
        渐变色
        android:startColor  颜色值                             起始颜色
        android:endColor    颜色值                             结束颜色
        android:centerColor 整型                               渐变中间颜色，即开始颜色与结束颜色之间的颜色
        android:angle       整型                              
渐变角度

        使用android:angle的注意事项：
 当angle=0时，渐变色是从左向右。 然后逆时针方向转，当angle=90时为从下往上。angle必须为45的整数倍

      另外渐变默认的模式为android:type="linear"，即线性渐变，可以指定渐变为径向渐变，android:type="radial"，径向渐变需要指定半径android:gradientradius="50"。

　　 android:angle网 上有各种说法，这里，我说说自己的实验结果，渐变的时候，最原始的，即android:angle＝“0”时，是从左到右，按照开始颜色到结束颜色来渲染
的，android:angle＝“90”是从上到下来渲染的，android:angle＝“180”是从右到左来渲染的，android:angle＝“360”和android:angle＝“0”是一样的，所以这里应该是这样的，渲染时按照最原始的渲染色板（把控件内部看作一块可以绕中心旋转的板子）围绕控件中心来旋转相应的度数，即android:angle里面的值就是所需要旋转的角度，只是这个旋转角度必须是45的整数倍)
        android:type        ["linear" | "radial" | "sweep"] 渐变类型(取值：linear、radial、sweep)
                            linear 线性渐变，这是默认设置
                            radial 放射性渐变，以开始色为中心。
                            sweep 扫描线式的渐变。

       android:useLevel     ["true" | "false"]                如果要使用LevelListDrawable对象，就要设置为       
    true。设置为true无渐变。false有渐变色

       android:gradientRadius 整型                            渐变色半径.当 android:type="radial" 时才使用。 
          单独使用 android:type="radial"会报错。
       android:centerX      整型                              渐变中心X点座标的相对位置
       android:centerY      整型                              渐变中心Y点座标的相对位置
    -->
    <gradient
        android:startColor="#FFFF0000"
        android:endColor="#80FF00FF"
        android:angle="45"
        />

    <!--
        内边距，即内容与边的距离
        android:left    整型 左内边距
        android:top     整型 上内边距
        android:right   整型 右内边距
        android:bottom  整型 下内边距
      -->
     <padding
         android:left="10dp"
         android:top="10dp"
         android:right="10dp"
         android:bottom="10dp"
         />

    <!--
        size 大小
        android:width   整型 宽度
        android:height  整型 高度
    -->
    <size
        android:width="600dp"
        />

    <!--
        内部填充
        android:color   颜色值 填充颜色
    -->
    <solid
        android:color="#ffff9d77"
        />

     <!--
        描边
        android:width       整型  描边的宽度
        android:color       颜色值     描边的颜色
        android:dashWidth   整型  表示描边的样式是虚线的宽度， 值为0时，表示为实线。值大于0则为虚线。
        android:dashGap     整型  表示描边为虚线时，虚线之间的间隔 即“ - - - - ”
     -->
     <stroke
        android:width="2dp"
        android:color="#dcdcdc"
        />
</shape>

2.Selector

根据不同的选定状态来定义不同的现实效果，分为四大属性：

android:state_selected 是选中

android:state_focused 是获得焦点

android:state_pressed 是点击

android:state_enabled 是设置是否响应事件,指所有事件

另：

android:state_window_focused 默认时的背景图片

[html] view plain copy

 

<?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:drawable="@drawable/pic_green" 
    />
<!-- 非触摸模式下获得焦点并单击时的背景图片 -->
<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>

3.layer-list

3.1多图层叠加效果(1)

                          

四个角都是圆角的效果。如果让UI设计人员直接出图，可能会更简单一些。但是我们使用android中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="#FFFFFF" />  
            <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"  
                android:bottomRightRadius="0.1dp" android:bottomLeftRadius="0.1dp" />  
            <stroke android:width="1dp" android:color="#ffa8abad" />  
        </shape>  
    </item>  
     <item android:top="1dp" android:left="1dp" android:right="1dp">  
        <shape>  
            <solid android:color="#FFFFFF" />  
            <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"  
                android:bottomRightRadius="0.1dp" android:bottomLeftRadius="0.1dp" />  
            <stroke android:width="1dp" android:color="#ffffffff" />  
        </shape>  
    </item> 
</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="#FFFFFF" />  
            <stroke  
                android:width="1dp"  
                android:color="#ffa8abad" />  
        </shape>  
    </item> 
     <item  
        android:left="1dp"  
        android:right="1dp"  
        android:top="1dp">  
        <shape>  
            <solid android:color="#FFFFFF" />  
            <stroke  
                android:width="1dp"  
                android:color="#ffffffff" />  
        </shape>  
    </item> 
</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="#FFFFFF" />  
            <corners android:topLeftRadius="0.1dp" android:topRightRadius="0.1dp"  
                android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" />  
            <stroke android:width="1dp" android:color="#ffa8abad" />  
        </shape>  
    </item>  
   <item android:top="1dp" android:bottom="1dp" android:left="1dp" android:right="1dp">  
        <shape>  
            <solid android:color="#FFFFFF" />  
            <corners android:topLeftRadius="0.1dp" android:topRightRadius="0.1dp"  
                android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" />  
            <stroke android:width="1dp" android:color="#ffffffff" />  
        </shape>  
    </item>
</layer-list>

3.3多图层叠加效果(2)

<?xml version="1.0" encoding="UTF-8"?>    

 <layer-list
   xmlns:android="http://schemas.android.com/apk/res/android">
    <!--图片1-->
     <item android:id="@+id/user_faceback_drawable"
           android:drawable="@drawable/faceback" />
    <!--图片2-->
     <item android:id="@+id/user_face_drawable"
           android:drawable="@drawable/h001"
           android:left="10.0dip"
           android:top="18.0dip"
           android:right="25.0dip"
           android:bottom="35.0dip" />
 </layer-list>
<!--2个图片的叠加-->

    效果图如下：