Android Material Design--TextInputLayout

 

1. 簡介

官網開篇：

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

Also supports showing an error via setErrorEnabled(boolean) and setError(CharSequence), and a character counter via setCounterEnabled(boolean).

Password visibility toggling is also supported via the setPasswordVisibilityToggleEnabled(boolean) API and related attribute. If enabled, a button is displayed to toggle between the password being displayed as plain-text or disguised, when your EditText is set to display a password.

Note: When using the password toggle functionality, the 'end' compound drawable of the EditText will be overridden while the toggle is enabled. To ensure that any existing drawables are restored correctly, you should set those compound drawables relatively (start/end), opposed to absolutely (left/right).

大致意思：

將布局控件TextInputLayout套在編輯框TextInputEditText或EditText外，當用戶編輯時會把指定的hint（無輸入時的提示信息）內容上浮顯示為標題，支持計數、錯誤及密碼可見控制圖標等屬性的設置。

詳細介紹和用使用案例建議前往官網瀏覽，畢竟越沒有經過加工的信息越接近真相，畢竟寫文章是為了自我總結和拋磚引玉，而不是寫教程。

用戶名和密碼常見的輸入樣式有以下兩種（其他還有很多）：

     

而利用Material Design的TextInputLayout可以輕松地實現下面這種效果：

只需給TextInputLayout設置好hint屬性，那么當其包含的TextInputEditText或EditText處於編輯狀態時，hint內容會上浮作為標題顯示，如圖中的Username。

從圖中還可以看到，分別對Username的最大字數限制，Password的是否可見屬性進行了設置，其實Email同樣設置了格式檢測，下面就通過具體的代碼來看看用TextInputLayout實現這些功能的便捷與高效。

 

2. 實例

項目代碼放在Github上，感興趣的朋友自行下載。

先在module build.gradle文件中添加dependencies項：

compile 'com.android.support:design:25.1.0'

 Username的布局代碼：

<android.support.design.widget.TextInputLayout  2 　　android:id="@+id/til_username"
　　style="@style/TextInputLayoutStyle"
　　app:errorEnabled="true"
　　app:counterEnabled="true"
　　app:counterMaxLength="10"
　　app:hintTextAppearance="@style/HintAppearance"
　　app:errorTextAppearance="@style/TextErrorAppearance"
　　app:counterOverflowTextAppearance="@style/HintErrorAppearance">

　　<android.support.design.widget.TextInputEditText 12 　　　　android:id="@+id/et_username"
　　　　android:hint="@string/username"
　　　　style="@style/EditTextStyle" />

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

其中用到的五個style定義：

<style name="TextInputLayoutStyle">
　　<item name="android:layout_width">match_parent</item>
　　<item name="android:layout_height">wrap_content</item>
　　<item name="android:layout_marginTop">@dimen/edit_top_margin</item>
</style>

<style name="EditTextStyle">
　　<item name="android:layout_width">match_parent</item>
　　<item name="android:layout_height">wrap_content</item>
　　<item name="android:textSize">@dimen/edit_content_size</item>
　　<item name="android:textColor">@color/colorEditContent</item>
</style>

<style name="HintAppearance" parent="TextAppearance.AppCompat">
　　<item name="android:textSize">@dimen/edit_hint_size</item>
　　<item name="android:textColor">@color/colorAccent</item>
</style>

<style name="HintErrorAppearance" parent="TextAppearance.AppCompat">
　　<item name="android:textSize">@dimen/edit_hint_size</item>
　　<item name="android:textColor">@color/colorHintError</item>
　　<item name="textColorError">@color/colorHintError</item>
</style>

<style name="TextErrorAppearance" parent="TextAppearance.AppCompat">
　　<item name="android:textSize">@dimen/edit_hint_size</item>
　　<item name="android:textColor">@color/colorTextError</item>
　　<item name="textColorError">@color/colorTextError</item>
</style>

首先看一下字數限制的文本樣式設置：

