Android中selector和shape的结合使用

Android中的Selector（背景选择器）主要是用来改变一个按钮控件的背景，在Android UI设计中经常会遇到，比如我们在点击Button时需要有些效果的变化，这时候就要用到<selector>和<shape>。<selector>和<shape>对美化控件有很大的作用。

接下来我要以四个在Android实际开发中可能会用的比较的情况来探索selector和shape的结合使用。

（1）带圆角，白色背景，彩色边框的矩形
首先来定义一个带圆角,白色背景,绿色边框的矩形，在selector中设置它为单击时的背景

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!--定义一个带圆角,白色背景,绿色边框的矩形-->  
3. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
4.     android:shape="rectangle">  
5.     <!--圆角-->  
6.     <corners android:radius="5dp" />  
7.     <!--填充颜色-->  
8.     <solid android:color="@color/white" />  
9.     <!--描边-->  
10.     <stroke  
11.         android:width="1dp"  
12.         android:color="@color/green" />  
13. </shape>  

实际开发中我们可以根据需求设置其他的属性，比如<gradient> 定义使用渐变色填充，<padding> 定义几何形状的内边距，<size>定义几何形状的大小等等，在这里就不一一例举了。

然后来定义一个带圆角,白色背景,蓝色边框的矩形，在selector中设置它为不在单击状态时的背景

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!--定义一个带圆角,白色背景,蓝色边框的矩形-->  
3. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
4.     android:shape="rectangle">  
5.     <!-- 圆角 -->  
6.     <corners android:radius="5dp" />  
7.     <!--填充颜色-->  
8.     <solid android:color="@color/white" />  
9.     <!-- 描边 -->  
10.     <stroke  
11.         android:width="1dp"  
12.         android:color="@color/blue" />  
13. </shape>  

接下来就在selector背景选择器中设置单击时与不在单击状态下的背景

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:drawable="@drawable/shape_border_press" android:state_pressed="true" />  
4.     <item android:drawable="@drawable/shape_border_nor" android:state_window_focused="false" />  
5. </selector>  

其中android:state_pressed="true"表示在组件被单击时的背景图片，

android:state_window_focused="false" 表示默认时情况下的背景图片，此外还可以设置：

android:state_focused="true"表示在获得焦点时的背景图片

android:state_selected="true"表示被选中时的背景图片

android:state_enabled="true"表示响应时的背景图片

在实际的开发中，我们可以根据不同的选定状态来定义不同的现实效果

在点击某一个按钮的时候相对应的按钮字体的颜色也应发生对应的变化，这样的用户体验会更好

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <!--不在单击状态下字体的颜色-->  
4.     <item android:color="@color/blue" android:state_pressed="false" />  
5.     <!--单击时的颜色-->  
6.     <item android:color="@color/green" android:state_pressed="true" />  
7. </selector>  

现在我们来看一下效果

其实如下所示我们可以看到为了设置一个按钮选中时的背景图片的变化，我们创建了四个XML文件，这显然是没有必要的，我们可以尽可能少的把这些内容整合到一个XML中，这就要用到我们今天所探索的Android中selector和shape的结合使用

如下就是使用我们的第二种方法来定义当我们点击一个按钮时按钮的背景选择器,是不是简介了呢？

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <!--第一种方法-->  
4.     <!--<item android:drawable="@drawable/shape_border_press" android:state_pressed="true" />-->  
5.     <!--<item android:drawable="@drawable/shape_border_nor" android:state_window_focused="false"/>-->  
6.   
7.     <!--第二种方法-->  
8.     <!--默认情况下是一个带圆角,白色背景,蓝色边框的矩形-->  
9.     <item android:state_window_focused="false">  
10.         <shape android:shape="rectangle">  
11.             <!-- 圆角 -->  
12.             <corners android:radius="5dp" />  
13.             <!--填充颜色为白色-->  
14.             <solid android:color="@color/white" />  
15.             <!-- 描边 -->  
16.             <stroke android:width="1dp" android:color="@color/blue" />  
17.         </shape>  
18.     </item>  
19.     <!--单击时是一个带圆角,白色背景,绿色边框的矩形-->  
20.     <item android:state_pressed="true">  
21.         <shape android:shape="rectangle">  
22.             <!--圆角-->  
23.             <corners android:radius="5dp" />  
24.             <!--填充颜色为白色-->  
25.             <solid android:color="@color/white" />  
26.             <!--描边-->  
27.             <stroke android:width="1dp" android:color="@color/green" />  
28.         </shape>  
29.     </item>  
30. </selector>  

