---

前言

既然BeatBox應用的音效能嚇退人，它的使用者介面也應透出一定的威懾力。
當前，BeatBox應用依然還是一副Android千年不變的老面孔。按鈕普通，配色灰暗。整個應 用看上去毫不起眼，沒有品牌特色。
不過我們有技術，使用樣式和主題，就能定製出漂亮的使用者介面。與之前相比，新介面更加美觀、惹眼，獨具風格。

一、實驗步驟

1.顏色資源

a 定義幾種顏色（res/values/colors.xml）

<resources>      
<color name="colorPrimary">#3F51B5</color>     
<color name="colorPrimaryDark">#303F9F</color>     
<color name="colorAccent">#FF4081</color> 
    <color name="red">#F44336</color>     
    <color name="dark_red">#C3352B</color>     
    <color name="gray">#607D8B</color>     
    <color name="soothing_blue">#0083BF</color>     
    <color name="dark_blue">#005A8A</color> 
    </resources> 

b 新增樣式（res/values/styles.xml）

<resources>  
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">   
    <item name="colorPrimary">@color/colorPrimary</item>   
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>   
    <item name="colorAccent">@color/colorAccent</item>     
    </style> 
    <style name="BeatBoxButton">     
    <item name="android:background">@color/dark_blue</item>     
    </style> 
</resources>

c 使用樣式（res/layout/list_item_sound.xml）

<Button   
style="@style/BeatBoxButton"   
android:layout_width="match_parent"   
android:layout_height="120dp"  
android:onClick="@{() -> viewModel.onButtonClicked()}"  
android:text="@{viewModel.title}"  
tools:text="Sound name"/> 

d 繼承樣式（res/layout/styles.xml）

<style name="BeatBoxButton">    
 <item name="android:background">@color/dark_blue</item> </style> 
<style name="BeatBoxButton.Strong">     
<item name="android:textStyle">bold</item> 
</style>

2. 新增主題顏色

a 自定義主題屬性（res/values/styles.xml）

<style name="AppTheme" parent="Theme.AppCompat">     
<item name="colorPrimary">@color/red</item>     
<item name="colorPrimaryDark">@color/dark_red</item>     
<item name="colorAccent">@color/gray</item> 
</style> 

b 設定視窗背景（res/values/styles.xml）

<style name="AppTheme" parent="Theme.AppCompat">     
<item name="colorPrimary">@color/red</item>      
<item name="colorPrimaryDark">@color/dark_red</item>     
<item name="colorAccent">@color/gray</item> 
    <item name="android:windowBackground">@color/soothing_blue</item> 
    </style>

c 使用BeatBoxButton樣式（res/values/styles.xml）

<resources> 

    <style name="AppTheme" parent="Theme.AppCompat">    
    <item name="colorPrimary">@color/red</item>   
    <item name="colorPrimaryDark">@color/dark_red</item>   
    <item name="colorAccent">@color/gray</item> 
  <item name="android:windowBackground">@color/soothing_blue</item>   
  <item name="buttonStyle">@style/BeatBoxButton</item>     
  </style> 
    <style name="BeatBoxButton" parent="Widget.AppCompat.Button">   
    <item name="android:background">@color/dark_blue</item>     
    </style> 
</resources> 

二、模擬器執行結果

三、真機執行結果