ANDROID L——Material Design詳解（主題和布局）

標籤：android l   material design   material theme   

Android L：

Android L可能就是Android Lollipop或者Lemon Pie（4.5或者5.0），因為Google一直以來都是用甜點為版本命名。

Google之前就已經提前推出了Android L Developer Preview（開發人員預覽版）來協助開發人員更快的瞭解Android特性，而不久前也推出了64位的模擬器鏡像。相信Android L正式版也不遠了，所以是時候開始學習Android L了。

關於Android L如何配置模擬器和建立項目，如果大家有興趣的話可以看看我之前的一篇文章：

Android L——模擬器配置及建立項目

我打算寫一個關於Android L的系列文章，本文就先介紹一下Android L最大的一個新特性——Material Design

Material Design包含了很多內容，我大致把它分為四部分：

主題和布局

視圖和陰影

UI控制項

動畫

今天就先來說說第一部分——Material主題和布局

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的一個重要的設計理念就是要在各種平台上建立一個統一的風格

在設計主題和布局之前，你首先要看一下 material design specification這篇文章（Google官方關於如何設計的文章）。

文章從Aniamation, Style, Layout, Components, Patterns, Usability, Resources等幾方面非常詳細的介紹了如何正確的設計介面。

Layout特點簡述：

我個人簡單理解（非常初級的理解）Android L的Material設計中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/

總結：

我將Material Design分為如下四部分：

主題和布局

視圖和陰影

UI控制項

動畫

本文的主題和布局都是比較偏向設計的，和代碼關係不是特別大。所以這方面我不是特別熟悉，只是說了一下我個人的理解。

詳細關於Material Design的主題和布局應該如何設計，請看我之前提過的文章material design specification（設計真的是一門技術/藝術，想做好實在太難了）。

剩餘的視圖和陰影，UI控制項，動畫就和我們編程人員息息相關了，我會陸續更新，敬請期待。。。

ANDROID L——Material Design詳解（主題和布局）