一、TextInputLayout是對EditText的包裝擴展，可以對EditText進行輸入檢查，輸入字符計數(shù)，密碼隱藏，如下圖所示：

效果圖.png

當(dāng)EditText獲得焦點時，android:hint指定的字符串會以高亮的顏色顯示在EditText的上方，當(dāng)失去焦點時，又會以灰色的提示樣式顯示在EditText中，這就是最基本的使用方式：當(dāng)我們輸入過程中仍可以看到EditText所關(guān)聯(lián)的提示；

二、TextInputLayout的基本使用

• 1.首先導(dǎo)入TextInputLayout的依賴

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

• 2.編寫xml布局，將TextInputLayout作為EditText的父布局來使用，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.androidwanga.serenitynanian.serenityproject.TextInputActivity">

    <android.support.design.widget.TextInputLayout
        android:layout_marginTop="100dp"
        android:id="@+id/username_inputlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/et_username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="userName" />


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

    <!--app:passwordToggleDrawable="@mipmap/ic_launcher_round"設(shè)置自己想要的最右邊的圖標(biāo)-->
    <android.support.design.widget.TextInputLayout
        android:id="@+id/password_inputlayout"
        android:layout_width="match_parent"
        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/colorPrimary"
        android:layout_height="wrap_content">

        <android.support.design.widget.TextInputEditText
            android:inputType="textPassword"
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="password" />
    </android.support.design.widget.TextInputLayout>

</LinearLayout>

TextInputEditText控件是design給我們提供的一個右邊帶圖標(biāo)的控件，繼承與LinearLayout，只要在TextInputLayout中設(shè)置app:passwordToggleEnabled="true"和在TextInputEditText中同時設(shè)置android:inputType="numberPassword"就能顯示默認(rèn)的圖標(biāo)，并且將密碼隱藏和顯示功能已經(jīng)實現(xiàn)；此功能也可在代碼中動態(tài)設(shè)置

mPasswordTextInputLayout.setPasswordVisibilityToggleEnabled(true);
mPasswordTextInputLayout.setPasswordVisibilityToggleDrawable(R.mipmap.ic_launcher_round);

注意下TextInputLayout中設(shè)置字體樣式的屬性：

• 1.app:hintTextAppearance：用來設(shè)置懸浮上面的提示文字的外觀；
• 2.app:counterTextAppearance：用來設(shè)置右下角提示數(shù)字的外觀，只有設(shè)置了setCounterEnabled為true后才有效果；
• 3.app:counterOverflowTextAppearance：用來設(shè)置超過最大字符限制時懸浮左上提示文字和右下角記錄數(shù)字的外觀；TextInputLayout必須設(shè)置了setError之后，并且觸發(fā)了error之后才有效果；
• 4.app:errorTextAppearance:用來設(shè)置下劃線和左下角的外觀；只有觸發(fā)了setError才有效果；

三、具體的設(shè)置

• 3.1 輸入檢查
  除了在EdiText的左上方提示輸入外，TextInputLayout還支持在EditText正右下方提示用戶是否輸入了不和規(guī)則條件的內(nèi)容，以此來提醒用戶；
  代碼設(shè)置如下：

 mUserNameEditText.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 length = s.length();
                if(length> MAX_LENGTH ){
                    mUserNameTextInputLayout.setError("Max length is :"+ MAX_LENGTH);
                }else{
                    mUserNameTextInputLayout.setErrorEnabled(false);
                }
            }
        });

在上面的代碼中我們監(jiān)聽了EditText的輸入內(nèi)容，然后在輸入后觸發(fā)某個條件，調(diào)用TextInputLayout的setError方法來設(shè)置提醒的描述；與setError相關(guān)的方法如下：

• 1. public void setError(@Nullable final CharSequence error)
     設(shè)置錯誤提示的文字，它會被顯示在EditText的正下方；
• 2 . public void setErrorTextAppearance(@StyleRes int resId)
  設(shè)置錯誤提示的文字顏色和大??；
  mUserNameTextInputLayout.setErrorTextAppearance(R.style.TextInputErrorStyle);

<style name="TextInputErrorStyle" parent="AppTheme">
<item name="android:textSize">16sp</item>
<item name="android:textColor">@color/colorPrimary</item>
</style>

• 3 . ** public void setErrorEnabled(boolean enabled)
  設(shè)置錯誤提示是否可用；

• 3.2 輸入計數(shù)
  TextInputLayout支持輸入框中字符實時統(tǒng)計，并在字符長度超過設(shè)置的閾值后，改變輸入框邊欄的顏色和提示文字的顏色；
  具體設(shè)置如下：

mUserNameTextInputLayout.setCounterEnabled(true);
mUserNameTextInputLayout.setCounterMaxLength(MAX_LENGTH);

與輸入計數(shù)功能相關(guān)的方法：

• 1 . public void setCounterEnabled(boolean enabled)
  設(shè)置計數(shù)功能是否可用；

• 2 . public void setCounterMaxLength(int maxLength)
  設(shè)置計數(shù)顯示的最大值；

• 3.3 輸入時隱藏密碼，或者在輸入框右邊設(shè)置一個圖標(biāo)
  在輸入框的右邊設(shè)置一個開關(guān)圖標(biāo)，讓用來來選擇輸入時是否能夠隱藏（一般用*顯示）；TextInputLayout也提供了這樣的功能，EditText的inputType為textPassword/textWebPassword/numberPassword時，通過下面的設(shè)置：

mPasswordTextInputLayout.setPasswordVisibilityToggleEnabled(true);
   mPasswordTextInputLayout.setPasswordVisibilityToggleDrawable(R.mipmap.ic_launcher_round);

我們也可以通過下面的方法來改變輸入框右邊的圖標(biāo)和顏色：

設(shè)置最右邊圖標(biāo).jpg

github倉庫

相關(guān)內(nèi)容：

一、CoordinatorLayout的梳理與使用

二、Toolbar的梳理與使用

三、TextInputLayout的梳理與使用

四、FloatingActionButton的梳理與使用

五、Snackbar的梳理與使用

六、CardView的梳理與使用

七、BottomSheetDialog的梳理與使用

八、TabLayout的梳理與使用