3分鐘學會TextInputLayout

rgpl3332 7年前發布 | 12K 次閱讀安卓開發 Android開發移動開發

從登陸頁開始TextInputLayout

前言

test2.gif

添加依賴

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 實現自動提示功能.

OK,到這里本篇文章就結束了,

來自：http://www.jianshu.com/p/a9b48dee86e0

本文由用戶 rgpl3332 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1484917295175.html

安卓開發 Android開發移動開發