版權宣告：
本賬號釋出文章均來自公眾號，承香墨影（cxmyDev），版權歸承香墨影所有。
未經允許，不得轉載。
一、前言
Design Support Library 是 Google 釋出的一個全新的相容函式庫，它可以在 Android 2.1 （Api level 7）及以上的裝置中，實現 Material Design 的效果，這個函式庫同時也提供了一系列控制元件。今天介紹的 TextInputLayout（以下簡稱 TIL） 就是其中之一。
在使用 Design Support Library 之前，需要在 build.gradle 檔案中，新增依賴，這裡使用的是 25.3.0。
compile 'com.android.support:design:25.3.0'
二、什麼是TextInputLayout？
TIL 繼承自 LinearLayout ，可以用它實現 Material Design 效果的一個表單輸入框。
類似如下效果：
從實現的功能可以看到，它在原本的 EditText 的基礎之上，新增了一些表單錄入必要的功能：
- 輸入提示，不同於原有 EditText 的 hint 屬性，它可以在輸入的時候，將提示的字元，通過一個動態的效果，顯示在 EditText 的上面。
- 錯誤提示，在有錯誤的資訊錄入的時候，可以通過一個友善的方式，將錯誤提示給使用者。
- 密碼是否可見標誌，這個常見於密碼輸入的時候，輸入內容是否可用。
- 輸入的字元數量和最大輸入限制並且顯示。
TIL 其實就是我們對錶單錄入的一個基本要求，例如實現一個簡單的登入頁面，完全是可以滿足我們的需求的，並且它還屬於 Material Design 的效果規範。
這些效果，我們只需要使用 TIL 的屬性和方法，即可完成這些功能，而在之前我們都需要開發者對其單獨開發。
三、使用TextInputLayout
TIL 從名字上看也能猜到，它是一個 Layout ，並且是繼承自 LinearLayout ，但是它只能容納一個 EditText，而實際上從它設計的角度來看，也不推薦再在其內包含其它的 View 了，因為這樣會破壞 TIL 原本的設計。
在使用過程中，是可以不用為 TIL 中的 EditText 單獨設定 id 進行操作的，大部分操作都是可以通過 TIL 自身的 API 進行操作的，如果是在需要操作 EditText 物件，TIL 也提供了對應的 getEditText() 方法，來獲取其內的 EditView 物件。
這樣就完成了 TIL 最基本的功能，接下來讓我們把 TIL 的特性拆分出來，來看看實現個別功能需要使用到的屬性。
1、使用 hint 效果
TIL 中，可以通過使用 hint 對輸入的內容進行提示，當其內部的 EditText 獲取到焦點的時候，將 hint 的內容上移。
在 TIL 中，使用 hint 效果，相關的屬性和方法：
- android:hint ：設定 hint。
- app:hintEnabled：設定 hint 是否可見，預設為 true。
- app:hintAnimationEnabled：設定 hint 上移的時候是否有動畫，預設為 true。
- app:hintTextAppearance：設定 hint 的樣式。
- setHint()：設定 hint 。
- setHintAnimationEnabled()：設定 hint 是否可見。
- isHintAnimationEnabled()：判斷當前 hint 的可見狀態。
最簡單的用法，就是隻使用 android:hint 屬性設定一次 hint 即可，但是也需要了解一下如何修改它的其他屬性。
2、使用錯誤提示
TIL 中，錯誤一般都是在邏輯程式碼裡，通過對輸入資料的校驗，來進行提示，但是同時也可以使用屬性設定錯誤提示的樣式。
在 TIL 中，使用錯誤提示的相關屬性和方法：
- app:errorEnabled：是否顯示錯誤提示。
- app:errorTextAppearance：設定錯誤提示的樣式。
- setErrorEnabled()：設定錯誤是否可見。
- setErrorTextAppearance()：設定錯誤提示的樣式。
- isErrorEnabled()：判斷當前是否顯示錯誤提示。
- setError()：設定錯誤提示的錯誤資訊。
3、使用密碼開關
TIL 在內部 EditText 的 android:inputType 為 xxxPassword 的時候，可以在 TIL 配置一個圖示按鈕，用於開啟和關閉是否顯示密碼內容。
使用密碼開關功能，使用到的相關屬性和方法：
- app:passwordToggleEnabled：設定 password 開關是否可用。
- app:passwordToggleTint：設定 password 開關圖示的 tint 著色。
- app:passwordToggleTintMode：設定 password tint 的模式。
- app:passwordToggleDrawable：設定 password 開關圖示。
- setPasswordVisibilityToggleDrawable：設定 password 開關圖示。
- isPasswordVisibilityToggleEnabled：設定 password 開關圖示 是否可見。
- setPasswordVisibilityToggleTintList：設定 password 開關圖示的 tint。
- setPasswordVisibilityToggleTintMode：設定 password 開關圖示的 tint 模式。
- getPasswordVisibilityToggleDrawable：設定 password 開關圖示。
一般來說，我們使用預設的眼睛樣式的圖示即可。如果一定需要修改，可以參見 Widget.Design.TextInputLayout 中的設定進行修改。
4、使用輸入限制長度提示
TIL 也可以設定當前輸入的字元長度，以及限定的字元長度。
相關屬性和方法：
- app:counterEnabled：設定輸入限制長度是否顯示。
- app:counterMaxLength：設定最大輸入字元長度。
- app:counterEnabled：設定輸入字元提示是否顯示。
- app:counterTextAppearance：設定輸入字元長度提示的樣式。
- setCounterEnabled()：設定長度顯示是否顯示。
可以單獨使用 counterEnabled ，也可以配合 counterMaxLength 使用。
TIL 對輸入支付長度的限制提示，如果超過 counterMaxLength 的限制，只是會變色提示，但是並不會讓阻止使用者繼續輸入。
5、修改樣式
預設的樣式其實已經夠我們使用了，除了使用對應屬性的 xxxTextAppearance 對其最終使用的 TextView 進行設定樣式外。還可以在style 中，統一設定，具體每個屬性的格式，可以參考Widget.Design.TextInputLayout 中的設定。
四、TextInputLayout細節探究
之前就說過，雖然 MD 的設計很酷炫，但是實際上，我們在學習它的使用過程中，有一些它設計上的優點，值得我們學習，這才是精髓部分。
看看上面介紹的 TIL 的一些特性的設定來看看他們具體是如何實現的。
首先先讓我們看看最終顯示出來的佈局結構。
可以看到，雖然在我們設定的佈局中，看著 EditText 是 TextInputLayot 的直接子 View ，但是從原始碼上看，在 TIL 中，會使用一個 FrameLayout 型別的 mInputFrame，將其新增到 TIL 中。
而真正遇到 EditText 的時候，卻將其攔截下來，再新增到這個 mInputFrame 佈局中。
那麼接下來看看 hint 屬性的效果是如何實現的。
從佈局結構上看，hint 的文字，是直接 draw 到 TIL 上的，所以它並不是和其他效果一樣是用 TextView 堆起來的。
繼續原始碼中找蛛絲馬跡。
可以看到，如果 hint 需要被顯示，將會把具體的實現，託管給 mCollapsingTextHelper 來處理 hint 效果的邏輯，這裡就不繼續跟下去了，有興趣的可以找出來看看。
從上面佈局結構可以看到，除了 mInputFrame 之外，還有一個 LinearLayout 的佈局，它用於承載 mErrorView(錯誤提示) 和 mCounterView（輸入計數）。
這個 LinearLayout 就是 mIndicatorArea。當 mErrorView 被使用完之後，也有對應的程式碼邏輯將其從 mIndicatorArea 中移除掉。
到這裡，TIL 的關鍵設計點就已經清楚了，它不像外部看到的佈局那樣，直接使用 EditText ，而是對其進行多個佈局的包裝，讓不同的功能單獨拆分出來去實現。
五、結語
到這裡就結束了，之後再繼續介紹 Support Design 裡的其它控制元件。