app:counterEnabled="true"
app:counterMaxLength="10"
app:counterOverflowTextAppearance="@style/HintErrorAppearance"

Username設置了最大字數限制--10，當輸入字數超過上限之后就會將hint標題顯示為counterOverflowTextAppearance樣式。

顏色設置給出截圖，可以直觀地看到代碼對應的顏色：

colorTextError對應編輯框左下角的錯誤提示，colorHintError對應右下角的字數限制和左上角的hint標題。

從運行結果可以看出，設置了字數限制后，Design會自動在編輯框右下角顯示最大字數和當前輸入字數（隨着輸入情況實時變化）。當字數在限制范圍內時，hint樣式為hintTextAppearance；字數超過之后，hint樣式為counterOverflowTextAppearance。當然，如果沒有設置counterOverflowTextAppearance屬性，Design一般會將錯誤文本顯示為紅色，至於不同設備不同主題會有些差別。

接下來看看編輯框左下角的錯誤提示是怎么設置的，布局代碼：

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

還需要在Java代碼中指定顯示的時機和文本：

private TextInputLayout mTILUsername;  2 private EditText mETUsername;  3 ...  4 mETUsername.addTextChangedListener(new TextWatcher() {  5  @Override  6     public void beforeTextChanged(CharSequence s, int start, int count, int after) {}  7 
 @Override  9     public void onTextChanged(CharSequence s, int start, int before, int count) { 10         if (s.length() > 10) { 11             mTILUsername.setErrorEnabled(true); 12             mTILUsername.setError("Username max length is 10."); 13         } else { 14             mTILUsername.setErrorEnabled(false); 15  } 16  } 17 
 @Override 19     public void afterTextChanged(Editable s) {} 20 });

給編輯框mETUsername設置了編輯狀態改變監聽器，參數為TextWatcher匿名類，實現onTextChanged方法。當字數超過限制之后將錯誤屬性enable，同時設置錯誤提示內容；否則，就將錯誤屬性disable。

測試后發現，布局代碼中的app:errorEnabled="true"和Java中的mTILUsername.setErrorEnabled(true)是可以不設置的，調用setError方法就夠了。

從截圖中可以看出，編輯框下方那條線的顏色是跟隨errorTextAppearance樣式變化的，而不是counterOverflowTextAppearance。

再來看看郵箱格式的檢測，這里是利用正則表達式，而且是比較基礎的：

private static final Pattern EMAIL_PATTERN = Pattern.compile( 2             "\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*");

if (!EMAIL_PATTERN.matcher(s.toString().trim()).matches()) { 2     mTILEmail.setErrorEnabled(true); 3     mTILEmail.setError("Please input correct email."); 4 } else { 5     mTILEmail.setErrorEnabled(false); 6 }

matches方法返回false時表示輸入內容不匹配郵箱格式，進而給出錯誤提示信息。

錯誤的情況上面已經給出了，正確的情況見下圖：

密碼編輯框右邊帶有一個類似眼睛的圖標，這就是內容是否可見的開關。布局代碼如下：

<android.support.design.widget.TextInputLayout  2     android:id="@+id/til_password"
    android:layout_below="@id/til_email"
    style="@style/TextInputLayoutStyle"
    app:errorEnabled="true"
    app:passwordToggleEnabled="true"
    app:hintTextAppearance="@style/HintAppearance"
    app:errorTextAppearance="@style/TextErrorAppearance">

    <android.support.design.widget.TextInputEditText 11         android:id="@+id/et_password"
        android:hint="@string/password"
        android:inputType="textPassword"
        style="@style/EditTextStyle" />

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

設置passwordToggleEnabled為true，inputType為textPassword，默認情況下輸入內容是以點的形式顯示。點擊圖標之后便會顯示明文，再點一下又會顯示密文，如此反復切換。明文形式如下：

 

3. 總結

上面通過例子簡單地描述了TextInputLayout的基本用法，官網上的介紹還包含了其他的一些方法，能實現更多的效果。Android Design中文學習資料點這里。