Material Design系列之TextInputLayout詳解

TextInputLayout官方API文檔

Material Design官方文檔text-fields的介紹

簡介

Layout which wraps an EditText (or descendant) to show a floating label when the hint is hidden due to the user inputting text.

在使用者輸入的時候能将原來的提示文字浮動在控件上邊。

Also supports showing an error via setErrorEnabled(boolean) and setError(CharSequence), and a character counter via setCounterEnabled(boolean).

Password visibility toggling is also supported via the setPasswordVisibilityToggleEnabled(boolean) API and related attribute. If enabled, a button is displayed to toggle between the password being displayed as plain-text or disguised, when your EditText is set to display a password.

Note: When using the password toggle functionality, the ‘end’ compound drawable of the EditText will be overridden while the toggle is enabled. To ensure that any existing drawables are restored correctly, you should set those compound drawables relatively (start/end), opposed to absolutely (left/right).

注意：當使用密碼顯示開關功能的時候edittext的enddrawable将會被覆寫，為了保證一個已經存在的圖檔被正确加載，你應該設定那些圖檔位置在left/right，而不是en/start。

The TextInputEditText class is provided to be used as a child of this layout. Using TextInputEditText allows TextInputLayout greater control over the visual aspects of any text input. An example usage is as so:

```
<android.support.design.widget.TextInputLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content">

       <android.support.design.widget.TextInputEditText
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:hint="@string/form_username"/>

   </android.support.design.widget.TextInputLayout>
```
           

Note: The actual view hierarchy present under TextInputLayout is NOT guaranteed to match the view hierarchy as written in XML. As a result, calls to getParent() on children of the TextInputLayout – such as an TextInputEditText – may not return the TextInputLayout itself, but rather an intermediate View. If you need to access a View directly, set an android:id and use findViewById(int).

注意：當對TextInputEditText使用getparent()的時候得到的不會是TextInputLayout這個控件，而可能是一個中間的view。如果你需要使用TextInputLayout，請用findViewById來擷取.

屬性	說明
app:hintEnabled	是否使用hint屬性,預設true
app:hintAnimationEnabled	是否顯示hint的動畫,預設true
app:counterEnabled	是否顯示輸入長度計數器
app:counterMaxLength	設定計數器的最大值
app:counterTextAppearance	計數器的字型樣式
app:counterOverflowTextAppearance	輸入字元大于限定個數字元時計數器的字型樣式
app:errorEnabled	是否顯示錯誤資訊
app:errorTextAppearance	錯誤資訊的字型樣式
app:passwordToggleEnabled	是否顯示密碼開關圖檔，需設定inputType為password
app:passwordToggleTint	設定密碼開關圖檔顔色
app:passwordToggleDrawable	設定密碼可見開關的圖示。通常我們會在不同的情況下設定不同的圖示，可通過自定義一個selector，根據state_checked屬性來控制圖示的切換
app:passwordToggleTintMode	控制密碼可見開關圖示的背景顔色混合模式

使用

compile ‘com.android.support:design:26.0.0-alpha1’

<android.support.design.widget.TextInputLayout
        android:id="@+id/textInputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:errorEnabled="true"
        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/colorPrimary"
        app:passwordToggleTintMode="src_in"
        app:counterEnabled="true"
        app:counterMaxLength="9"
        app:counterTextAppearance="@style/counterTextAppearanceStyle">
        <android.support.design.widget.TextInputEditText
            android:id="@+id/et_passward"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="請輸入密碼"
            android:inputType="textPassword"/>
    </android.support.design.widget.TextInputLayout>
           

final TextInputLayout textInputLayout = (TextInputLayout) findViewById(R.id.textInputLayout);
        TextInputEditText et_passward = (TextInputEditText) findViewById(R.id.et_passward);
        et_passward.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 (s.length() > textInputLayout.getCounterMaxLength()){
                    textInputLayout.setError("輸入超過限制");
                }
            }
        });
           

注意：

- 在TextInputLayout下隻能放一個TextInputEditText控件；

- 在TextInputLayout下最好使用TextInputEditText，如果使用EditText,會有一些bug。

Github示例代碼