Android Material Design 系列之 TextInputLayout 使用詳解

前言

本文是 Material Design 系列第四篇：TextInputLayout 主要是作爲 EditText 的容器，從而爲 EditText 生成一個浮動的 Label，當用戶點擊 EditText 的時候，EditText 中的 hint 字符串會自動移到 EditText 的左上角。

TextInputLayout 的簡單使用，是 Google 推出的整個 Material Design 庫的一個縮影：Google 將 UI 視覺效果設計得華麗且流暢，同時代碼封裝更爲優雅，開發者只需要在 layout.xml 中寫好佈局文件，就可以輕鬆在手機屏幕上展現出魔法般的動畫效果，實在是妙不可言。

一、TextInputLayout 相關 API

TextInputLayout 控件 API 官網列舉了很多，這裏只是整理出開發中常用屬性，每個方法對應相關 XML 屬性感興趣的可以查查官網文檔。

方法	介紹
setCounterEnabled(boolean enabled)	在此佈局中是否啓用了字符計數器功能。
setCounterMaxLength(int maxLength)	設置要在字符計數器上顯示的最大長度。
setBoxBackgroundColorResource(int boxBackgroundColorId)	設置用於填充框的背景色的資源。
setBoxStrokeColor(int boxStrokeColor)	設置輪廓框的筆觸顏色。
setCounterOverflowTextAppearance(int counterOverflowTextAppearance)	使用指定的 TextAppearance 資源設置溢出字符計數器的文本顏色和大小。
setCounterOverflowTextColor(ColorStateList counterOverflowTextColor)	使用 ColorStateList 設置溢出字符計數器的文本顏色。(此文本顏色優先於 counterOverflowTextAppearance 中設置的文本顏色)
setCounterTextAppearance(int counterTextAppearance)	使用指定的 TextAppearance 資源設置字符計數器的文本顏色和大小。
setCounterTextColor(ColorStateList counterTextColor)	使用 ColorStateList 設置字符計數器的文本顏色。(此文本顏色優先於 counterTextAppearance 中設置的文本顏色)
setErrorEnabled(boolean enabled)	在此佈局中是否啓用了錯誤功能。
setErrorTextAppearance(int errorTextAppearance)	設置來自指定 TextAppearance 資源的錯誤消息的文本顏色和大小。
setErrorTextColor(ColorStateList errorTextColor)	設置錯誤消息在所有狀態下使用的文本顏色。
setHelperText(CharSequence helperText)	設置將在下方顯示的幫助消息 EditText。
setHelperTextColor(ColorStateList helperTextColor)	設置輔助狀態在所有狀態下使用的文本顏色。
setHelperTextEnabled(boolean enabled)	在此佈局中是否啓用了輔助文本功能。
setHelperTextTextAppearance(int helperTextTextAppearance)	設置指定 TextAppearance 資源中的輔助文本的文本顏色和大小。
setHint(CharSequence hint)	設置要在浮動標籤中顯示的提示（如果啓用）。
setHintAnimationEnabled(boolean enabled)	是否獲取焦點的時候，hint 文本上移到左上角開啓動畫。
setHintEnabled(boolean enabled)	設置是否在此佈局中啓用浮動標籤功能。
setHintTextAppearance(int resId)	從指定的 TextAppearance 資源設置摺疊的提示文本的顏色，大小，樣式。
setHintTextColor(ColorStateList hintTextColor)	從指定的 ColorStateList 資源設置摺疊的提示文本顏色。
setPasswordVisibilityToggleEnabled(boolean enabled)	啓用或禁用密碼可見性切換功能。

二、TextInputLayout 使用詳解

1、基本使用

• 佈局文件中只需要在 EditText 外層包裹一層 TextInputLayout 佈局即可

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/userInputLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Username">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="14dp" />

</com.google.android.material.textfield.TextInputLayout>

2、開啓錯誤提示

