我大愛 Material Design，Google 已經在這裡給出了使用它的官方指導。如果你還沒有看過的話，我建議你通讀一下，因為它更加偏向講述一個“好的設計”，而不是僅僅講述如何去實現 Material Design。如果我是第一次看到，我一定會在角落那塊地方或者對話方塊的按鈕上點個大大的贊。
Kitkat 和 Jellybean 仍然主導著大部分市場（至少在我寫這篇文章的時候），並且我們的應用還是需要支援執行著這兩個版本系統的裝置。Lollipop 已經出來一段時間了，我估計你也已經想到了一些辦法把 Material Design 運用到你的應用上來，並且支援較老版本的系統。然後呢，這裡也有一些辦法，可以讓你在幾乎不用幹任何設計活兒的情況下，使應用更加 “material”：
- 使用 App Compat v21 的主題和控制元件
- Android Asset Studio 生成的圖示
- 使用免費開源庫的中的元件
- 設計模式：Google Support 自帶的下拉重新整理（Swipe to refresh）
- 字型：Roboto
主題和控制元件，使用 App Compat v21
主題
Support 支援庫的 V21版本已經伴隨著 5.0 SDK 一起釋出了。引用它便可以搞定應用“material 化”將近一半的工作。你將會得到不包含陰影的操作欄（ActionBar），並且在應用名稱旁邊也沒有應用圖示，還有由三個小圓點組成的更多（overflow）圖示。選單被放置在它們彈出的選項外邊，這樣當前被選中的選單項就可以出現在所有專案或者控制元件等等元素的最上面。
新的 Support V21 包裡總共有兩套主題可用：暗色調（預設主題， 通過 Theme.AppCompat 來啟用）和亮色調 (Theme.AppCompat.Light)
你的 styles.xml 現在需要這樣寫：
|
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="AppTheme.Base"/> <style name="AppTheme.Base" parent="Theme.AppCompat"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources> |
colorPrimary 代表 ActionBar 的顏色, colorPrimaryDark 代表狀態列（StatusBar）的顏色， colorAccent 是染色控制元件（tinted widgets）的顏色. 比較可惜的是，colorPrimaryDark 屬性在 Lollipop 之前的版本中是不能使用的.
你編寫的 Activity 現在必須繼承 ActionBarActivity ，如果要引用 操作欄（ActionBar）你需要呼叫 getSupportActionBar(); 方法。如果你的應用有導航抽屜（navigation drawer），使用 getSupportActionBar().setDisplayHomeAsUpEnabled(true); 來獲得。可以看到，當抽屜被開啟的時候，抽屜圖示會變成一個返回箭頭，關閉的時候則相反。
控制元件
控制元件包括：
看到上面列表裡面是不是忘了什麼重要的東西？是的，按鈕！
如何設定 App Compat library：Support Library Setup
Android Asset Studio 生成的圖示
我做獨立應用開發的時候從來沒有錯過這款工具，它包含一個圖示生成器和一個點 9 圖（ nine patch ）生成器。 你可以用它從你的影象或文字中生成扁平化的應用圖示、action bar 圖示、剪下畫，或者通用圖示， (Android 的系統圖示除外) 。 在生成通用圖示的時候你還可以指定 DPI， 但是 actionbar/tab 的圖示暫時還不行，因為它都是有標準大小的 (xxhdpi, xhdpi, hdpi & mdpi)。 可以看下這裡：Android Asset Studio
使用免費開源庫的中的元件
不在 support 庫中的一些元件，我們就得去看看其它開源庫了。這裡介紹一些我用過的挺棒的開源庫
BOTTOMSHEET
連結: BOTTOMSHEET
SNACKBAR
連結：SNACKBAR
FLOATING ACTION BUTTON
連結： FLOATING ACTION BUTTON
設計模式：Google Support 自帶的下拉重新整理（Swipe to refresh）
如果你在你的 App 中用到了 Google 自帶的下拉重新整理，用 v4 Support 庫的第 V21 版便會自動幫你新增一個 Material Design’s 的 Spinner。
|
1 2 3 |
SwipeRefreshLayout swipeLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh_layout); swipeLayout.setOnRefreshListener(this); swipeLayout.setColorSchemeResources(R.color.red, R.color.green, R.color.blue); |
佈局 XML：
|
1 2 3 4 5 6 7 8 9 |
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/swipe_refresh_layout" android:layout_width="match_parent" android:layout_height="match_parent"> ... </android.support.v4.widget.SwipeRefreshLayout> |
顏色 colors.xml：
|
1 2 3 4 5 6 |
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="red">#f44336</color> <color name="green">#4caf50</color> <color name="blue">#03a9f4</color> </resources> |
字型：Roboto
Roboto 也跟著新的 Material Design 一起被更新了。Google 表示這款字型已經被調整到從手錶到桌面、到電視、到汽車，以至於在更多的螢幕尺寸和條件下都能正常表現。 要使用它或者任何自定義字型，把你的字型檔案拖到 assets 資料夾。
|
1 2 3 |
Typeface robotoRegular = Typeface.createFromAsset(getAssets(), "Roboto-Regular.ttf"); //Then set it, for example to a TextView textView.setTypeface(robotoRegular); |
從此處獲得 Roboto。
動畫和陰影（elevation）一覽
Lollipop 中最驚豔的應該就是動畫了。擁有全新的 activity 動畫（activity transitions）, 觸控時的水波紋動畫（ripple animations），還有很多其它的！ 而且還有陰影（elevation）屬性，使得檢視（View）終於有了“深度”的概念。動畫全部由一個系統級的渲染執行緒（RenderThread）來管理。 引用 Android Developers 部落格中的原話： “RippleDrawable 能流暢執行的最大功臣就是 Android 5.0 的渲染執行緒（RenderThread）。直到現在才釋出是因為我們一直在優化它在較老 Android 版本上執行時的表現。” 陰影（elevation）效果也是如此。但是實現這樣的動畫有很多方法，特別是著名的水波紋效果（Ripple effect），而且有很多開源庫也可以幫到你，但是我選擇在這裡不討論它們，因為我覺得如果用開源庫的方式來實現就背離我的初衷了。
結論
我的手機即將在接下來的某一天收到 Lollipop 的更新。我常用的一些軟體也已經跟進了 Material Design （Walkman, Pushbullet and 所有的 Google 自帶應用）。雖然也不是全部，因為它們沒有辦法自己去實現水波紋效果或者一些 5.0 才有的新功能。對於我們自己開發的應用而言，在多版本的系統間保證 UI 的完整性雖然不是必須的，但還是很重要的 。因此這篇文章列出了一些更簡單的辦法來實現這些效果，尤其對那些不想在 UI 上花太多時間的開發者。但願這至少能在 Android 5.0 主導各大裝置之前對大家有所幫助。