1.什麼是Material Designer

android 自推出以來，一直沒有固定的風格，於是國內的產品與設計師大量的抄襲了IOS的風格，但是有些風格是不應該在android 手機上面出現的，因此android開發者被抄襲風格弄的苦不堪言。

為了統一風格，Google I/O 2014 推出了一個Material Designer的風格，建議android應用都按照這個風格進行開發，Material Designer 除了有一部分是UI的規定外，也提供了很多絢麗的效果.

Material Design 有以下的特點：

1. 實體感的操作
2. 鮮明、形象的視覺效果
3. 有意義的動畫效果

Material Design 樣式

系統也為Material Design提供了一系列的樣式，程式碼如下：

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

樣子如下：

5.0以後的版本(也就是21版本號)我們可以根據樣式內部的顏色值進行修改相應的內容的顏色。

我們可以在style檔案中修改需要顯示的樣式

 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
     <item name="colorPrimary">@color/colorPrimary</item>
     <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
     <item name="colorAccent">@color/colorAccent</item>
 </style>
 

除了上面的方式以外，我們還有其他的方式來修改對應的顏色，注意以下的方法只在5.0以上的手機上能夠生效

Window window = getWindow();
window.setStatusBarColor(ContextCompat.getColor(this, R.color.colorBlue));
window.setNavigationBarColor(ContextCompat.getColor(this, R.color.colorGreen));

2.檢視高度和陰影

我們在之前的開發中，知道了android 的座標系，螢幕的左上角是座標系的原點，代表 x y 分別是(0,0).在21版本以後，所有的控制元件還多了一個屬性z。我們看看下圖。

從上面的程式碼中可以看出圓形控制元件的層次比白色背景要高一些，比黑色控制元件要低一些，那麼如何設定一個控制元件的高度呢？只需要在控制元件的佈局檔案中新增屬性：

android:translationZ

除此之外android還提供了一個api用來設定控制元件的陰影，注意使用這個api要提供一個背景給控制元件才能生效。注意，該高度和陰影必須是21版本里面並且該陰影只有當控制元件有了背景顏色才有用

android:elevation

注意這些api都是21版本以上的才有，注意好版本適配.

或者為控制元件新增程式碼：

ImageView iv= (ImageView) findViewById(R.id.iv);
//如果版本大於等於5.0版本 則可以新增屬性
if (Build.VERSION.SDK_INT>=21){
    iv.setTranslationZ(30);
    iv.setElevation(30);
}

3.波紋觸控反饋

android 在5.0以後提供了一個觸控反饋的效果給開發者，開發者能夠很輕鬆的實現當用戶點選後即出現一個向外擴充套件的圓形波紋反饋。觸控反饋的配置分成兩組：

1. 波紋無邊界的 ?android:attr/selectableItemBackground
2. 波紋帶邊界的 ?android:attr/selectableItemBackgroundBorderless

程式碼開發的步驟如下：

1. 在res下建立一個layout-v21資料夾。
2. 將你想實現波紋效果的控制元件所在的佈局複製一份

3. 找到對應的控制元件，新增背景，程式碼如下：

   <ImageView
       android:id="@+id/iv"
       android:layout_width="100dp"
       android:layout_height="100dp"
       android:clickable="true"
       android:background="?android:attr/selectableItemBackground"
       android:layout_margin="10dp" />
   

注意 該效果一般用在輕色調的控制元件上配置好些

4.CardView

CardView是一種自帶圓角 陰影的容器。

如果我們需要使用這個控制元件，我們需要增加這個控制元件的依賴。在app專案下的,build.gradle新增依賴，注意CarView的版本必須和v7包的版本一致。如下圖：

使用的方法很簡單,首先需要在佈局檔案中使用CardView：

 <android.support.v7.widget.CardView
     android:layout_width="300dp"
     android:layout_height="300dp">

 </android.support.v7.widget.CardView>

