【UI布局】用XML的selector实现按钮样式自动切换

如果你曾经是一名WEB前台设计师，如果你曾经有过设计的功底，那么你很荣幸，如果你切到Android平台中，以前的知识和经验都能很好的移植到Android平台中。本人以为，学习是一个长期的积累过程，经验很重要，为什么有的人不管做神马生意都赚钱，因为他有经验，经验加上变通，就是智慧。

布局是根本，不管在WEB设计还是在手机客户端设计中，都是如此。如果一开始局就没有布好，就算你的细节做得再精美，到头来还是要重构。相比传统WEB设计中的布局，Android平台一样都不少，只是WEB设计的层布局，在Android中有了个新的叫法，叫帧布局。布局在本篇中不是重点，因为和WEB中的概念几乎一样，所以一笔带过。

说实话，我还是比较喜欢WEB设计中的样式命名规范，简单，易用，最主要的是WEB的样式很好管理，不像Android样式文件分得很细，看起来比较零乱。如果你研究过SDK的设计方式，你会发现一个按钮的样式，分得很细，有btn_default.xml，btn_default_small.xml等二十几个样式文件。

下面我们模仿SDK的设计方式，自定义一个按钮样式文件btn_default.xml，包含非焦点，焦点，pressed三种不同状态。

 
 

  
  
1<?xmlversion="1.0"encoding="utf-8"?> 
  
  
2<selectorxmlns:android="http://schemas.android.com/apk/res/android"> 
  
  
3itemandroid:state_pressed="true"> //按下
  
  
4shape> 
  
  
5gradient 
  
  
6android:startColor="#ff8c00" 
  
  
7android:endColor="#FFFFFF" 
  
  
8android:angle="270"/> 
  
  
9 
  
  
10stroke 
  
  
11android:width="2dp" 
  
  
12android:color="#dcdcdc"/> 
  
  
13 
  
  
14corners 
  
  
15android:radius="2dp"/> 
  
  
16 
  
  
17padding 
  
  
18android:left="10dp" 
  
  
19android:top="10dp" 
  
  
20android:right="10dp" 
  
  
21android:bottom="10dp"/> 
  
  
22 
  
  
23</> 
  
  
24 
  
  
25item> 
  
  
26 
  
  
27itemandroid:state_focused="true"> //焦点
  
  
28> 
  
  
29gradient 
  
  
30android:startColor="#ffc2b7" 
  
  
31android:endColor="#ffc2b7" 
  
  
32android:angle="270"/> 
  
  
33 
  
  
34stroke 
  
  
35android:width="2dp" 
  
  
36android:color="#dcdcdc"/> 
  
  
37 
  
  
38corners 
  
  
39android:radius="2dp"/> 
  
  
40 
  
  
41padding 
  
  
42android:left="10dp" 
  
  
43android:top="10dp" 
  
  
44android:right="10dp" 
  
  
45android:bottom="10dp"/> 
  
  
46 
  
  
47> 
  
  
48 
  
  
49> //失去焦点
  
  
50 
  
  
51> 
  
  
52> 
  
  
53gradient 
  
  
54android:startColor="#ff9d77" 
  
  
55android:endColor="#ff9d77" 
  
  
56android:angle="270"/> 
  
  
57 
  
  
58stroke 
  
  
59android:width="2dp" 
  
  
60android:color="#fad3cf"/> 
  
  
61 
  
  
62corners 
  
  
63android:radius="2dp"/> 
  
  
64 
  
  
65padding 
  
  
66android:left="10dp" 
  
  
67android:top="10dp" 
  
  
68android:right="10dp" 
  
  
69android:bottom="10dp"/> 
  
  
70 
  
  
71> 
  
  
72 
  
  
73> 
  
  
74 
  
  
75selector 
 
 

selector可以理解为状态切换器，不同的状态下切换不同的样式，在传统WEB设计中就是伪类hover。shape意为定义按钮的形状。

样式的引用很简单，Android统一把样式文件作为她的一种资源，下面是样式的使用方式。

Button
  
  
2android:background="@drawable/btn_default"
  
  
3android:layout_width="wrap_content" 
  
  
4android:layout_height="wrap_content"
  
  
5android:text="testStyle"
  
  
6>
  
  
7 
  
  
8Button>
  
  
9 
 
 

效果