又到期末了，學習下Google的材料設計。寫下此文記錄自己的同時，分享給需要的同學，若發現文中有什么問題和不對，歡迎指出

使用 Material Design 創建新應用

首先需要使用材料主題

如果是在5.0及以上的系統，可以直接使用材料主題。否則，就需要做5.0之前系統的兼容

引用Google官方的話:

您可對您的應用進行配置，使應用能夠在支持它的設備上使用材料主題，并且能夠在運行早期版本 Android 的設備上還原至早期版本的主題

具體操作就是:

1. 定義備用樣式 style和v-21的style
2. 提供備用布局 xx布局.xml和v-21的xx布局.xml
3. 使用支持內容庫 使用v7支持庫

定義備用樣式

1. 定義一個從 res/values/styles.xml 中的早期版本主題（例如 Holo）繼承的主題。

2. 定義一個從 res/values-v21/styles.xml 中的材料主題繼承且擁有相同名稱的主題。

3. 在清單文件中將此主題設置為您的應用主題。

    //5.0以上系統使用的主題(res\values-v21文件夾中)
    <style name="AppTheme" parent="android:Theme.Material.Light">
        <!-- Customize your theme here. -->            
    </style>
   
    //5.0以下系統使用的主題(res\values文件夾中)
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
    </style>
   

提供備用布局

Google是這樣說的

您可在res/layout-v21/內創建用于 Android 5.0（API 級別 21）的布局文件，同時也可在res/layout/內創建用于早期版本 Android 的備用布局文件。

例如，res/layout/my_activity.xml是res/layout-v21/my_activity.xml的備用布局。

為避免代碼重復，請在res/values/內定義您的風格，在res/values-v21/內為新 API 修改風格，以及使用風格繼承（即：在res/values/內定義基礎風格，然后在res/values-v21/內繼承這些風格）。

具體操作如下:

1. 像平時一樣在layout目錄里新建布局文件( 例: activity_main.xml )

2. 在里面書寫布局屬性(例如: 新建一個TextView )

    <TextView        
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/black"
        android:padding="5dp"
        android:text="@string/app_name"
        android:textColor="@android:color/white"
        android:textSize="18sp" />
   

5.0以下效果

可以看出5.0以上的效果除了兩者的ActionBar有所不同，其余沒有明顯差別

5.0以上的效果

現在給TextView加上Material Design新增的視圖靜態高度屬性: elevation (ps:還要一個動畫用的動態高度轉換)

android:elevation="20dp"

加上之后，AS就會提示我們該屬性只能使用在5.0(Api 21)系統之上

Material新增的視圖的高度屬性

于是按著AS的提示來，Ctrl+Enter,在layout-v21文件夾復寫該布局文件，然后把

    android:elevation="20dp"

移到v-21布局文件里

復寫之后

為了看出加了elevation之后的效果，我們還需要給TextView加個簡單的背景輪廓(shape).

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="5dp" />
    <solid android:color="@android:color/black" />
</shape>

兩者布局

//layout文件夾中 activity_main
<TextView
    android:id="@+id/tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/tv_back"
    android:padding="5dp"
    android:text="@string/app_name"
    android:textColor="@android:color/white"
    android:textSize="18sp" />

//layout-v21文件夾中 activity_main
<TextView
    android:id="@+id/tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/tv_back"
    android:elevation="15dp"
    android:padding="5dp"
    android:text="@string/app_name"
    android:textColor="@android:color/white"
    android:textSize="18sp" />

其實我們應該按照官方的將兩者重復的屬性寫到樣式(style)里復用,這里暫時就不了^_

比較兩者

5.0以上

5.0以下

現在就能看出兩者的區別了

使用V7支持庫

前面的方式都沒有使用V7支持庫，在v-21文件夾（style和layout）中復寫只是為了讓應用能在5.0以下和5.0以上的系統正常運行，所以材料設計都只能顯示在5.0以上的系統

//v7包Gradle依賴
compile 'com.android.support:appcompat-v7:21.0.+'

官方的V7包給下面這些組件提供了Material Design 風格，讓材料設計在5.0以下的系統也能顯示

• EditText
• Spinner
• CheckBox
• RadioButton
• SwitchCompat
• CheckedTextView

這些控件都在android.support.v7.widget.AppCompatView包下

//例如EditText
<android.support.v7.widget.AppCompatEditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"        
    android:hint="@string/app_name"
    android:padding="5dp"   
    android:textSize="18sp" />

同時要在我們的主題(style)里加上這段顏色配置，因為AppCompatTextView默認是從colorAccent著色的

<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/my_red</item>

效果圖

5.0以下的AppCompatEditText

5.0以下的EditText

以上只是小生簡單的使用了Material Design。主要是為了熟悉要在應用中使用材料設計，需要注意的地方和正確方法。后面繼續學習更加好看的材料設計^_