須要輸入框？試試TextInputLayout

版權聲明：

本帳號發佈文章均來自公衆號，承香墨影（cxmyDev），版權歸承香墨影全部。

未經容許，不得轉載。

1、前言

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'

2、什麼是TextInputLayout？

TIL 繼承自 LinearLayout ，能夠用它實現 Material Design 效果的一個表單輸入框。

相似以下效果：

til-demo.gif

從實現的功能能夠看到，它在本來的 EditText 的基礎之上，添加了一些表單錄入必要的功能：

1. 輸入提示，不一樣於原有 EditText 的 hint 屬性，它能夠在輸入的時候，將提示的字符，經過一個動態的效果，顯示在 EditText 的上面。
2. 錯誤提示，在有錯誤的信息錄入的時候，能夠經過一個友善的方式，將錯誤提示給用戶。
3. 密碼是否可見標誌，這個常見於密碼輸入的時候，輸入內容是否可用。
4. 輸入的字符數量和最大輸入限制而且顯示。

TIL 其實就是咱們對錶單錄入的一個基本要求，例如實現一個簡單的登陸頁面，徹底是能夠知足咱們的需求的，而且它還屬於 Material Design 的效果規範。

這些效果，咱們只須要使用 TIL 的屬性和方法，便可完成這些功能，而在以前咱們都須要開發者對其單獨開發。

3、使用TextInputLayout

TIL 從名字上看也能猜到，它是一個 Layout ，而且是繼承自 LinearLayout ，可是它只能容納一個 EditText，而實際上從它設計的角度來看，也不推薦再在其內包含其它的 View 了，由於這樣會破壞 TIL 本來的設計。

til-layout.png

在使用過程當中，是能夠不用爲 TIL 中的 EditText 單獨設定 id 進行操做的，大部分操做都是能夠經過 TIL 自身的 API 進行操做的，若是是在須要操做 EditText 對象，TIL 也提供了對應的 getEditText() 方法，來獲取其內的 EditView 對象。

這樣就完成了 TIL 最基本的功能，接下來讓咱們把 TIL 的特性拆分出來，來看看實現個別功能須要使用到的屬性。

一、使用 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 便可，可是也須要了解一下如何修改它的其餘屬性。

二、使用錯誤提示

TIL 中，錯誤通常都是在邏輯代碼裏，經過對輸入數據的校驗，來進行提示，可是同時也可使用屬性設置錯誤提示的樣式。

在 TIL 中，使用錯誤提示的相關屬性和方法：

• app:errorEnabled：是否顯示錯誤提示。
• app:errorTextAppearance：設置錯誤提示的樣式。
• setErrorEnabled()：設置錯誤是否可見。
• setErrorTextAppearance()：設置錯誤提示的樣式。
• isErrorEnabled()：判斷當前是否顯示錯誤提示。
• setError()：設置錯誤提示的錯誤信息。

三、使用密碼開關

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 中的設定進行修改。

四、使用輸入限制長度提示

TIL 也能夠設定當前輸入的字符長度，以及限定的字符長度。

相關屬性和方法：

• app:counterEnabled：設置輸入限制長度是否顯示。
• app:counterMaxLength：設置最大輸入字符長度。
• app:counterEnabled：設置輸入字符提示是否顯示。
• app:counterTextAppearance：設置輸入字符長度提示的樣式。
• setCounterEnabled()：設置長度顯示是否顯示。

能夠單獨使用 counterEnabled ，也能夠配合 counterMaxLength 使用。

TIL 對輸入支付長度的限制提示，若是超過 counterMaxLength 的限制，只是會變色提示，可是並不會讓阻止用戶繼續輸入。

五、修改樣式

默認的樣式其實已經夠咱們使用了，除了使用對應屬性的 xxxTextAppearance 對其最終使用的 TextView 進行設定樣式外。還能夠在style 中，統一設定，具體每一個屬性的格式，能夠參考Widget.Design.TextInputLayout 中的設定。

til-style.png

4、TextInputLayout細節探究

以前就說過，雖然 MD 的設計很酷炫，可是實際上，咱們在學習它的使用過程當中，有一些它設計上的優勢，值得咱們學習，這纔是精髓部分。

看看上面介紹的 TIL 的一些特性的設置來看看他們具體是如何實現的。

首先先讓咱們看看最終顯示出來的佈局結構。

til-layout1.png

能夠看到，雖然在咱們設定的佈局中，看着 EditText 是 TextInputLayot 的直接子 View ，可是從源碼上看，在 TIL 中，會使用一個 FrameLayout 類型的 mInputFrame，將其添加到 TIL 中。

til-create.png

而真正遇到 EditText 的時候，卻將其攔截下來，再添加到這個 mInputFrame 佈局中。

til-addview.png

那麼接下來看看 hint 屬性的效果是如何實現的。

從佈局結構上看，hint 的文字，是直接 draw 到 TIL 上的，因此它並非和其餘效果同樣是用 TextView 堆起來的。

繼續源碼中找蛛絲馬跡。

til-draw.png

能夠看到，若是 hint 須要被顯示，將會把具體的實現，託管給 mCollapsingTextHelper 來處理 hint 效果的邏輯，這裏就不繼續跟下去了，有興趣的能夠找出來看看。

從上面佈局結構能夠看到，除了 mInputFrame 以外，還有一個 LinearLayout 的佈局，它用於承載 mErrorView(錯誤提示) 和 mCounterView（輸入計數）。

til-a.png

這個 LinearLayout 就是 mIndicatorArea。當 mErrorView 被使用完以後，也有對應的代碼邏輯將其從 mIndicatorArea 中移除掉。

到這裏，TIL 的關鍵設計點就已經清楚了，它不像外部看到的佈局那樣，直接使用 EditText ，而是對其進行多個佈局的包裝，讓不一樣的功能單獨拆分出來去實現。

5、結語

到這裏就結束了，以後再繼續介紹 Support Design 裏的其它控件。

公衆號二維碼.jpg