我儘量不打錯別字，用詞準確，不造成閱讀障礙。

最近打算整理一下Google的Material Design風格的控制元件，雖然這個東西已經出來很長時間了，之前也寫過很多次MD的控制元件，但是一直涉入不深，感覺市面上的APP中，大量級的APP一般不用MD，網易系的用的多一些，小量級的APP中的部分，甚至是個人開發者，用的多一些。

本篇主要是講解控制元件部分，佈局部分的內容下一篇講，本篇文章涉及：TextInputLayout、CardView、SwitchCompat、SnackBar、FloatingActionButton

TextInputLayout

從名字上看這個屬於佈局了，實際也的確是佈局，繼承自LinearLayout，但是使用中感覺知識點不多，當做控制元件理解也是可以的，也是我接觸的第一個MD佈局。

最簡單的效果：

沒什麼好描述的，一眼就看明白了。
程式碼：

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:
 
hint="userName" />
</android.support.design.widget.TextInputLayout>

TextInputLayout包裹EditText，注意：TextInputLayout只能有一個子控制元件，要不然報錯：

改變下劃線顏色:
在當前佈局的根佈局處設定style:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:
 
tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    style="@style/text_inp"
    tools:context="com.clone.surpassli.mddemo.TextInputLayoutActivity">
  ......
</LinearLayout>

style中設定屬性：

<style name="text_inp">
        <item name="android:colorAccent">#00ff00</item>
</style>

還可以在activity的佈局style裡設定這個屬性，要不然就在AppTheme設定；

改變hint文字選中後的樣式：
TextInputLayout設定屬性：

app:hintTextAppearance="@style/text_input_layout"

<style name="text_input_layout" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#000000</item>
</style>

效果：

password選中時變成了黑色，大小為16sp。

加上字數統計及樣式：
TextInputLayout設定屬性：

app:counterEnabled="true"      //設定是否顯示字數統計
app:counterMaxLength="15"      //設定字數統計的最大值
app:counterOverflowTextAppearance="@style/counterOverFlowAppearance"   //設定超出最大值後的樣式
app:counterTextAppearance="@style/counterAppearance"                   //設定字數統計的樣式

<style name="counterOverFlowAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#000</item>
</style>

<style name="counterAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#ff00</item>
</style>

效果：

正常字數統計是紅色的，當超過字數的時候就變為黑色了，此時下劃線也變為了黑色。

加上錯誤提示及樣式：

app:errorEnabled="true"
app:errorTextAppearance="@style/errorAppearance"

<style name="errorAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#ff00</item>
</style>

til_til.setError("超出字數限制");

效果：

超出字數限制後提示文字會出來，此時下劃線的顏色變為了紅色，與錯誤提示文字顏色相同。
簡化版
你可能覺得這樣很麻煩，有相對簡單的方法，在根佈局的style設定以下屬性：

<style name="text_inp">
        <item name="android:colorAccent">#00ff00</item>              //不起作用       
        <item name="android:textColorHint">#674ea7</item>            //預設hint顏色
        <item name="colorControlNormal">#000</item>                  //不起作用
        <item name="colorControlActivated">#ff0</item>               //獲取焦點的時候的顏色
        <item name="textColorError">#0000ff</item>                   //錯誤提示的顏色
        <item name="colorControlHighlight">@color/colorAccent</item> //不起作用
    </style>

正如註釋所寫的，有些屬性不起作用，而且下劃線的顏色改變與錯誤提示、是否獲取焦點等還有聯絡，所以總體感覺不如單獨寫方便理解、控制、修改，還可以只寫一個style供所有屬性呼叫。
設計要求：
TextInputLayout是有設計要求的，也許公司的設計與MD的要求不一樣，但是你還是應該看一看，儘量按照Google來。

• 輸入框點選區域高度至少48dp，但橫線並不在點選區域底部，還有8dp距離。
  
