1.什麼是TextInputLayout

Layout which wraps an {@link android.widget.EditText} (or descendant) to show a floating label when the hint is hidden due to the user inputting text.

譯：一個佈局包裹了EditText（或者EditText的子類），在使用者輸入文字的時候顯示一個浮動的提示標籤。

以上是原始碼對TextInputLayout的解釋，從上面我們不僅知道了TextInputLayout的

作用：在使用者輸入文字的時候顯示一個浮動的提示標籤，

而且知道了：

TextInputLayout內部必須包含一個EditText(或者EditText的子類)

2.為什麼要用TextInputLayout

一言不合就上圖：

傳統的EditText，在使用者輸入資訊的時，hint（提示）會自動消失，就如上圖的中的第一行所示，這時候使用者可能會忘記自己需要輸入的內容是什麼了，得刪除所有的輸入內容才可以看到hint的提示內容，這樣的使用者體驗不太好。

而圖二在使用者輸入的時候，hint會預設彈到上方，並且攜帶一個動畫效果。它僅僅只是在EditText外包裹了一層TextInputLayout，然而就是這樣一個小小的改動不僅提高了與使用者互動的體驗，而且解決了hint輸入後消失的問題，唯一的不好就是“佔地面積”大了一點，當然這一點點小瑕疵還是可以忽略的。

3.TextInputLayout的基本使用

XML佈局：

<android.support.design.widget.TextInputLayout

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:hint="請輸入您的手機號">

         < EditText

           android:layout_width="match_parent"

           android:layout_height="wrap_content"/>

</android.support.design.widget.TextInputLayout>

是不是感覺很簡單，就是包裹了一層而已。接下來看看它給我們提供了哪些Api ↓↓↓

4.TextInputLayout的基本屬性

· 4.1.設定提示資訊，這個不僅可以設定在EditText還可以直接設定在TextInputLayout

android:hint="請輸入您的手機號"

總感覺設定在TextInputLayout上逼格比較高，其實並沒有什麼差別。

· 4.2.設定hint的相關屬性（由於TextInputLayout也是一個自定義控制元件，所以以app開頭,並且需要給予名稱空間：xmlns:app="http://schemas.android.com/apk/res-auto"）

app:hintAnimationEnabled="true"//設定是否可以使用動畫，預設是true

app:hintEnabled="true"//設定是否可以使用hint屬性，預設是true

app:hintTextAppearance="@style/MyStyle"//設定hint的文字屬性，改變hint文字的大小顏色等屬性

附上MyStyle的程式碼：

<style name="MyStyle">

            <item name="android:textColor">#00FFFF</item>

            <item name="android:textSize">12sp</item>

</style>

效果圖：

一開始感覺沒啥作用啊，是不是這個屬性沒有效果，結果點選了以後發現，hintTextAppearance設定的是：

上彈以後的文字的顯示---（實踐檢驗真理）

我們知道hint的文字大小和text的一樣，如果你非要設定hint的字型大小，請點開這個連結簡單粗暴解決EditText的hint和text文字大小

· 4.3 設定Counter（計數器）的相關屬性

app:counterEnabled="true"//設定是否可以開啟計數器，預設是false

app:counterOverflowTextAppearance="@style/MyStyle2"//設定計算器越位後的文字顏色和大小

app:counterTextAppearance="@style/MyStyle"//設定正常情況下的計數器文字顏色和大小

app:counterMaxLength="11"//設定計算器的最大字數限制

這裡MyStyle是設定文字顏色為藍色，大小為16sp，MyStyle2是設定文字顏色為紅色，大小為20sp，下面看看效果：

這個功能可以很好的告訴使用者目前輸入的文字位數，已經告訴使用者已經超標請不要在輸入了。

· 4.4 設定錯誤提示的相關屬性

app:errorEnabled="true"//是否允許錯誤提示

app:errorTextAppearance="@style/MyStyle2"//錯誤提示的文字大小和顏色

在程式碼中設定：

textInputLayout.setError("只是展示下錯誤的顯示樣式");

et.setError("只是展示下錯誤的顯示樣式");

效果如圖：

原本的EditText是顯示在右側，樣式是一個感嘆號和一個文字框，而被TextInputLayout包裹後，顯示在了輸入框的下方。（原諒我的圖大得有點嚇人，用Android Studio直接截得）。

5.相關連結

歡迎大家推薦有關TextInputLayout的相關知識 -。-