ANDROID L - Material Design詳解(主題和布局)

jopen 10年前發布 | 285K 次閱讀 Android開發 移動開發 Material Design

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中直接設置主題:

  1. 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設計真的是一門技術/藝術,想做好實在太難了)。


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

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!