Material Design
Material Design簡介
Material Design是谷歌新的設計語言,谷歌希望寄由此來統一各種平台上的用戶體驗,Material Design的特點是干凈的排版和簡單的布局,以此來突出內容。
Material Design對排版、材質、配色、光效、間距、文字大小、交互方式、動畫軌跡都做出了建議,以幫助設計者設計出符合Material Design風格的應用。
Material Design設計語言鼓勵大家使用充滿活力的鮮艷色彩,並在同一界面建議使用三種色調,並保障有一個強色調,強色一般處於處於視圖最底層,例如狀態欄或者actionbar。通過強色調形成鮮明的對比,更容易突出內容的重要性。對於文字色彩的取值,Material Design建議在淺色背景上采用黑色,在深色背景上采用白色。重要信息和標題采用87%透明度,次要文字采用54%透明度,而更次要的說明文字可以采用26%的透明度。對於想特別突出或者可點擊的文字,建議使用強色調。不同層級的視圖,可以通過陰影來凸顯。對於帶有操作且內容突出的區域,可以使用cardview進行隔離,對於內容不太重要或者操作比較單一的區域,可以使用分割線進行隔離。
更多詳情請見Material Design文檔:
中文版網站 http://design.1sters.com/
英文版 http://www.google.com/design/spec/material-design/introduction.html
Material Design使用
作為我們開發者,最關心的還是如何在項目中使用Material Design風格:
- 設置應用的
targetSdkVersion和targetSdkVersion為21 - 在values目錄下的style資源文件中創建一個style,讓其繼承自
android:Theme.Material - 在AndroidManifest中指定應用的主題或者Activity的主題為我們設定的樣式
谷歌官方我們提供了三種配色風格的Material Design樣式:
- 黑色主題
Theme.Material - 明亮主題
Theme.Material.Light - 明亮主題黑色ActionBar
Theme.Material.Light.DarkActionBar
我們也可以繼承系統提供的Material Design樣式,進行配色修改:

android:colorPrimaryDark應用的主要暗色調,statusBarColor默認使用該顏色android:statusBarColor狀態欄顏色,默認使用colorPrimaryDarkandroid:colorPrimary應用的主要色調,actionBar默認使用該顏色android:windowBackground窗口背景顏色android:navigationBarColor底部欄顏色android:colorForeground應用的前景色,ListView的分割線,switch滑動區默認使用該顏色android:colorBackground應用的背景色,popMenu的背景默認使用該顏色android:colorAccent一般控件的選種效果默認采用該顏色android:colorControlNormal控件的默認色調android:colorControlHighlight控件按壓時的色調android:colorControlActivated控件選中時的顏色,默認使用colorAccentandroid:colorButtonNormal默認按鈕的背景顏色android:textColorButton,textView的文字顏色android:textColorPrimaryDisableOnlyRadioButton checkbox等控件的文字android:textColorPrimary應用的主要文字顏色,actionBar的標題文字默認使用該顏色
主題不僅可以對Application和Activity使用,也可以對某一個控件單使用,或者是在xml布局中給一個根節點控件設置android:theme屬性,來修改它和它所有子控件的主題。 如果我們要對特定控件實例做自定義修改,更建議大家可以通過控件自身的API進行設置修改。
Material Design兼容性
Material Design主題只有在API級別為21以上才可使用,在v7支持庫中提供了部分控件的Material Design主題樣式,如果想使應用在android的所有版本上都能統一風格,我們可以對控件效果做自定義或者使用一些第三方的兼容包。目前最有效的做法是針對21版本創建value-21資源目錄,使用Material Design風格主題,在其他版本使用v7的Theme.AppCompat.Light風格主題。
