Material Design 控件知識(shí)梳理(1) - Android Design Support Library 是什么
Material Design 控件知識(shí)梳理(2) - AppBarLayout & CollapsingToolbarLayout
Material Design 控件知識(shí)梳理(3) - BottomSheet && BottomSheetDialog && BottomSheetDialogFragment
Material Design 控件知識(shí)梳理(4) - FloatingActionButton
Material Design 控件知識(shí)梳理(5) - DrawerLayout && NavigationView
Material Design 控件知識(shí)梳理(6) - Snackbar
Material Design 控件知識(shí)梳理(7) - BottomNavigationBar
Material Design 控件知識(shí)梳理(8) - TabLayout
Material Design 控件知識(shí)梳理(9) - TextInputLayout

一、概述

TextInputLayout通過對EditText進(jìn)行包裝肆良，擴(kuò)展了EditText的功能，今天卧波，我們就來介紹一下和TextInputLayout相關(guān)的知識(shí)：

• 輸入檢查
• 輸入計(jì)數(shù)
• 密碼隱藏

二、TextInputLayout

2.1 基本用法

• 首先庇茫，導(dǎo)入TextInputLayout的依賴包：

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

• 之后港粱，我們需要將TextInputLayout作為EditText的父容器以實(shí)現(xiàn)相關(guān)的功能，例如下面這樣旦签，我們的布局中有兩個(gè)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>

當(dāng)EditText獲得焦點(diǎn)的時(shí)候宁炫，android:hint所指定的字符串會(huì)以高亮的顏色顯示在EditText的上方偿曙，而當(dāng)EditText失去焦點(diǎn)時(shí)，hint會(huì)以灰顯的方式顯示在EditText中羔巢，這就是TextInputLayout最基本的使用望忆，它讓我們在輸入的過程當(dāng)中仍然可以獲得當(dāng)前EditText所關(guān)聯(lián)的提示罩阵。

input_1.gif

2.2 輸入檢查

除了在EditText上面的提示之外，TextInputLayout還支持在EditText下方顯示提示启摄，這種一般用于用戶在輸入過程中稿壁，輸入了不符合要求的文本，用來給予用戶錯(cuò)誤提示歉备。

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);
                }
            }
        });
}

效果如下圖所示：

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

2.3 輸入計(jì)數(shù)

TextInputLayout還支持對于輸入框內(nèi)字符的實(shí)時(shí)統(tǒng)計(jì)，并在字符數(shù)超過閾值之后界拦，改變輸入框及提示文字的顏色吸申。

private void checkCount() {
        mPasswordTextInput.setCounterEnabled(true);
        mPasswordTextInput.setCounterMaxLength(MAX_PASSWORD_LEN);
}

與輸入計(jì)數(shù)有關(guān)的方法有：

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

2.4 輸入時(shí)隱藏密碼

相信大家都有見到過這樣的輸入框，在輸入框的右邊有一個(gè)開關(guān)享甸，可以讓用戶來決定輸入過程中的字符是否隱藏（以*號(hào)顯示）截碴，TextInputLayout也提供了這樣的功能：
EditText的inputType為textPassword/textWebPassword/numberPassword時(shí)，通過下面的設(shè)置：

mPasswordTextInput.setPasswordVisibilityToggleEnabled(true);

同時(shí)蛉威，我們也可以通過上面的方法來定義切換的圖標(biāo)以及它的著色日丹。

更多文章，歡迎訪問我的 Android 知識(shí)梳理系列：

• Android 知識(shí)梳理目錄：http://www.reibang.com/p/fd82d18994ce
• 個(gè)人主頁：http://lizejun.cn
• 個(gè)人知識(shí)總結(jié)目錄：http://lizejun.cn/categories/