Android--shape、selector、layer-list

 Android开发：shape和selector和layer-list

<shape>和<selector>在Android UI设计中经常用到。比如我们要自定义一个圆角Button，点击Button有些效果的变化，就要用到<shape>和<selector>。
可以这样说，<shape>和<selector>在美化控件中的作用是至关重要。
在看这篇文章之前，可以看下这个小例子：镂空按钮的实现
[b] Shape[/b]

一、概述

作用：XML中定义的几何形状
位置：res/drawable/文件的名称.xml

我们在android开发中经常要用到图片，而一些简单的图片我们完全可以用shape形状drawable资源代替，使用shape有一个好处就是可以减小我们apk的大小，因为同样的效果，shape比图片更节省空间.

二，shape初识

shape是android drawable资源中的一个重要的角色，drawable资源覆盖面广，它不仅代表图片，它可以是一个颜色，一个形状，因为shape其简单实用，下面我们来看一下shape形状的分类：

rectangle：rectangle代表者矩形，它是shape默认的形状类型，即如果我们不在shape的android:shape属性指定其类型时，默认是矩形,用它我们可以画一个矩形，圆角矩形，具体在下面会说道oval：ovel，椭圆，用它可以画椭圆，圆line：水平线，在使用该形状的时候，我们得给它指定stroke元素指定其宽度，不然在使用该形状的时候会报空指针异常ring：环形属性stroke:[b]该标签元素用于设置描边，它有4个属性[/b]width:设置描边的宽度
color：设置描边的颜色
dashWidth：设置破折线的宽度
dashGap：设置破折线之间的空隙的宽度该标签的一些注意事项： 
dashWidth和dashGap必须同时使用才能生效，如果没有设置其中的任意一个或者其中任意一个属性的值为0，那么描边都将是实线而达不到描边是虚线的效果，该标签在shape为line时必须设置，否则使用的时候报空指针异常corners :
[b]该标签元素用于设置圆角，它有5个属性：[/b]radius
topLeftRadius
topRightRadius
bottomLeftRadius
bottomRightRadius分别是设置全部的圆角，左上角圆角，右上角圆角，左下角圆角，右下角圆角的大小，如果我们要的是上图中的椭圆，那么我们只要设置radius的值即可，如果我们要的是单边圆角，那么我们可以设置radius为15dp，然后分别设置topRightRadius=‘0dp’和bottomRightRadius='0dp'即可，其他根据自己的需要进行控制gradient:
[b]该标签元素用于设置渐变填充色，它有9个属性：[/b]  startColor:渐变开始颜色，如果渐变类型为径向渐变，那么启始颜色在中间
· centerColor：渐变中间颜色
· endColor：渐变结束颜色
· useLevel：boolean值 [“true” | “false”] 如果要使用LevelListDrawable对象，就要设置为true。设置为true无渐变。false有渐变色
· angle： 整型 渐变角度 
(PS：当angle=0时，渐变色是从左向右。 然后逆时针方向转，当angle=90时为从下往上。angle必须为45的整数倍)
· 
type： [“linear” | “radial” | “sweep”] 渐变类型(取值：linear、radial、sweep) 
1. linear 线性渐变，这是默认设置 
2. radial 径向渐变 
3. sweep 角度渐变
centerX：整型 渐变中心X点坐标的相对位置
centerY： 整型 渐变中心Y点坐标的相对位置
gradientRadius：整型 渐变色半径.当 android:type=”radial” 时才使用。单独使用 android:type=”radial”无任何效果。上面的有一些属性不是很常用，在使用该标签的时候，有个要注意的问题，就是上面说的当在使用gradientRadius属性的时候要注意的问题

ovel形状和矩形形状同理，但是我这里要说明一下corners标签对椭圆形状无效，原因用大脚趾都想得到，嘿嘿

ring:ring，圆环，用于绘制圆环，大家看了上面的第四行的形状了感觉和ovel有点像，又不是很像，对于上面的13和16可以用相同的形状画出来，大家有没注意到shape形状的根标签标签有好多属性，但上面我们矩形和椭圆只用到了shape属性，这是因为 
下面的属性只有在android:shape=”ring时可用： android:innerRadius 尺寸，内环的半径。
 android:innerRadiusRatio 浮点型，以环的宽度比率来表示内环的半径，例如，如果android:innerRadiusRatio，表示内环半径等于环的宽度除以5，这个值是可以被覆盖的，默认为9，上图中的20就用到了innerRadiusRatio属性
