大家好,我叫噬魂
從登陸頁開始TextInputLayout
前言
添加依賴
TextInputLayout是在Material Design中的,如果我們要使用的話,必須在gradle文件中配置
dependencies {
compile 'com.android.support:appcompat-v7:25.0.1'
compile 'com.android.support:design:25.0.1'
}
依賴完成之后開始使用
在TextInputLayout官方文檔API中描述了它是一種新的繼承自LinearLayout的布局,讓我們使用時里面只能包含一個EditText或者其子類的控件,該布局可以通過設置hint和Error顯示浮動標簽.接下來我們看看布局文件
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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.support.design.widget.TextInputLayout
android:layout_width="368dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="@+id/til_phone"
app:layout_constraintRight_toRightOf="@+id/til_phone"
app:layout_constraintTop_toBottomOf="@+id/til_phone"
android:id="@+id/textInputLayout">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hint_password"
android:inputType="textPassword"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/til_phone"
android:layout_width="368dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:counterEnabled="true"
app:counterMaxLength="11"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hint_phone"
android:inputType="phone"/>
</android.support.design.widget.TextInputLayout>
<Button
android:text="@string/btn_text"
android:layout_width="0dp"
android:textColor="@android:color/white"
android:layout_height="wrap_content"
android:id="@+id/button"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
android:background="@color/colorPrimary"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="@+id/textInputLayout"/>
</android.support.constraint.ConstraintLayout>
使用TextInputLayout其實很簡單,只需要我們使用TextInputLayout容器并且在其中加入一個EditText,需要我們特別注意的是:一個TextInputLayout有且只有一個EditText,
如果我們想要浮動標簽的效果只需要在TextInputLayout或者在EditText中設置hint,但是不能在兩者中同時設置hint屬性,假如我們在TextInputLayout跟EditText都設置了hint屬性時,當EditText沒有獲取到焦點時,這時hint會顯示(但是要注意,這時是兩個hint重疊顯示)
如果我們想要關閉浮動標簽(默認是開啟的),可以加入下面一句話
app:hintEnable="false"
浮動標簽顯示與隱藏之間有一個過渡動畫(默認是開啟的),可以通過以下方法設置
app:hintAnimationEnabled="boolean"
如果我們想要在賬號那欄后面加個字數統計,例如當我們的賬號是固定位數時(例如手機號碼,),我們可以讓用戶看到自己當前輸入的長度,我們只需要在TextInputLayout加入
app:counterEnabled="true"
默認是關閉的,我們也能設置一個輸入的最大長度
app:counterMaxLength="11"
這個設置不是說用戶輸入了11位賬號之后就不能輸入了,而是會用一種顏色提示用戶你的輸入長度超過了設置長度.
TextInputLayout也很友好,為我們提供了設置錯誤提醒的功能(又為我們爭取了一點品咖啡的時間),
textInputEditText.setError(CharSequence error);
當我們調用了這個方法之后提示是會一直在的,所以我們要當用戶輸入正確之后我們手動調用textInputEditText,setErro(null)去取消錯誤提示.我們可以通過addTextChangedListener監聽,在合適的時候調用textInputEditText,setErro(null)
我們可能看到過其他的app在密碼那欄的最右邊有個??的圖標,TextInputLayout也為我們提供了這個功能
app:passwordToggleEnabled="true" //默認是關閉的
我們可能用我們自己設計的圖標
app:passwordToggleDrawable="@mipmap/ic_launcher"
passwordToggleTint給圖標加顏色
app:passwordToggleTint="@color/colorAccent"
passwordToggleTintMode設置模式
//screen,src_in,src_atop,src_over,multiply等幾種設計模式
app:passwordToggleTintMode="screen" //screen
到此,你花了多少時間,是不是很簡單.
自定義浮動標簽
在TextInputLayout中加入
app:hintTextAppearance="@style/hintAppearance"
<style name="hintAppearance" parent="TextAppearance.AppCompat">
<item name="android:textSize">14sp</item>
<item name="android:textColor">#ffee00</item>
</style>
自定義錯誤提示信息樣式
在TextInputLayout中加入
app:errorTextAppearance="@style/errorAppearance"
<style name="errorAppearance" parent="TextAppearance.AppCompat">
<item name="android:textSize">14sp</item>
<item name="android:textColor">@color/red</item>
</style>
監聽虛擬鍵盤
有時候我們在用虛擬鍵盤的時候,在輸入賬號之后,我們點擊下一項,焦點會跑到輸入密碼這一欄,當我們密碼輸入完成之后,點擊確定按鈕就能登錄了,這個怎么實現的呢.
賬號EditText中加入
android:imeActionId="@+id/password"
android:imeOptions="actionNext"
密碼EditText中加入
android:imeActionId="@+id/button"
android:imeOptions="actionDone"
mPasswordView.setOnEditorActionListener(new TextView.OnEditorActionListener() {
@Override
public boolean onEditorAction(TextView textView, int id, KeyEvent keyEvent) {
if ( id == EditorInfo.IME_ACTION_DONE) {
InputMethodManager inputMethodManager=(InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE);
//inputMethodManager.showSoftInput(getWindow().getDecorView(),InputMethodManager.SHOW_FORCED);//顯示
inputMethodManager.hideSoftInputFromWindow(getWindow().getDecorView().getWindowToken(),InputMethodManager.RESULT_UNCHANGED_SHOWN);
//attemptLogin();
startLogin();
return true;
}
return false;
}
});
對于賬號EditText的優化我們可能通過AutoCompleteTextView實現自動提示功能.
