Material Design——規格標準

本文出自大苞米的博客(http://blog.csdn.net/a396901990),略做修改。

Material Design是Google推出的一個全新的設計語言,它的特點就是擬物扁平化。

Material Theme

使用Material主題:

Material主題只能應用在Android L版本。
應用Material主題很簡單,只需要修改res/values/styles.xml文件,使其繼承android:Theme.Material。如下:

<!-- res/values/styles.xml -->  
<resources>  
  <!-- your app's theme inherits from the Material theme -->  
  <style name="AppTheme" parent="android:Theme.Material">  
    <!-- theme customizations -->  
  </style>  
</resources>  

或者在AndroidManifest.xml中直接設置主題:

android:theme="@android:style/Theme.Material.Light"  

自定義Material主題:

material主題可以定義爲如下形式:

@android:style/Theme.Material 
@android:style/Theme.Material.Light
@android:style/Theme.Material.Light.DarkActionBar

對於其他主題風格可以參考API文檔(android.R.style)

自定義顏色基調(color palette)

material可以根據自定的品牌風格,自定義主題的基礎色調,如下(參考下方圖片):
這裏寫圖片描述

<resources>  
  <!-- inherit from the material theme -->  
  <style name="AppTheme" parent="android:Theme.Material">  
    <!-- Main theme colors -->  
    <!--   your app's branding color (for the app bar) -->  
    <item name="android:colorPrimary">@color/primary</item>  
    <!--   darker variant of colorPrimary (for status bar, contextual app bars) -->  
    <item name="android:colorPrimaryDark">@color/primary_dark</item>  
    <!--   theme UI controls like checkboxes and text fields -->  
    <item name="android:colorAccent">@color/accent</item>  
  </style>  
</resources>  

自定義狀態條和導航條:

material還允許你輕鬆的自定義狀態條和導航條的顏色。
可以使用如下屬性(參考下方圖片):
android:statusBarColor,Window.setStatusBarColor
這裏寫圖片描述

兼容性:

由於Material Theme只可以在Android L Developer Preview中使用。
所以在低版本使用的話就需要爲其另設一套主題:
在老版本使用一套主題 res/values/styles.xml,在新版本使用Material主題res/values-v21/styles.xml.

設計佈局

Android L的一個重要的設計理念就是要在各種平臺上創建一個統一的風格
這裏寫圖片描述

Layout特點簡述:
這裏寫圖片描述

Paper Craft(紙工藝):

在material的設計中,每一個應用程序所繪製的像素都像駐留在一張紙上。
紙具有平坦的背景顏色,並且可以調整大小,以滿足各種用途。一個典型的佈局是由多張紙組成。
這裏寫圖片描述

Floating Actions

浮動操作,我也不知道翻譯成什麼比較貼切。
我個人理解它主要作用是一個承上啓下的浮動按鈕,承接了兩個佈局或者不同功能的轉換
這裏寫圖片描述

Z軸:

Android L中相對於之前X,Y軸又新增了Z軸的概念,有了Z軸可以做出更加具有立體感的控件。
如下圖是一個根據按鈕狀態來調整Z軸的高度
這裏寫圖片描述
通過對佈局中每個視圖設置不同的Z軸可以使佈局更具立體感,並且可以突出重點。

兼容性:

爲了適應Material Design的變化,所以Android L版本的佈局並不能和老版本的通用。
我們可以使用不同文件目錄,來設置兩套佈局分別對應Android L和低版本:
res/layout/,res/layout-v21/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章