android:尺寸，环的厚度
android:thicknessRatio 浮点型，以环的宽度比率来表示环的厚度，例如，如果android:thicknessRatio=”2”， 那么环的厚度就等于环的宽度除以2。这个值是可以被android:thickness覆盖的，默认值是3.

我们要想绘制一个圆环，那么我们这样确定了内圆的半径和外圆的半径和中心点就可以了，或者我们知道内圆的半径和圆环的厚度及中心点也同样可以绘制圆环，因为内圆半径加厚度就可以得到外园半径了嘛，但是android官网是通过让我吗设置内圆半径innerRadius和厚度thickness和圆环的高度尺寸的方式让我们绘制圆，当我们画圆环的时候，我们要主要设置标签的height大于0，否则将什么都看不到，当height的尺寸大于圆环外圆半径的尺寸的时候，注意是外圆半径哦，这样才能显示一个完整的圆环。

android shape的使用

shape用于设定形状，可以在selector，layout等里面使用，有6个子标签，各属性如下：
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 圆角 -->
    <corners
        android:radius="9dp"
        android:topLeftRadius="2dp"
        android:topRightRadius="2dp"
        android:bottomLeftRadius="2dp"
        android:bottomRightRadius="2dp"/><!-- 设置圆角半径 -->
    <!-- 渐变 -->
    <gradient
      android:startColor="@android:color/white"
        android:centerColor="@android:color/black"
        android:endColor="@android:color/black"
        android:useLevel="true"
        android:angle="45"
        android:type="radial"
        android:centerX="0"
        android:centerY="0"
        android:gradientRadius="90"/>
    <!-- 间隔 -->
    <padding
        android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp"/><!-- 各方向的间隔 -->
    <!-- 大小 -->
    <size
        android:width="50dp"
        android:height="50dp"/><!-- 宽度和高度 -->
    <!-- 填充 -->
    <solid
 android:color="@android:color/white"/><!-- 填充的颜色 -->
    <!-- 描边 -->
    <stroke
        android:width="2dp"
        android:color="@android:color/black"
        android:dashWidth="1dp"
        android:dashGap="2dp"/>
    </shape>
填充：设置填充的颜色
间隔：设置四个方向上的间隔
大小：设置大小
圆角：同时设置五个属性，则Radius属性无效
android:Radius="20dp"                           设置四个角的半径
android:topLeftRadius="20dp"              设置左上角的半径 
android:topRightRadius="20dp"           设置右上角的半径 
android:bottomLeftRadius="20dp"      设置右下角的半径 
android:bottomRightRadius="20dp"    设置左下角的半径
描边：dashWidth和dashGap属性，只要其中一个设置为0dp，则边框为实现边框
android:width="20dp"                               设置边边的宽度 
android:color="@android:color/black"  设置边边的颜色 
android:dashWidth="2dp"                         设置虚线的宽度 
android:dashGap="20dp"                          设置虚线的间隔宽度
渐变：当设置填充颜色后，无渐变效果。angle的值必须是45的倍数（包括0），仅在type="linear"有效，不然会报错。android:useLevel 这个属性不知道有什么用。
angle对应值的起点如图：
                            
[b]Selector[/b]简介根据不同的选定状态来定义不同的现实效果
分为四大属性：
android:state_selected 是选中
android:state_focused 是获得焦点
android:state_pressed 是点击
android:state_enabled 是设置是否响应事件,指所有事件
另：
android:state_window_focused 默认时的背景图片
引用位置：res/drawable/文件的名称.xml
[b]使用的方法：[/b]Java代码中：R.drawable.文件的名称XML中：Android:background="@drawable/文件的名称"[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: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>    [b]3.layer-list   [/b][b]简介：[/b]将多个图片或上面两种效果按照顺序层叠起来[b]例子：[/b][html] view plain copy <?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>  [<ImageView      android:layout_height="wrap_content"      android:layout_width="wrap_content"      android:src="@drawable/layers" />  item表示项，表示一项内容，仅是一个标记作用.[b]4.最后:以上三个标签可以揉合到一块儿来使用，[/b]