設置文本框輸入最大長度，並且開啓錯誤提示，當文本框輸入文本長度超出時，報錯顯示。

// 開啓錯誤提示
userInputLayout.setErrorEnabled(true);
// 開啓計數
userInputLayout.setCounterEnabled(true);
// 設置輸入最大長度
userInputLayout.setCounterMaxLength(10);

3、自定義浮動標籤字體樣式

默認浮動標籤樣式跟 APP 主題色 colorAccent 色值一致，所以需要自定義樣式，修改標籤字體大小和顏色

1. 自定義 style

<style name="hintAppearence" parent="TextAppearance.AppCompat">
    <item name="android:textSize">14dp</item>
    <item name="android:textColor">@color/colorPrimary</item>
</style>

2. 使用 setHintTextAppearance()方法加載自定義樣式

userInputLayout.setHintTextAppearance(R.style.hintAppearence);

如圖所示，Username 文本框是自定義樣式效果，Password 文本框是系統默認效果

TextInputLayout 中所有關於樣式的設置方式都採用這種方式，所以這裏只舉例一種，其他屬性直接照搬即可使用 。

4、密碼可見性切換

APP 登錄界面密碼框經常會遇到最右邊有一個“小眼睛”圖標，點擊可以切換密碼是否可見，以前我們實現時，使用一個 ImageView，然後根據點擊事件判斷標記位更新文本框的內容。現在使用 TextInputLayout 只需要一行代碼即可輕鬆實現。

這裏使用 XML 屬性實現，對應的 setPasswordVisibilityToggleEnabled(boolean enabled) 方法

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:focusable="false"
    android:focusableInTouchMode="false"
    android:hint="Password"
    app:counterOverflowTextAppearance="@style/hintAppearence"
    app:hintTextAppearance="@style/hintAppearence"
    app:passwordToggleEnabled="true">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableStart="@drawable/ic_baseline_lock_24"
        android:drawablePadding="8dp"
        android:inputType="textPassword"
        android:textSize="14dp" />

</com.google.android.material.textfield.TextInputLayout>

以上文本框左邊的 icon 使用 EditText 的android:drawableStart屬性添加

5、文本框輸入校驗

一般情況下，APP 用戶名稱輸入都會有校驗功能，本文以用戶名長度不大於 10 爲例，如果超出時，輸入框底部報錯提示。

採用EditText.addTextChangedListener()方法實現，相信大家對這個監聽方法並不陌生，因爲沒有 TextInputLayout 之前，這個應該是最常用的方式了。

注意：TextInputLayout.getEditText()方法獲取的就是內部的 EditText 控件，所以不需要在 Activity 中在 findViewById 初始化 View

userInputLayout.getEditText().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) {
        // 文本發生變化後調用
        if(userInputLayout.getEditText().getText().toString().trim().length()>10){
            userInputLayout.setError("用戶名長度超出限制");
        }else{
            userInputLayout.setError(null);
        }
    }
});

以上五種使用方式應該是開發過程中最常見的功能了，官網關於 TextInputLayout 屬性太多了，好多屬性我自己到現在都沒理解幹什麼的。不過只要掌握開發中這些常用的屬性就足夠了，TextInputLayout 底層實現了 LinearLayout，感興趣的朋友可以查看閱讀源碼深入學習。

源碼下載 源碼包含 Material Design 系列控件集合，定時更新，敬請期待！

三、總結

本片文章已經是 Material Design 系列第四篇了，我會堅持把 Material Design 系列控件全部介紹完畢，最後會將所有的 Demo 整合一套源碼分享給大家，敬請期待！相信看完我的博客對你學習 Material Design UI 控件有一定的幫助，因爲我會把每個控件開發中的基本使用詳細講解，簡單易懂。

我的微信：Jaynm888

歡迎點評，誠邀 Android 程序員加入微信交流羣，公衆號回覆加羣或者加我微信邀請入羣。