（2）带圆角，蓝色背景，白色边框的矩形

[html]  view plain  copy

1. span style="font-size:18px;"><strong></strong></span><pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <!--默认情况下是一个带圆角,蓝色背景,白色边框的矩形-->  
4.     <!--第二种方法-->  
5.     <item android:state_window_focused="false">  
6.         <shape android:shape="rectangle">  
7.             <!--圆角-->  
8.             <corners android:radius="5dp" />  
9.             <!--填充颜色-->  
10.             <solid android:color="@color/blue" />  
11.             <!--描边-->  
12.             <stroke android:width="1dp" android:color="@color/white" />  
13.         </shape>  
14.     </item>  
15.     <!--单击时是一个带圆角,绿色背景,白色边框的矩形-->  
16.     <item android:state_pressed="true">  
17.         <shape android:shape="rectangle">  
18.             <!--圆角-->  
19.             <corners android:radius="5dp" />  
20.             <!--填充颜色-->  
21.             <solid android:color="@color/green" />  
22.             <!--描边-->  
23.             <stroke android:width="1dp" android:color="@color/white" />  
24.         </shape>  
25.     </item>  
26. </selector>  

效果图如下：

（3）带圆角,白色背景,蓝色虚线边框的矩形

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!--背景选择器-->  
3. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
4.     <!--默认情况下是一个带圆角,白色背景,蓝色虚线边框的矩形-->  
5.     <item android:state_window_focused="false">  
6.         <shape android:shape="rectangle">  
7.             <!--填充颜色为白色-->  
8.             <solid android:color="@color/white" />  
9.             <!--描边，设置描边为虚线，其中android:dashWidth表示'-'这样一个横线的宽度，android:dashGap表示之间隔开的距离-->  
10.             <stroke android:width="1dp" android:color="@color/blue" android:dashGap="2dp" android:dashWidth="10dp" />  
11.             <!-- 圆角 -->  
12.             <corners android:radius="2dp" />  
13.         </shape>  
14.     </item>  
15.     <!--单击时候是一个带圆角,白色背景,绿色虚线边框的矩形-->  
16.     <item android:state_pressed="true">  
17.         <shape android:shape="rectangle">  
18.             <!--填充颜色-->  
19.             <solid android:color="@color/white" />  
20.             <!--描边-->  
21.             <stroke android:width="1dp" android:color="@color/green" android:dashGap="2dp" android:dashWidth="10dp" />  
22.             <!-- 圆角 -->  
23.             <corners android:radius="2dp" />  
24.         </shape>  
25.     </item>  
26. </selector>  

效果如下：

（4）蓝色背景的图形

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <!--默认情况下是一个蓝色背景的圆形-->  
4.     <item android:state_window_focused="false">  
5.         <shape android:shape="oval">  
6.             <!--填充个颜色-->  
7.             <solid android:color="@color/blue" />  
8.         </shape>  
9.     </item>  
10.     <!--单击时是一个绿色背景的圆形-->  
11.     <item android:state_pressed="true">  
12.         <!--填充颜色-->  
13.         <shape android:shape="oval">  
14.             <solid android:color="@color/green" />  
15.         </shape>  
16.     </item>  
17. </selector>  

要补充一点就是ShapeDrawable资源是用来定义一个基本的几何图形的，ShapeDrawable的XML文件的根元素属性可以设置成android:shape=["rectangle"|"oval"|"line"|"ring"],值定义哪种类型的几何图形，分别表示矩形、圆形、线条和环形