準備工作：
你最少要有兩個由Android 基本的light/dark主題衍生而來的主題。如果你使用了最新的appcompat-v7包，所對應的就是Theme.AppCompat.Light 或 Theme.AppCompat.Light.DarkActionBar（明亮風格），和Theme.AppCompat（灰暗風格）主題
你需要為你的主題設置顏色。你可以在 Google design spec 里面看到有關顏色搭配的指導
（可選項）為每一個主題的選項菜單圖標加上顏色。取決于你的實現方式，染色過程可以是自動的，也可以是手動的，不過自動化的過程不就意味著你可以把一套圖標應用于一種主題嘛，其他的調整只要改改顏色就可以了；但就Materialistic的實際需求來考慮，我還是為一個主題預留了多套不同的圖標來避免麻煩……
我今天就以明亮風格的主題來開始講解吧：
values/styles.xml
| <style name="AppTheme" parent="Theme.AppCompat.Light"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="android:textColorPrimary">@color/textColorPrimary</item> <item name="android:textColorSecondary">@color/textColorSecondary</item> <item name="android:textColorPrimaryInverse">@color/textColorPrimaryInverse</item> <item name="android:textColorSecondaryInverse">@color/textColorSecondaryInverse</item> <!-- some other theme configurations for actionbar, overflow menu etc. --> ... </style> |
values/colors.xml
| <!-- brand color: orange --> <color name="colorPrimary">#FF9800</color> <color name="colorPrimaryDark">#F57C00</color> <color name="colorPrimaryLight">#FFE0B2</color> <!-- accent color: red --> <color name="colorAccent">#FF5252</color> <!-- text color: white --> <color name="textColorPrimary">#FFFFFF</color> <color name="textColorSecondary">#9E9E9E</color> <!-- inverse text color: 87% black --> <color name="textColorPrimaryInverse">#DE000000</color> <color name="textColorSecondaryInverse">#9E9E9E</color> |
AndroidManifest.xml
| <application android:name=".Application" android:theme="@style/AppTheme"> ... </application> |
theme 中涉及的各種屬性的含義可以在Android Developers blog 里面找到解釋
貼心小提示
雖然Android里面style的屬性/值非常全面，我們想要實現的效果style基本上都包含了有，但是Android文檔有關這些主題屬性的解釋特別少，尤其是對appcompat的解釋。所以我們還是建議你寫一個小Demo去測試style里面的屬性/值應該怎么使用、能實現什么樣的效果，然后再根據我們的需求去考慮使用哪些屬性/值來實現我們想要的效果。
根據Android的Material Design規范，選項菜單圖標的顏色應該和action bar上面的文字顏色保持一致，在我這是通過 android:textColorPrimary 來實現的，也就是使用#FFFFFF，基于這樣的規范，我們需要為action bar提供一套白色的選項菜單圖標。
貼心小提示
Google 有在 material-design-icons – Github 上提供一些開源的Material Design圖標哦。
menu/my_menu.xml
| <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@id/menu_comment" android:icon="@drawable/ic_mode_comment_white_24dp" /> <item android:id="@id/menu_story" android:icon="@drawable/ic_subject_white_24dp" /> <item android:id="@id/menu_share" app:actionProviderClass="android.support.v7.widget.ShareActionProvider" /> </menu> |
為了使顏色一致，并且能讓我們的Views和Texts能夠在多個主題下被使用，最好的解決辦法就是把顏色變成資源的引用，例如：android:textColor=”@color/textColorPrimary；又或者是通過設置style來改變，例如：在textEmptyStyle.xml文件下，我們只使用被選中的顏色
values/styles.xml
| <style name="textEmptyStyle"> <item name="android:textColor">@color/textColorSecondary</item> <item name="android:textSize">@dimen/abc_text_size_headline_material</item> ... </style> |
我相信通過今天在上面所介紹的這些內容已經足夠讓我們實現一個符合Material Design的明亮風格的主題了，下一篇我將會給大家介紹如何實現一個符合Material Design的灰暗風格的主題，以及如何在運行App的過程中切換主題。希望大家繼續關注我們哦。
