Android：利用selector优化布局，提升用户体验

在Android开发中，很多控件被点击或选择时都没有反馈，被点选时的背景就跟它们普通状态一样，没有特别的显示，而由于缺少反馈，用户就难以判别自己点选的控件是哪个，这对用户体验方面来说很不好。为此，可以利用selector为同一个控件设置不同状态下的背景，从而增强用户体验。

selector顾名思义是选择器的意思，它作用正如其名字一样，负责在不同状态下选择不同的资源。

使用selector的方法非常简单，就是在drawable文件夹下定义一个根标签为selector的xml布局文件，然后设置不同状态下引用不同的资源。

再利用 android:background="@drawable/你设置好的selector布局文件名字" 把定义好的selector作为drawable资源当作背景图案设置给想要优化体验的组件即可。

下面来分析selector，并解释如何设置不同状态选择不同资源，先看一段代码：

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

<item android:state_pressed="false"
android:drawable="@color/before_pressed"></item>

<item android:state_pressed="true"
android:drawable="@color/pressed"></item>

</selector>

如上述代码，selector的整体结构很简单，就像定义普通布局一样，在父标签selector内嵌套子标签<item> ，而<item中写明了对应的状态（state），和该状态下所用的资源（drawable）。

android:state_pressed就是被点击状态，这里传入的值为false代表未被点击时的状态（即默认态），在该状态下，将引用color这一资源文件下的before_pressed作为当前drawable。而如果state_pressed传入的值为true，就代表是被点击时的状态，同理该状态下的drawable就是preesed了。（当然，pressed，before_pressed要自己预先定义好）

当然，selector中的状态远不止pressed（点击），同样的还有focused （获得焦点），checkable （checkbox选中时）等，都是能直接通过其英文名字了解其意思的，这里就不一一复述了。

selector的基本使用就是这样，整体大概可分为三个步骤：

1.在drawable目录下创建一个根标签为selector的布局文件

2.定义好不同的drawable资源

3.根据情境设置selector的item中的状态，并为不同状态指定对应的drawable资源 （例如你想控件被点击时背景不同，状态就是state_pressed，想获焦时不同状态就是state_focused）

更高级一点的用法：

不过，我们可以注意到<item>标签中的 一个属性是android:drawable ，经过前面的叙述，应该都知道这是该状态下引用的资源，这里我用的是color，我们还可以引用其他资源，就好比drawable本身，我们可以在drawable目录下定义两个根标签为shape的布局文件，一个作为默认状态的drawable，一个作为状态触发时的drawable。而shape标签下可以嵌套的子标签远比selector多，例如我们可以设置渐变色，圆角，边框等属性，从而实现各种酷炫的效果。shape内的子标签的使用，这里暂不详细讲，给出代码和效果图，各位可以自己琢磨下。

再说一下怎么把selector用到布局的控件中，例如该selector布局名为text_bg_selector.xml ，要用时给控件设置 android:background="@drawable/text_bg_selector" 即可。

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

<item android:state_pressed="false"
android:drawable="@drawable/text_bg_normal"></item>

<item android:state_pressed="true"
android:drawable="@drawable/text_bg_state"></item>

</selector>

text_bg_normal:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<solid android:color="#ff0033"/>
<gradient android:startColor="#ff0033"
android:endColor="#ff9933"/>

<corners android:radius="40dp"
/>

<stroke android:width="1dp"
android:color="#ffff00"/>

</shape>

text_bg_state:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >

<solid android:color="#666699"/>
<gradient android:startColor="#666699"
android:endColor="#99cc00"/>
<stroke android:width="1dp"
android:color="#cc99cc"/>

</shape>

效果对比图：

默认状态（上面是演示基本用法，下面演示更高级一点的用法）



上面的控件被点击时，可以看到颜色改变了



下面的控件被点击时，不单止颜色改变，连形状都变了，原来的边框也换了颜色