探索Android中selector和shape的结合使用

淩亂°似流年 2022-05-21 04:24 207阅读 0赞

原文链接：https://blog.csdn.net/qq\_20785431/article/details/50198315

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

![Center][]

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

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

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中设置它为不在单击状态时的背景

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背景选择器中设置单击时与不在单击状态下的背景

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"表示响应时的背景图片

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

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

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>

现在我们来看一下效果

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

![Center 2][]

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

1.  <?xml version="1.0" encoding="utf-8"?>
2.  <selector xmlns:android="http://schemas.android.com/apk/res/android">
3.  **
4.  **
5.  **
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）带圆角，蓝色背景，白色边框的矩形

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>

效果图如下：

![Center 3][]

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

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.  **
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>

效果如下：

![Center 4][]

（4）蓝色背景的图形

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>

![Center 5][]

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

[Dome下载http://download.csdn.net/detail/qq\_20785431/9331875][Dome_http_download.csdn.net_detail_qq_20785431_9331875]

[Center]: /images/20220521/c56fa74d7f304949ac018b4502516fce.png
[Center 1]: /images/20220521/60a5c80dacaa4e0b89f5ac72c8207e55.png
[Center 2]: /images/20220521/dc51cac3795b40038a34b81f8906c9f2.png
[Center 3]: /images/20220521/9507098b9d3f491f8849cd4b7cba6390.png
[Center 4]: /images/20220521/6de90028225d46d39c09c159c5c00b20.png
[Center 5]: /images/20220521/60e3168663da431b8a82e409598360e2.png
[Dome_http_download.csdn.net_detail_qq_20785431_9331875]: http://download.csdn.net/detail/qq_20785431/9331875