TextInputLayout+EditText在註冊界面的使用（密碼的的隱藏和可見，imeOptions的使用）

本文主要利用註冊界面的例子介紹TextInputLayout和EditText一些屬性的使用

TextInputLayout是Design Support Library中的一個控件，使用的時候需要添加下面這個依賴

   compile 'com.android.support:design:25.3.1'

先看看運行效果吧

佈局代碼：

     <LinearLayout
        android:id="@+id/email_login_form"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:orientation="vertical">

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

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/prompt_username"
                android:imeOptions="actionNext"
                android:inputType="text"
                android:maxLines="1" />

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

        <android.support.design.widget.TextInputLayout
            android:id="@+id/tel_number"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:counterEnabled="true"
            app:counterMaxLength="11">

            <EditText
                android:id="@+id/editText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/pormpt_tel"
                android:imeOptions="actionNext"
                android:inputType="phone"
                android:maxLines="1" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:passwordToggleEnabled="true">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/prompt_password"
                android:imeOptions="actionNext"
                android:inputType="textPassword"
                android:maxLines="1" />

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

        <android.support.design.widget.TextInputLayout
            android:id="@+id/repeat_password"
            android:layout_width="match_parent"
            android:layout_height="match_parent"              app:passwordToggleDrawable="@drawable/password_visible_invisible"
            app:passwordToggleEnabled="true">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/prompt_repeat_password"
                android:imeActionId="@+id/register"
                android:imeActionLabel="@string/action_register"
                android:imeOptions="actionUnspecified"
                android:inputType="textPassword" />
        </android.support.design.widget.TextInputLayout>

        <Button
            android:id="@+id/register_btn"
            style="?android:textAppearanceSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="@string/action_register"
            android:textStyle="bold" />

    </LinearLayout>

1.帶計數的文本框

像手機號碼，身份證號碼等都有位數都是有固定值，而且還比較長，這個時候就應該把用戶輸入的字符長度統計出來，給予友好的提示，實現這個功能就可以利用
TextInputLayout下面兩個屬性

 app:counterEnabled="true"//開啓輸入計數功能
  app:counterMaxLength="11"//設置輸入字符的最大值

！注意： 使用者兩個屬性要在根標籤加上xmlns:app="http://schemas.android.com/apk/res-auto"命名空間，否則找不到兩個屬性

2密碼輸入框中的火眼晶晶，密碼快快顯出原形

密碼中加密和可見，利用TextInputLayout控件和容易實現，只需要設置下面的屬性即可

app:passwordToggleEnabled="true"

效果就會像上面密碼輸入框那樣

如果感覺只帶的小眼睛不好看，可以自定義那個圖案，使用

app:passwordToggleDrawable="@drawable/password_visible_invisible"

設置圖片，應爲，密碼可見和加密是兩種狀態，點擊圖片應該有相應的變化，使用selector 可以實現：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/eye_open"  android:state_checked="true"/>
    <item android:drawable="@drawable/eye_close" android:state_checked="false"/>
</selector>

3.錯誤提示的設置

家有家法，國有國法，簡單註冊也應該有有所限制，不能讓用戶隨意輸入一些信息。當用戶輸入不合法的時候應該給予提示：

使用TextInputLayout的setError( CharSequence error)方法設置當用戶輸入不合法時會在輸入框下面給予提示信息。EditText也有setError( CharSequence error)方法，
但與TextInputLayout顯示效果不一樣。

是一種懸浮效果，挺好的，但是密碼輸入框就有點坑了

密碼輸入框的小眼睛和錯誤提示位置衝突了，效果就好了。

4.EditText中的imeOptions屬性的使用，設置軟鍵盤回車鍵動作

該屬性值常用的有actiondone(完成)、actionNext（下一項，）、actionSearch（搜索）、actionSend（發送）

圖片中最後一個實現關鍵代碼現如下

                android:imeActionLabel="註冊"  //設置顯示的內容
                android:imeOptions="actionUnspecified" //不指定類型
                android:inputType="textPassword" 

使用imeOptions屬性需要設置android:inputType屬性，否則沒有效果

給回車鍵綁定事件，使用通setOnEditorActionListener方法設置相關監聽事件

TextInputLayout  repeatPassword = (TextInputLayout) findViewById(R.id.repeat_password);

 repeatPassword.getEditText().setOnEditorActionListener(new TextView.OnEditorActionListener() {
            @Override
            public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
                if(actionId == EditorInfo.IME_NULL){
                    register();//進行註冊操作
                    return  true;
                }
                return false;
            }
        });

源碼下載