一、TextInputLayout是對EditText的包裝擴展,可以對EditText進行輸入檢查,輸入字符計數,密碼隱藏,如下圖所示:
當EditText獲得焦點時,android:hint指定的字符串會以高亮的顏色顯示在EditText的上方,當失去焦點時,又會以灰色的提示樣式顯示在EditText中,這就是最基本的使用方式:當我們輸入過程中仍可以看到EditText所關聯的提示;
二、TextInputLayout的基本使用
- 1.首先導入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"設置自己想要的最右邊的圖標-->
<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給我們提供的一個右邊帶圖標的控件,繼承與LinearLayout,只要在TextInputLayout中設置app:passwordToggleEnabled="true"和在TextInputEditText中同時設置android:inputType="numberPassword"就能顯示默認的圖標,并且將密碼隱藏和顯示功能已經實現;此功能也可在代碼中動態設置
mPasswordTextInputLayout.setPasswordVisibilityToggleEnabled(true);
mPasswordTextInputLayout.setPasswordVisibilityToggleDrawable(R.mipmap.ic_launcher_round);
注意下TextInputLayout中設置字體樣式的屬性:
- 1.app:hintTextAppearance:用來設置懸浮上面的提示文字的外觀;
- 2.app:counterTextAppearance:用來設置右下角提示數字的外觀,只有設置了setCounterEnabled為true后才有效果;
- 3.app:counterOverflowTextAppearance:用來設置超過最大字符限制時懸浮左上提示文字和右下角記錄數字的外觀;TextInputLayout必須設置了setError之后,并且觸發了error之后才有效果;
- 4.app:errorTextAppearance:用來設置下劃線和左下角的外觀;只有觸發了setError才有效果;
三、具體的設置
- 3.1 輸入檢查
除了在EdiText的左上方提示輸入外,TextInputLayout還支持在EditText正右下方提示用戶是否輸入了不和規則條件的內容,以此來提醒用戶;
代碼設置如下:
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);
}
}
});
在上面的代碼中我們監聽了EditText的輸入內容,然后在輸入后觸發某個條件,調用TextInputLayout的setError方法來設置提醒的描述;與setError相關的方法如下:
-
public void setError(@Nullable final CharSequence error)
設置錯誤提示的文字,它會被顯示在EditText的正下方;
-
public void setError(@Nullable final CharSequence error)
- 2 . public void setErrorTextAppearance(@StyleRes int resId)
設置錯誤提示的文字顏色和大小;
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)
設置錯誤提示是否可用;3.2 輸入計數
TextInputLayout支持輸入框中字符實時統計,并在字符長度超過設置的閾值后,改變輸入框邊欄的顏色和提示文字的顏色;
具體設置如下:
mUserNameTextInputLayout.setCounterEnabled(true);
mUserNameTextInputLayout.setCounterMaxLength(MAX_LENGTH);
與輸入計數功能相關的方法:
1 . public void setCounterEnabled(boolean enabled)
設置計數功能是否可用;2 . public void setCounterMaxLength(int maxLength)
設置計數顯示的最大值;3.3 輸入時隱藏密碼,或者在輸入框右邊設置一個圖標
在輸入框的右邊設置一個開關圖標,讓用來來選擇輸入時是否能夠隱藏(一般用*顯示);TextInputLayout也提供了這樣的功能,EditText的inputType為textPassword/textWebPassword/numberPassword時,通過下面的設置:
mPasswordTextInputLayout.setPasswordVisibilityToggleEnabled(true);
mPasswordTextInputLayout.setPasswordVisibilityToggleDrawable(R.mipmap.ic_launcher_round);
我們也可以通過下面的方法來改變輸入框右邊的圖標和顏色: