ANDROID L——Material Design詳解(主題和佈局)

轉載請註明本文出自大苞米的博客(http://blog.csdn.net/a396901990),謝謝支持!



Android L:


Google已經確認Android L就是Android Lollipop(5.0)。


Google之前就已經提前推出了Android L Developer Preview(開發者預覽版)來幫助開發者更快的瞭解Android特性,而不久前也推出了64位的模擬器鏡像,而且首次搭載Android L系統的Nexus 6和 Nexus 9也即將上市。

相信Android L正式版離我們也不遠了,所以是時候開始學習Android L了!


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

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





Material Design:


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


Material Design包含了很多內容,我大致把它分爲四部分:

主題和佈局——ANDROID L——Material Design詳解(主題和佈局)

視圖和陰影——ANDROID L——Material Design詳解(視圖和陰影)

UI控件——ANDROID L——Material Design詳解(UI控件)

動畫——ANDROID L——Material Design詳解(動畫篇)



今天就先來說說第一部分——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:statusBarColorWindow.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分爲如下四部分:

主題和佈局——ANDROID L——Material Design詳解(主題和佈局)

視圖和陰影——ANDROID L——Material Design詳解(視圖和陰影)

UI控件——ANDROID L——Material Design詳解(UI控件)

動畫——ANDROID L——Material Design詳解(動畫篇)



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

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


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


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