• 右下角可以加入字數統計。字數統計不要預設顯示，字數接近上限時在顯示出來。
• 同時有多個錯誤提示時，螢幕頂部應有一個全域性的錯誤提示通知。
• 輸入框儘量帶有自動補全功能。

CardView

我最喜歡的控制元件，很能提現MD風格。

可以設定圓角弧度，還可以設定z軸高度，顯示陰影效果。CardView是個Group，繼承自FrameLayout。

 <android.support.v7.widget.CardView
        android:layout_width="300dp"
        android:layout_height="200dp"
        app:cardBackgroundColor="@color/colorPrimaryDark"
        app:cardCornerRadius="10dp"
        app:contentPadding="20dp"
        app:cardElevation="23dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="感謝大家瀏覽我的部落格,有什麼問題請留言"
            android:textColor="#ffffff" />
 </android.support.v7.widget.CardView>

CardView的屬性設定都是"app:"開頭的，如果使用"android:"開頭的是沒有效果的。

• app:cardBackgroundColor：設定背景色。
• app:cardCornerRadius：設定角的弧度，MD設計要求統一為2dp，但是2dp感官上不太明顯。
• app:contentPadding：內容padding。
• app:cardElevation：設定z軸高度。

設計要求：

• 圓角弧度統一要求2dp。
• 卡片最多包涵兩塊操作區域，輔助操作區至多包含兩個操作項，更多操作需要使用下拉選單。其餘部分都是主操作區。

SwitchCompat

選項開關，這個是控制元件View。

一般程式碼設定的比較多：

mSwitchCompat.setError("錯誤");      //設定錯誤資訊的顯示
mSwitchCompat.setTextOff("off");     //設定關閉時的文字
mSwitchCompat.setTextOn("on");       //設定開啟時的文字
mSwitchCompat.setShowText(true);     //設定是否顯示文字
mSwitchCompat.setSwitchPadding(20);  //設定文字與開關的間隙
mSwitchCompat.setChecked(true);      //設定是否是選中(開啟)狀態
mSwitchCompat.setOnCheckedChangeListener();  //設定開啟關閉監聽

如果設定顏色，請在activity的style中設定"colorAccent"的顏色。

SnackBar

SnackBar類似於Toast，都是對使用者的提醒和解釋說明等等。

最普通的SnackBar，只有文字說明，複雜的SnackBar可以帶按鈕及事件。

Snackbar.make(v, "謝謝瀏覽我的部落格", Snackbar.LENGTH_SHORT).show();  //和Toast很像

如果有FloatingActionButton之類的東西的話，SnackBar是不允許遮擋的，控制元件應隨之上移和下移。

複雜一點的SnackBar，可以增加點選:

Snackbar.make(v, "謝謝瀏覽我的部落格", Snackbar.LENGTH_SHORT).setAction("action", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(SwitchCompatActivity.this, "snack bar ", Toast.LENGTH_SHORT).show();
                    }
                }).show();

SnackBar的樣式可以自定義，參考Toast的方法，規則如下：

設計要求：

• SnackBar至多包含一個操作項，不能包含圖示，不能出現一個以上的SnackBar。

FloatingActionButton

一般懸浮於手機螢幕右下角的一個按鈕，當然也有放在螢幕中上位置的。

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />

設定圖片源，背景色隨主題的colorAccent變化，比較簡單，但是設計上有些學問：

• 建議只用一個懸浮按鈕。
• 懸浮按鈕可以貼在紙片邊緣或者接縫處，但不要貼在對話方塊、側邊抽屜和選單的邊緣。
• 懸浮按鈕不能被其它元素蓋住，也不能擋住其它元素。
• 列表滾動至底部時，懸浮按鈕應該隱藏，防止它擋住列表項。
• 懸浮按鈕的位置不能隨意擺放，可以貼著左右兩邊的對齊基線。
• 懸浮按鈕通常觸發正向的操作，新增、建立、收藏之類。不能觸發負面、破壞性或不重要的操作，也不應該有數字角標。
• 懸浮按鈕有兩種尺寸：56x56dp/40x40dp。