從登錄界面學習TextInputLayout

前言

源碼傳送門

在 Material Design出現以前，若是咱們想寫一個登錄界面是否是通常都寫兩組TextView,EditText及一個Button，若是你想在帳號和密碼後面加一個計數的功能，又須要加控件而且要本身實現計數，或者在密碼框後面加個相似眼睛的密碼顯示開關，或者你想加一個帳號或者密碼輸入無效或者錯誤的提醒，通常是顯示一個Toast或者使用EditText的setError設置，不過體驗並非太好，等等這些麻煩的的處理在Material Design TextInputLayout出現後獲得了極大改善，咱們能夠作最少的事達到最好的效果，今天的這篇文章就是經過一個登錄界面來學習TextInputLayout的API重要方法及其使用。先來一張效果圖

這裏寫圖片描述

添加依賴

TextInputLayout是在Material Design中的，因此咱們須要在gradle 文件配置

dependencies {
    compile 'com.android.support:appcompat-v7:24.2.0'
    compile 'com.android.support:design:24.2.0'
}複製代碼

使用

在TextInputLayout官方文檔API中描述它是一種新的繼承自LinearLayout的佈局，使用時只能包含一個EditText或其子類的控件，該佈局能夠經過設置hint和Error顯示浮動標籤。接下咱們看看佈局文件

<LinearLayout
            android:id="@+id/account_login_form"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <android.support.design.widget.TextInputLayout
                android:id="@+id/accountinput"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/prompt_account"
                >

            <EditText
                android:id="@+id/account"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text=""
                android:inputType="phone"
                android:singleLine="true"/>

            </android.support.design.widget.TextInputLayout>
            <android.support.design.widget.TextInputLayout
                android:id="@+id/passwordinput"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/prompt_password"
                >

            <EditText
                android:id="@+id/password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:singleLine="true"/>

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

            <Button
                android:id="@+id/account_sign_in_button"
                style="?android:textAppearanceSmall"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:background="@drawable/login_btn"
                android:textColor="@color/btninvalid"
                android:text="@string/action_sign_in"
                android:textStyle="bold"/>

        </LinearLayout>複製代碼

使用其實很簡單，只須要一個TextInputLayout（須要全路徑）容器並在其中加一個EditText(或子類)，須要注意的是一個TextInputLayout有且只能對應一個EditText。在TextInputLayout加入android:hint="帳號"就能夠顯示一個浮動標籤了，效果圖如上，還能夠經過下面代碼將浮動標籤關閉，若是關閉的話，設置hint也就沒有效果了，默認是開啓的。

app:hintEnabled="false"複製代碼

對於android:hint="帳號"屬性在TextInputLayout或者在EditText中設置均可以達到咱們浮動標籤的效果，可是不能在二者中同時使用設置hint，當二者同時使用時沒有獲取焦點時都會顯示hint(兩個hint重疊顯示)，獲取焦點時TextInputLayout設置的hint會成爲懸浮標籤，可是此時EditText設置的hint不會消失，有輸入內容時纔會消失，具體緣由能夠本身閱讀源碼查看，代碼很少，很容易看出來。對於浮動標籤顯示隱藏切換有一個過渡動畫，能夠經過 app:hintAnimationEnabled="boolean"設置。

若是咱們此時想在帳號那一欄後面加個字數統計，例如通常狀況咱們的帳號是固定位數的，若是使用手機號做爲咱們的登陸帳號，此時咱們加一個統計輸入長度能夠提示用戶固然也能夠超過位數時限制其輸入，咱們只須要在TextInputLayout加入

app:counterEnabled="true"複製代碼

默認是關閉的，固然咱們能夠設置一個輸入的最大長度，此處設置11.

app:counterMaxLength="11"複製代碼

當咱們設置輸入的最大技術長度11時並非到達11後不能再輸入計數，而是會以一種顏色提示用戶強調超過設置長度。

TextInputLayout提供了設置錯誤提醒的功能，在此篇文章中咱們用手機號及密碼至少6位作判斷，

if (TextUtils.isEmpty(account)||!isAccountValid(account)) {
            accountinput.setError(getString(R.string.error_invalid_account));
       }

   if (TextUtils.isEmpty(password)||!isPasswordValid(password)) {
            passwordinput.setError(getString(R.string.error_invalid_password));
        }
   private boolean isAccountValid(String name) {
        //TODO: Replace this with your own logic
        Pattern pattern= Pattern.compile("^(13[0-9]|14[5|7]|15\\d|17[6|7]|18[\\d])\\d{8}$");
        return pattern.matcher(name).matches();
        }

    private boolean isPasswordValid(String password) {
        //TODO: Replace this with your own logic
        return password.length() > 6;
    }複製代碼

當咱們輸入不符合規則，設置錯誤，顯示效果以下，

這裏寫圖片描述

