淺析Android Material Design之TextInputLayout

Material Design(質感設計)是Google工程師基於傳統優秀的設計原則,結合豐富的創意和科學技術所發明的一套全新的界面設計語言,主要用於解決Android平臺界面風格不統一的問題。在2015年的Google I/O大會上退出的Design Support庫將Material Design中最具代表性的一些控件和效果進行了封裝，從而方便開發者調用相應的API來實現相應的MD風格。

本篇主要介紹TextInputLayout的使用。

首先聲明:
TextInputLayout是一個類似於LinearLayout存放空間的容器,TextInputLayout和ScrollView一樣只能接受一個子元素,並且子元素是EditText的類型。

接下來介紹TextInputLayout的使用:
首先添加Gradle依賴:

現在我們就可以使用TextInputLayout控件了。
佈局文件中具體使用:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.fuyunwang.myapplication.MainActivity">
    <android.support.design.widget.TextInputLayout
        android:id="@+id/accoutinput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="請輸入手機號"
        >
        <EditText
            android:id="@+id/accout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            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="請輸入密碼"
        >
        <EditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </android.support.design.widget.TextInputLayout>
    <Button
        android:id="@+id/accout_sign_in_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        style="?android:textAppearanceSmall"
        android:text="註冊"
        android:textStyle="bold"
        android:textColor="@color/colorAccent"
        android:background="@color/colorPrimary"
        />
</LinearLayout>

其中,android:hint屬性指定了浮動標籤所顯示的內容。當然也可以直接使該屬性失效:app:hintEnabled="false",
此外對於浮動標籤的顯示隱藏切換有一個過渡動畫,我們可以通過app:hintAnimationEnabled="false"來取消該效果。
指定輸入的最大值：app:counterMaxLength="11",一旦在xml代碼中指定了最大值,代碼中可以通過accountinput.getcounterMaxLength()來獲取設置的值。

設置錯誤提示:
首先確保錯誤提示的功能是開啓的。
xml方式:app:errorEnabled="true"
代碼方式:accountinput.setErrorEnabled(true)
如果要關閉錯誤提示:
取消錯誤提示:
方式一:

    accoutinput.setEnable(true);
    passwordinput.setEnable(true);
       //setEnabled設置之後不會自動的取消錯誤提示,只有置爲空之後纔會取消
        accoutinput.setError(null);
        passwordinput.setError(null);

方式二:

accountinput.setErrorEnable(false);
passwordinput.setErrorEnable(false);

方式三:

app:errorEnabled="false"    

我這裏辨析一下,xml和java代碼是一致的,其中errorEnable是表示是否開啓顯示錯誤的功能;error指的是當錯誤發生時在TextInputLayout下會有錯誤的提示並且我們仍然可以輸入;而enable不同,當我們設置爲false的時候,整個空間處於不可用的狀態,我們無法輸入值

常見使用方式:

     editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
            }
            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                if (charSequence.toString().length()>5){
                    inputLayout.setCounterMaxLength(5);
                    inputLayout.setError("您的輸入超出了5個字符");
//                    inputLayout.setEnabled(false);       當輸入的值爲6個的時候控件處於不可用狀態,一般這種處理方式極少用
                }else{
//                    inputLayout.setErrorEnabled(false); //注意此代碼作用相當於下面的兩行代碼
                    inputLayout.setEnabled(true);
                    inputLayout.setError(null);
                }
            }
            @Override
            public void afterTextChanged(Editable editable) {
            }
        });

在實際的應用中,如果我們需要在編輯的時候自動的取消錯誤的提示

        accout.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
            }
            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
            }
            @Override
            public void afterTextChanged(Editable editable) {
                if(accoutinput.getError()!=null){
                    accoutinput.setError(null);
                }
            }
        });

關於密碼效果的使用,在EditText中指定類型爲textPassword,並且在TextInputLayout中指定app:passwordToggleEnabled="true",可以得到密碼是否可見的效果。

   <android.support.design.widget.TextInputLayout
        android:id="@+id/passwordinput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="請輸入密碼"
        app:hintAnimationEnabled="false"
        app:passwordToggleEnabled="true"
        >
        <EditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            />
    </android.support.design.widget.TextInputLayout>

當然我們也會在輸入完成的時候取消煩人的軟鍵盤,此時我們可以在TextInputLayout上設置監聽事件onClick:

 <android.support.design.widget.TextInputLayout
            android:id="@+id/textInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:onClick="hideKeyBord"
            app:hintAnimationEnabled="true"
            app:counterMaxLength="5"
            app:errorEnabled="true"
            >
            <EditText
                android:id="@+id/editText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="text"
                android:hint="請輸入用戶名:"
                />
        </android.support.design.widget.TextInputLayout>

    public void hideKeyBord(View v) {
        View view=getCurrentFocus();
        if(null!=view){
            InputMethodManager manager= (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
            manager.hideSoftInputFromWindow(view.getWindowToken(),InputMethodManager.HIDE_NOT_ALWAYS);
        }
    }