【Android - 控件】之MD - TextInputLayout的使用

TextInputLayout是Android 5.0新特性——Material Design中的一個佈局控件，主要用來嵌套EditText，實現數據輸入時的一些效果，如：

• 當輸入框獲取焦點時，輸入提示語會動畫移動到輸入框上方；
• 當輸入框失去焦點時，若是輸入框中沒有文本，則提示語動畫移動回到輸入框中；
• 當輸入不合規範時，會在輸入框下方顯示錯誤提示語；
• 當輸入的是密碼時，能夠選擇是否顯示「顯示密碼」的按鈕以及按鈕的圖案；
• 能夠顯示輸入框中當前文本的長度和要求的長度，等。

須要特別注意的是，TextInputLayout做爲一個佈局控件，不能獨立存在，必須嵌套在EditText或TextInputEditText外層。

 

和其餘MD控件同樣，使用TextInputLayout以前必須在gradle文件中聲明依賴：

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

一、TextInputLayout的屬性：

        app:passwordToggleEnabled：是否顯示能夠查看密碼的Toggle按鈕
        app:passwordToggleDrawable：查看密碼的Toggle按鈕的圖片
        注：只有當包裹的EditText或TextInputEditText的InputType是密碼格式時纔會顯示這個圖標
        app:counterEnabled：是否顯示文本長度計數器
        app:counterMaxLength：文本長度計數器的最大長度
        注：文本長度計數器就是在輸入框的右下角顯示「X/Y」字樣，X表示當前輸入框中的文本長度，Y表示規定的輸入長度
            若是用戶輸入的長度超過Y，則文本計數器中的文本會變色提示

 

二、佈局代碼示例：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- 使用TextInputLayout包裹EditText -->
    <android.support.design.widget.TextInputLayout
        android:id="@+id/textinputlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:counterEnabled="true"
        app:counterMaxLength="6"
        app:passwordToggleDrawable="@mipmap/ic_launcher"
        app:passwordToggleEnabled="true">

        <!-- 這裏的TextInputEditText能夠使用EditText代替 -->
        <android.support.design.widget.TextInputEditText
            android:id="@+id/edittext"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword" />
    </android.support.design.widget.TextInputLayout>

</LinearLayout>

運行結果以下圖：

 

三、錯誤提示：

TextInputLayout支持錯誤提示，即當通過判斷，當前輸入的文本不符合要求時，就會在輸入框下方顯示一行提示，提示輸入錯誤。經過調用TextInputLayout對象的setErrorEnabled()、setError()方法能夠實現這一功能。具體代碼以下：

        // 是否能夠彈出錯誤提示語
        til.setErrorEnabled(true);
        // 獲取TextInputLayout中包裹的EditText
        EditText et = til.getEditText();
        // 當EditText中的文本發生變化時處理TextInputLayout的錯誤提示語及其顯隱
        et.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) {
                try {
                    if ("".equals(s + "")) {
                        // 設置錯誤提示語爲null，即不顯示錯誤提示語
                        til.setError(null);
                    } else if (s.length() > 6) {
                        // 若是輸入長度超過6位，則顯示錯誤提示
                        til.setError("密碼長度超過上限！");
                    } else {
                        Integer.parseInt(s + "");
                        til.setError(null);
                    }
                } catch (Exception e) {
                    // 設置錯誤提示語爲具體的文本
                    til.setError("輸入內容不是數字！");
                }
            }

            @Override
            public void afterTextChanged(Editable s) {
            }
        });

演示結果如圖所示：

 

以上就是對TextInputLayout的基本用法的介紹，下面貼出碼雲中的源碼，供你們參考。

DEMO地址