Material Design 控件知識梳理(9) TextInputLayout

1、概述

TextInputLayout經過對EditText進行包裝，擴展了EditText的功能，今天，咱們就來介紹一下和TextInputLayout相關的知識：

• 輸入檢查
• 輸入計數
• 密碼隱藏

2、TextInputLayout

2.1 基本用法

• 首先，導入TextInputLayout的依賴包：

compile 'com.android.support:design:25.3.1'
複製代碼

• 以後，咱們須要將TextInputLayout做爲EditText的父容器以實現相關的功能，例以下面這樣，咱們的佈局中有兩個EditText，都使用TextInputLayout把它們包裹起來。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp">
    <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>
    <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="Password"/>
    </android.support.design.widget.TextInputLayout>
</LinearLayout>
複製代碼

當EditText得到焦點的時候，android:hint所指定的字符串會以高亮的顏色顯示在EditText的上方，而當EditText失去焦點時，hint會以灰顯的方式顯示在EditText中，這就是TextInputLayout最基本的使用，它讓咱們在輸入的過程中仍然能夠得到當前EditText所關聯的提示。

2.2 輸入檢查

除了在EditText上面的提示以外，TextInputLayout還支持在EditText下方顯示提示，這種通常用於用戶在輸入過程當中，輸入了不符合要求的文本，用來給予用戶錯誤提示。

private void checkError() {
        mPasswordEditText.addTextChangedListener(new TextWatcher() {

            @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) {}

            @Override public void onTextChanged(CharSequence s, int start, int before, int count) {}

            @Override public void afterTextChanged(Editable s) {
                int len = s.length();
                if (len > MAX_PASSWORD_LEN) {
                    mPasswordTextInput.setError("Max Password len is " + MAX_PASSWORD_LEN);
                } else {
                    mPasswordTextInput.setErrorEnabled(false);
                }
            }
        });
}
複製代碼

效果以下圖所示：

在上面的例子中，咱們經過監聽 EditText的輸入，而後在某個條件被觸發時，調用 TextInputLayout的 setError方法，以提示用戶，與 setError相關的方法有：

• public void setError(@Nullable final CharSequence error) 設置錯誤提示的文字，它會被顯示在EditText的下方
• public void setErrorTextAppearance(@StyleRes int resId) 設置錯誤提示的文字顏色和大小
• public void setErrorEnabled(boolean enabled) 設置錯誤提示是否可用

2.3 輸入計數

TextInputLayout還支持對於輸入框內字符的實時統計，並在字符數超過閾值以後，改變輸入框及提示文字的顏色。

private void checkCount() {
        mPasswordTextInput.setCounterEnabled(true);
        mPasswordTextInput.setCounterMaxLength(MAX_PASSWORD_LEN);
}
複製代碼

與輸入計數有關的方法有：

• public void setCounterEnabled(boolean enabled) 設置計數功能是否可用
• public void setCounterMaxLength(int maxLength) 設置計數功能的閾值

2.4 輸入時隱藏密碼

相信你們都有見到過這樣的輸入框，在輸入框的右邊有一個開關，可讓用戶來決定輸入過程當中的字符是否隱藏（以*號顯示），TextInputLayout也提供了這樣的功能： EditText的inputType爲textPassword/textWebPassword/numberPassword時，經過下面的設置：

mPasswordTextInput.setPasswordVisibilityToggleEnabled(true);
複製代碼

同時，咱們也能夠經過上面的方法來定義切換的圖標以及它的着色。

---

更多文章，歡迎訪問個人 Android 知識梳理系列：

• Android 知識梳理目錄：www.jianshu.com/p/fd82d1899…
• 我的主頁：lizejun.cn
• 我的知識總結目錄：lizejun.cn/categories/