對於設置錯誤，能夠經過app:errorEnabled="boolean"或者代碼accountinput.setEnabled(boolean);將其打開或者關閉，當經過accountinput.setError()設置錯誤時源碼中默認調用setEnabled（true）打開，無需本身再次調用，還有一個注意的地方設置後不會自動取消，須要本身調用accountinput.setError(null);取消錯誤提示。例如在上面圖示提示錯誤後，咱們在編輯該EditText時須要取消錯誤提示，那麼咱們能夠經過addTextChangedListener監聽，代碼以下

mAccountView.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) {
                if(accountinput.getError()!=null){
                    accountinput.setError(null);
                }
            }
        });複製代碼

當咱們編輯時回調執行，咱們經過getError獲取設置的錯誤信息，若是設置的有內容則返回設置的字符，默認爲null。

對於輸入密碼的空間咱們經過TextInputLayout中EditText 的android:inputType="textPassword"設置輸入密碼，此時咱們能夠在右側看到一個眼睛的密碼開關實現將密碼顯示或隱藏。若是咱們不想顯示這個眼睛圖標能夠在TextInputLayout中加入

app:passwordToggleEnabled="false"複製代碼

此時就看不到眼睛的圖標，密碼也不在隱藏，當咱們想將眼睛的圖標設置爲咱們本身設計的圖標時，能夠經過下面代碼設置

app:passwordToggleDrawable="@drawable/common_full_open_on_phone"複製代碼

咱們還能夠經過passwordToggleTint給圖標設置着色而且經過passwordToggleTintMode設置對應模式，達到更好看的效果。
是否是很簡單，這些功能要在以前佈局確定須要一大堆代碼的，而如今很簡單，只要幾行代碼。

自定義EditText下劃線樣式

這裏寫圖片描述

默認狀況下EditText的下劃線是灰色的，當獲取焦點時顏色是colorAccent，如上圖，若是咱們想自定義，能夠給TextInputLayout加一個theme，以下代碼

android:theme="@style/customLineColor"複製代碼

customLineColor樣式爲colorControlNormal爲沒有獲取焦點時的顏色，colorControlActivated爲獲取焦點時的顏色，這樣就能夠設置咱們想要的顏色了。

<style name="customLineColor" parent="Theme.AppCompat.Light">
    <item name="colorControlNormal">@color/colorAccent</item>
     <item name="colorControlActivated">@color/drawerTextColor</item>
    </style>複製代碼

自定義浮動標籤

默認狀況下浮動標籤的顏色也是colorAccent，咱們能夠經過hintTextAppearance設置浮動標籤字體樣式，如
app:hintTextAppearance="@style/hintAppearance"，

<style name="hintAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">@color/colorPrimary</item>
    </style>複製代碼

自定義錯誤提示信息

app:errorTextAppearance="@style/errorAppearance"

<style name="errorAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">@color/red</item>
    </style>複製代碼

自定義超出計數最大長度樣式

app:counterOverflowTextAppearance="@style/counterOverflowTextAppearance"

<style name="counterOverflowTextAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">@color/red</item>
    </style>複製代碼

監控虛擬鍵盤

經過上面的介紹，咱們將TextInputLayout的使用及經常使用的設置都已經都介紹了，既然文章名字是登陸界面，下面簡單介紹一下其餘一些比較多登陸界面的一些實現。如當焦點在帳戶上，咱們輸入完成後直接點擊虛擬鍵盤上的下一項時焦點直接跳到密碼項，密碼輸入完成，直接能夠點擊虛擬鍵盤的肯定就能夠登陸，該怎麼實現呢。以下
在帳號的EditText中加入

android:imeActionId="@+id/password"
                android:imeOptions="actionNext"複製代碼

在密碼的EditText中加入

android:imeActionId="@+id/account_sign_in_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設置addTextChangedListener監聽，監聽兩個控件只有有沒填項就將登陸按鈕設置爲不能夠點擊，不然能夠點擊，核心代碼

if (account.equals("")||password.equals("")){
                    mAccountSignInButton.setClickable(false);
                    mAccountSignInButton.setTextColor(getResources().getColor(R.color.btninvalid));
                }else{
                    mAccountSignInButton.setClickable(true);
                    mAccountSignInButton.setTextColor(getResources().getColor(R.color.white));
                }複製代碼

#多帳號自動提示
AutoCompleteTextView是EditText的子類，能夠實現自動提示功能該控件有一個setAdapter方法，能夠監測咱們輸入的內容在傳入的適配器中有數據時會自動彈出下拉提示，在文章開始效果圖已經展現，代碼簡單實現

private  String[] accounts = { "18236593333", "13463373657", "18235784765", "18234637686" };

        ArrayAdapter<String> arrayAdapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,accounts);
        mAccountView.setAdapter(arrayAdapter);//輸入至少兩個字符纔會提示複製代碼

Ok,到這裏本篇文章就結束了，有問題歡迎留言指出，Have a wonderful day .