CardView有以下特殊的屬性:(需要匯入自定義名稱空間 xmlns:app=”http://schemas.android.com/apk/res-auto”)

app:cardElevation：控制元件的陰影大小
app:cardCornerRadius：控制元件的圓角大小
app:cardBackgroundColor：控制元件的背景顏色

圖示如下：

5.TextInputLayout

android 在舊版本就提供了輸入控制元件EditText，輸入控制元件能夠很好的滿足我們的需求，但是為了提供更加友善的介面.我們可以使用TextInputLayout可以作為EditText的父控制元件。在需要提示資訊 顯示輸入字數長度 錯誤等方面做了很大的處理.

1. 在app的build.gradle新增依賴：

1. 在layout-v21中建立佈局。在輸入框外面巢狀一層，程式碼如下：

3.效果圖如下：

4.當用戶輸入失敗的時候，我們也可以給他設定錯誤的提示，如下：

5.效果圖如下：

6.如果你覺得提示的文字樣式不符合你的需求，可以再樣式檔案中修改，如下：

<style name="TextLabel" parent="TextAppearance.Design.Hint">
    <item name="android:textSize">33sp</item>
</style>

<style name="myError" parent="TextAppearance.Design.Error">
    <item name="android:textSize">33sp</item>
    <item name="android:textColor">@android:color/holo_red_dark</item>
</style>

6.NestedScrollView

android 在舊版本提供了一個控制元件ScrollView ,能夠將內部的很長的控制元件滾動顯示，但是我們在實際開發中難免會碰到這樣的需求，如在一個ScrollView
中，增加一個能夠滾動的區域。或在一個列表控制元件（ListView RecyerView）中，除了能夠上下滾動外，也可以對內部的某個滾動，現在Material Design提供了一個進階版本的ScrollView給我們使用。

如下圖，我們想將列表中每個item變成一個個可以內部滑動的控制元件，圖如下：

此時，只需要對每個item佈局實現如下的程式碼即可：

7.FloatActionButton

android 在 Material Designer 中提供了一種漂浮的按鈕，我們可以使用這個控制元件開發出很酷炫的效果,如下圖：

該控制元件也是design包下的提供的一個元件，具體用法如下：

常用的屬性：

android:src 中間的icon
app:backgroundTint 背景的顏色
app:rippleColor 點選時的顏色
app:borderWidth 應該設定為0，否則會在4.1會顯示為正方形，而在5.0以後沒有陰影效果
app:fabSize 控制元件的大小，有兩個值 normal和mini
app:layout_anchor 設定FloatActionButton相對於那個控制元件
app:elevation 預設顯示的陰影的大小

需要注意的是 FloatingActionButton有些版本預設是無法點選的 所以點選效果無效，請設定android:clickable=”true”屬性

8.ToolBar

google在舊版本推出過一個控制元件ActionBar,但是ActionBarzhi只能固定在頂部，不能靈活使用，所以google推出了一個ToolBar來替換ActionBar.

我們可以配合一些新的控制元件實現很多酷炫的效果。下圖是ToolBar內部顯示的內容.

9.Snackbar

Toast是我們在日常開發中經常使用的控制元件，簡單易用，但是現在有這樣的需求，需要與Toast互動，比如登陸失敗了，彈出Toast後，點選Toast能夠重新登陸，但是就目前的Toast來說是無法解決這種問題的。因此google提供了一個新的控制元件給開發者,也就是Snackbar。Snackbar除了有Toast的功能外，還具備了Toast不具備的互動功能。

1 生成一個 Snackbar，該靜態方法類似toast的makeText()

//傳入某一個控制元件 它會找到該控制元件的最外層容器 在該容器中新增一個snackbar
//提示的長度 LENGTH_LONG2LENGTH_SHORT2LENGTH_INDEFINITE
make(View view, CharSequence text, int duration)

2 設定Snackbar的點選方法

setAction(CharSequence text, final OnClickListener listener)

3 顯示

show()

具體的程式碼圖如下：