加強EditText--TextInputLayout

該控件繼承自linearlayout，裏邊只能包裹一個控件，EditText或繼承自EditText，

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

使用此控件須要引入依賴

dependencies{
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support:design:28.0.0'

}

下面是簡單調用的代碼

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

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp">
        <EditText
            android:id="@+id/et_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UserName" />

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

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

</LinearLayout>

實現的效果

TextInputLayout 屬性說明

屬性	說明
app:Theme	設置下劃線或其餘的顏色屬性
android.support.design:counterEnabled	是否顯示計數器
android.support.design:counterMaxLength	設置計數器的最大值,與counterEnabled同時使用
android.support.design:counterTextAppearance	計數器的字體樣式
android.support.design:counterOverflowTextAppearance	輸入字符大於咱們限定個數字符時的字體樣式
android.support.design:errorEnabled	是否顯示錯誤信息
android.support.design:errorTextAppearance	錯誤信息的字體樣式
android.support.design:hintAnimationEnabled	是否顯示hint的動畫,默認true
android.support.design:hintEnabled	是否使用hint屬性,默認true
android.support.design:hintTextAppearance	設置hint的文字樣式(指運行動畫效果以後的樣式)
android.support.design:passwordToggleDrawable	設置密碼開關Drawable圖片,於passwordToggleEnabled同時使用
android.support.design:passwordToggleEnabled	是否顯示密碼開關圖片,須要EditText設置inputType
android.support.design:passwordToggleTint	設置密碼開關圖片顏色
android.support.design:passwordToggleTintMode	設置密碼開關圖片(混合顏色模式),與passwordToggleTint同時使用

下面加入顯示計數器的, 

<android.support.design.widget.TextInputLayout
        android:id="@+id/til_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp">
        <EditText
            android:id="@+id/et_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UserName" />

    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        
        app:counterEnabled="true"  //設置爲true才能顯示字符串
        app:counterMaxLength="8"   //設置爲最大字符數爲8
                                   //實際運行的時候,不能再佈局內部加註釋,把註釋刪掉,運行
        
       android:layout_margin="10dp">
        <EditText
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:hint="password" />

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

加入輸入的密碼不能小於三位時的錯誤提示文字

xml代碼同上

Java代碼以下

final TextInputLayout password_til = findViewById(R.id.til_password);
        final EditText password_et = findViewById(R.id.et_password);
        password_et.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                if (charSequence.length()<=3) {
                    password_til.setError("密碼不能小於三位");
                    password_til.setErrorEnabled(true);
                } else {
                    password_til.setErrorEnabled(false);
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });

效果以下

加入密碼, 用戶能夠手動設置可見

效果以下

xml代碼以下

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

        app:passwordToggleEnabled="true"  //設置爲true 是加入密碼手動設置是否可見
                                          //須要EditText設置inputType

        android:layout_margin="10dp">

        <EditText
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:hint="password" />

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

更改獲取焦點後，上面Label的顏色/大小等

app:hintTextAppearance="@style/HintAppearance"

經過這個屬性修改

style示例

<style name="HintAppearance" parent="TextAppearance.AppCompat">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">#8bc34a</item>
</style>

修改下面橫線的顏色

直接在工程的color中修改

修改錯誤提示的顏色

經過以下方法修改

app:errorTextAppearance="@style/ErrorAppearance"

 style

<style name="ErrorAppearance" parent="TextAppearance.AppCompat">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">#a2ced1</item>
</style>

須要注意的是，該屬性不止改變的是錯誤文字的顏色、大小，還修改了EditText的的那條橫線的顏色。

若是不想在編寫TextInputLayout佈局的時候都去設置，還能夠經過style文件去統一設置，如：

<item name="textColorError">@color/textColorError</item>

若是你設置了errorTextAppearance同時又設置了textColorError，TextInputLayout會優先使用errorTextAppearance配置的顏色。

 

 

下面是注意事項 : 百度出來的感受挺有道理, 貼在下方了

1. 添加庫的時候注意要加appcompat-v7庫,確保能夠向後兼容
2. TextInputLayout下的實際視圖層次結構不能保證以XML格式編寫視圖層次結構。 所以，對於TextInputLayout的子對象EditText(或子類TextInputEditText)想調用getParent()可能不會返回TextInputLayout. 若是您須要直接訪問視圖,建議設置一個android：id並使用findViewById(int).
3. 一個TextInputLayout只能套一個EditText(或它的子類TextInputEditText)
4. 當使用passwordToggleDrawable密碼開關圖片的時候，EditText end位置的 圖標時會被覆蓋的，爲了保證EditText end 位置Drawable的正常顯示，你須要在設置這些Drawables 的相對位置（start/end）爲絕對(left/right).(官方文檔說的)
5. 使用了TextInputLayout,和它的setError(),佈局所佔的位置會變多,設計佈局注意留適當的空間
6. EditText的setError和passwordToggleDrawable的圖片會重疊,建議只用TextInputLatyout的setError或者重寫EditText的佈局,抉擇一個吧
7. TextInputLayout.setError()注意調用setErrorEnabled(false)清空錯誤信息,否則會一直顯示
8. 建議TextInputLayout只套一個EditText,放其餘控件會出現焦點搶佔的問題(View的事件分發)

9. 若是加上字數統計須要在style里加上textErrorColor，不然超過字數會後會閃退。

10.  

    若是不須要字數統計，且啓用錯誤機制（setErrorEnabled(true)）, 不須要加上textErrorColor（不會閃退）系統會提供一個默認的error color。 

    固然能夠經過textErrorColor來自定義錯誤顏色(error color). 
    可使用更爲強大的errorTextAppearance來定義錯誤顏色，字體大小等屬性。若是TextInputLayout 同時 設置了textErrorColor和errorTextAppearance ，只有errorTextAppearance生效.

11.  

     若是加上字數統計，且同時設置了textErrorColor和errorTextAppearance。  這個時候回出現奇怪的效果，Label和統計的顏色爲textErrorColor的顏色。  EditText的橫線 和 錯誤文字提示爲errorTextAppearance設置的效果。因此爲何不加上textErrorColor會閃退，由於超過字數後TextInputLayout須要textErrorColor屬性設置的顏色。