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

selector可以理解為狀態切換器，不同的狀態下切換不同的樣式，在傳統WEB設計中就是偽類hover。shape意為定義按鈕的形狀。

樣式的引用很簡單，Android統一把樣式文件作為她的一種資源，下面是樣式的使用方式。

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

 效果

總結

 整體來說，Android的樣式設計非常的靈活，WEB設計中的大部分概念都適用于Android平臺，包括樣式的繼承概念。

注：本文版權歸作者所有，點此 原文連接。

【編輯推薦】

1. 用Android搭建客戶端 手機和服務器交互開發實例
2. Android學習筆記：androidmanifest.xml解析
3. 21個免費的UI界面設計工具、資源及網站