文字輸入佈局TextInputLayout

TextInputLayout是MaterialDesign庫中對編輯框EditText進行增強的一個控制元件。眾所周知，EditText未輸入字元時，我們可以給它顯示預設的提示文字hint；可是一旦輸入字元，這個hint提示就消失了，雖然沒有提示也沒有什麼大礙，但有總比沒有好呀。TextInputLayout便是用來解決提示文字的顯示問題，它預設把提示文字顯示在編輯框的上方，這樣在編輯框內輸入文字，就不影響上方的提示文字了。

程式碼中使用TextInputLayout要進行以下改造：
1、新增幾個庫的支援，包括design庫（TextInputLayout需要）、appcompat-v7庫（AppCompatActivity）；
2、編輯框所在頁面的Activity需要繼承自AppCompatActivity，否則執行時開啟頁面會報錯；
3、佈局檔案中在TextInputLayout節點下面加入EditText控制元件，必須並且只能加入一個EditText；

下面是TextInputLayout新增的方法說明：
setHint : 設定提示文字的內容。
setHintEnabled : 設定提示文字是否可用。
setHintTextAppearance : 設定提示文字的風格。
setHintAnimationEnabled : 設定提示文字的展示動畫是否可用。
setError : 設定錯誤文字的內容。
setErrorEnabled : 設定錯誤文字是否可用。
setCounterEnabled : 設定文字計數器是否可用。
setCounterMaxLength : 設定文字計數器的最大長度。

從以上方法可以看到，TextInputLayout增加的介面元素主要是三個，分別是位於編輯框左上角的提示文字、位於編輯框左下角的錯誤文字、位於編輯框右下角的文字計數器。具體的文字輸入佈局效果如見下：


倘若在程式碼中呼叫setCounterMaxLength方法設定了文字計數器的最大長度，那麼執行時當輸入字元數超過計數最大值，應用會異常退出，日誌報錯“Failed to resolve attribute at index 3”。這個好坑，既然出現問題，就想辦法解決它，解決辦法如下所示（以下方案任選其一）：
1、在佈局檔案中給EditText控制元件設定maxLength屬性，指定允許輸入字串的最大長度。
2、頁面主題使用Theme.Design.*系列風格，比如Theme.Design.Light。但該方法不會限制輸入的字元個數。
3、頁面主題是Theme.AppCompat.*的情況，如果為亮色風格Light，則在該主題下新增一行“<item name="textColorError">@color/design_textinput_error_color_light</item>”；如果為暗色風格Dark，則在該主題下新增一行“<item name="textColorError">@color/design_textinput_error_color_dark</item>”。該方法同樣也不會限制輸入的字元個數。

下面是使用TextInputLayout的佈局檔案例子：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp" >

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_user"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <EditText
            android:id="@+id/et_user"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="請輸入使用者名稱"
            android:inputType="text"
            android:textColor="#555555"
            android:textColorHint="#aaaaaa"
            android:textSize="17sp" />
    </android.support.design.widget.TextInputLayout>

</LinearLayout>
 

文字輸入編輯框TextInputEditText

TextInputEditText是Android6.0後新加的編輯框控制元件，它的用法跟EditText沒什麼區別，之所以鼓搗這麼一個新控制元件，是為了解決一個小小的問題。不知大家有沒有發現，往編輯框輸入文字，手機在豎屏與橫屏兩種情況下的頁面展示是不一樣的。豎屏時輸入文字，會在當前頁面下方彈出輸入法面板；而橫屏時輸入文字，系統會開啟一個新頁面，新頁面的上半部分是編輯框，下半部分是輸入法面板。

如果不用TextInputLayout，只使用EditText的話，橫屏時的編輯框也會顯示提示文字；可是一旦加了TextInputLayout，再看橫屏的編輯框，發現編輯框內的提示文字不見了，這是因為TextInputLayout強行把提示文字從編輯框內挪到了編輯框上方，可這種做法沒考慮到橫屏時候的情況，所以造成橫屏反而不顯示提示文字的結果。下面是使用TextInputLayout+EditText的橫屏輸入頁面，可以看到此時編輯框內沒有提示文字。



那麼TextInputEditText就是為了讓橫屏時也要顯示提示文字，具體做法是把佈局檔案中的EditText名稱換成“android.support.design.widget.TextInputEditText”，其他程式碼不再做任何修改。接著執行應用看看發生了什麼？最終的頁面效果，便是橫屏時能夠在編輯框內顯示提示文字了，具體頁面截圖如下所示：



所以呢，TextInputEditText與EditText的唯一區別就是，橫屏時輸入文字，是否會在編輯框內顯示提示文字。


點選下載本文用到的文字輸入佈局的工程程式碼


點此檢視Android開發筆記的完整目錄