【转】Android开发：shape和selector和layer-list的（详细说明）

<shape>和<selector>在Android UI设计中经常用到。比如我们要自定义一个圆角Button，点击Button有些效果的变化，就要用到<shape>和<selector>。

可以这样说，<shape>和<selector>在美化控件中的作用是至关重要。

在看这篇文章之前，可以看下这个小例子​

1.Shape

简介

作用：XML中定义的几何形状

位置：res/drawable/文件的名称.xml

使用的方法：

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

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

属性：

<shape> Android:shape=["rectangle" | "oval" | "line" | "ring"]

其中rectagle矩形，oval椭圆，line水平直线，ring环形

<shape>中子节点的常用属性：

<gradient> 渐变

Android:startColor

起始颜色

Android:endColor

结束颜色

Android:angle

渐变角度，0从左到右，90表示从下到上，数值为45的整数倍，默认为0；

Android:type

渐变的样式 liner线性渐变 radial环形渐变 sweep

<solid > 填充

Android:color

填充的颜色

<stroke >描边

Android:width

描边的宽度

Android:color

描边的颜色

Android:dashWidth

表示'-'横线的宽度

Android:dashGap

表示'-'横线之间的距离

<corners >圆角

Android:radius

圆角的半径 值越大角越圆

Android:topRightRadius

右上圆角半径

Android:bottomLeftRadius

右下圆角角半径

Android:topLeftRadius

左上圆角半径

Android:bottomRightRadius

左下圆角半径

<padding >填充

android:bottom="1.0dip"

底部填充

android:left="1.0dip"

左边填充

android:right="1.0dip"

右边填充

android:top="0.0dip"

上面填充

2.Selector

简介

根据不同的选定状态来定义不同的现实效果

分为四大属性：

android:state_selected 是选中

android:state_focused 是获得焦点

android:state_pressed 是点击

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

另：

android:state_window_focused 默认时的背景图片

引用位置：res/drawable/文件的名称.xml

使用的方法：

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

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

1. 1. 
      
2. <?xml version="1.0" encoding="utf-8" ?>       
3. <selector xmlns:Android="http://schemas.android.com/apk/res/android">     
4. <!-- 默认时的背景图片-->      
5. <item Android:drawable="@drawable/pic1" />        
6. <!-- 没有焦点时的背景图片 -->      
7. <item   
8.    Android:state_window_focused="false"        
9.    android:drawable="@drawable/pic_blue"   
10.    />       
11. <!-- 非触摸模式下获得焦点并单击时的背景图片 -->      
12. <item   
13.    Android:state_focused="true"   
14.    android:state_pressed="true"     
15.    android:drawable= "@drawable/pic_red"   
16.    />     
17. <!-- 触摸模式下单击时的背景图片-->      
18. <item   
19.    Android:state_focused="false"   
20.    Android:state_pressed="true"     
21.    Android:drawable="@drawable/pic_pink"   
22.    />      
23. <!--选中时的图片背景-->      
24. <item   
25.    Android:state_selected="true"   
26.    android:drawable="@drawable/pic_orange"   
27.    />       
28. <!--获得焦点时的图片背景-->      
29. <item   
30.    Android:state_focused="true"   
31.    Android:drawable="@drawable/pic_green"   
32.    />       
33. </selector>   
    1. 
       

3.layer-list

简介：

将多个图片或上面两种效果按照顺序层叠起来

例子：

​

1. 1. 
      
2. <?xml version="1.0" encoding="utf-8"?>
3. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
4. <item>
5. <bitmap android:src="@drawable/android_red"
6. android:gravity="center" />
7. </item>
8. <item android:top="10dp" android:left="10dp">
9. <bitmap android:src="@drawable/android_green"
10. android:gravity="center" />
11. </item>
12. <item android:top="20dp" android:left="20dp">
13. <bitmap android:src="@drawable/android_blue"
14. android:gravity="center" />
15. </item>
16. </layer-list>
    1. 
       

​

1. 1. 
      
2. <ImageView
3. android:layout_height="wrap_content"
4. android:layout_width="wrap_content"
5. android:src="@drawable/layers" />
   1. 
      

效果图：

4.最后

以上三个标签可以揉合到一块儿来使用，所要实现的效果就是上面三种标签的说明，比如下面这个例子：

​

1. 1. 
      
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
3. <item android:state_pressed="true">
4. <layer-list>
5. <item android:bottom="8.0dip">
6. <shape>
7. <solid android:color="#ffaaaaaa" />
8. </shape>
9. </item>
10. <item>
11. <shape>
12. <corners android:bottomLeftRadius="4.0dip" android:bottomRightRadius="4.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />
13. 
    
14. <solid android:color="#ffaaaaaa" />
15. 
    
16. <padding android:bottom="1.0dip" android:left="1.0dip" android:right="1.0dip" android:top="0.0dip" />
17. </shape>
18. </item>
19. <item>
20. <shape>
21. <corners android:bottomLeftRadius="3.0dip" android:bottomRightRadius="3.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />
22. 
    
23. <solid android:color="@color/setting_item_bgcolor_press" />
24. </shape>
25. </item>
26. </layer-list>
27. </item>
28. <item>
29. <layer-list>
30. <item android:bottom="8.0dip">
31. <shape>
32. <solid android:color="#ffaaaaaa" />
33. </shape>
34. </item>
35. <item>
36. <shape>
37. <corners android:bottomLeftRadius="4.0dip" android:bottomRightRadius="4.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />
38. 
    
39. <solid android:color="#ffaaaaaa" />
40. 
    
41. <padding android:bottom="1.0dip" android:left="1.0dip" android:right="1.0dip" android:top="0.0dip" />
42. </shape>
43. </item>
44. <item>
45. <shape>
46. <corners android:bottomLeftRadius="3.0dip" android:bottomRightRadius="3.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />
47. 
    
48. <solid android:color="@color/setting_item_bgcolor" />
49. </shape>
50. </item>
51. </layer-list>
52. </item>
53. </selector>
    1.