Material Design風格常用控件的使用與定制

一、前言

你是否還在使用selector來定制Button普通狀態、按下狀態的變化呢？

你是否也想自己的Button有Material Design的陰影效果呢？

你是否也想讓各種控件輕松變換各種顏色風格呢？

那么看完這篇分享，你就會有答案了。

二、4種風格的Button

系統默認有4種風格的Button效果，分別是

Widget.AppCompat.Button

Widget.AppCompat.Button.Colored
Widget.AppCompat.Button.Borderless
Widget.AppCompat.Button.Borderless.Colored</code></pre> 
  
效果如下（1-4）：
 
  
 
  
4種風格的Button
 
  
按命名、并結合效果圖可以看出，這4種風格對應兩個屬性： 字體顏色 、 邊框顏色 （或稱背景顏色）;
 
  
4種風格可完整描述為 默認邊框默認字體 、 彩色邊框默認字體 、 無邊框默認字體 、 無邊框彩色字體 ，使用方法也很簡單，只需在普通Button的xml布局文件中，加上style屬性即可：
 
  
<Button
    ...
    style="@style/Widget.AppCompat.Button" />

<Button
    ...
    style="@style/Widget.AppCompat.Button.Colored" />
<Button
    ...
    style="@style/Widget.AppCompat.Button.Borderless" />
<Button
    ...
    style="@style/Widget.AppCompat.Button.Borderless.Colored" /></code></pre> 
  
從上圖也可以看到，不加style屬性的話，默認是使用 Widget.AppCompat.Button 風格的。
 
  
后面兩種無邊框Button，只需要改變 textColor 屬性來設置效果，沒什么好說的；主要是前面兩種，其實就是同一種效果：有邊框顏色的Button，如何定制請看下一節內容。
 
  
三、各種顏色的Button
 
  
你是否還在用selector文件來定制各種顏色、各種不同狀態下的Button呢？如果一個應用中需要10個不同的Button，你是否需要定義10*4個xml文件呢？(normal狀態+pressed狀態+disabled狀態+selector選擇器)
 
  
其實使用系統的Button控件就可以輕松實現，只需要配置一定的屬性。
 
  
首先，確保主題使用Material風格
 
  
主題需要使用 Theme.AppCompat 或 Theme.Design 類的子主題（建議使用 Theme.AppCompat 子類主題，兼容Android 5.0以下版本），如 Theme.AppCompat.Light 。
 
  
其次，在style文件中設置Button顏色
 
  
在 styles.xml 文件中設置 colorButtonNormal 屬性：
 
  
values/styles.xml
 
  
<style name="RedButton">
    <item name="colorButtonNormal">#F44336</item>
</style>
 
  
好了，一起來見證奇跡
 
  
在布局文件中定義Button，增加theme屬性(注意，是 theme ，不是 style )：
 
  
<Button
    ...
    android:theme="@style/RedButton" />
 
  
效果如下：
 
  
 
  
各種顏色的Button
 
  
現在，就可以看到Button變成了你想要的顏色，而且點擊后Button顏色也加深了，完全跟使用selector定制出來的一模一樣。并且如果使用Android 5.0以上的手機，還會默認帶有 水紋波 和 陰影 的炫酷效果。
 
  
四、其它各種常用控件
 
  
 
  
CheckBox
 
  
 
  
RadioButton
 
  
 
  
Switch
 
  
其余控件像 CheckBox 、 RadioButton ，可以用 colorControlNormal 、 colorControlActivated （或 colorAccent ）來控制正常狀態和按下狀態的背景顏色；
 
  
而像 Switch 、 EditText 等控件，可以用 colorControlActivated （或 colorAccent ）來控制背景顏色。
 
  
五、總結
 
  
其實本篇主要只有兩部分內容：
 
  
 
   
 
4種Button風格：
 
 
  
 
  
Widget.AppCompat.Button
Widget.AppCompat.Button.Colored
Widget.AppCompat.Button.Borderless
Widget.AppCompat.Button.Borderless.Colored
 
  
 
   
 
4個控件屬性
 
 
  
 
  
colorButtonNormal: Button正常狀態顏色
colorControlNormal: 控件正常狀態顏色
colorControlActivated: 選中或者點擊獲得焦點后的顏色
colorAccent: 選中或者點擊獲得焦點后的顏色
 
  
 
 
  
 
 
  
來自：http://www.jianshu.com/p/70a485c168be