TextInputLayout是22.2.0新添加的控件， 要和EditText(或EditText的子類(lèi)）結(jié)合使用，并且只能包含一個(gè)EditText(或EditText的子類(lèi)）。

TextInputLayout繼承關(guān)系如下：

java.lang.Object
   ?    android.view.View
       ?    android.view.ViewGroup
           ?    android.widget.LinearLayout
               ?    android.support.design.widget.TextInputLayout

TextInputLayout基本用法

1. 首先要引入design和appcompat-v7兼容包:

compile 'com.android.support:design:25.2.0'
compile 'com.android.support:appcompat-v7:25.2.0'

2. 在布局文件添加如下代碼

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_account"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/pd_10">

    <EditText
        android:id="@+id/et_account"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/form_username"/>

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

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_password"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/pd_10">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/tiet_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/form_password"
        android:inputType="textPassword"/>

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

一般情況下，EditText獲得光標(biāo)的時(shí)候hint會(huì)自動(dòng)隱藏，這樣不是很友好。這時(shí)候TextInputLayout就派上用場(chǎng)了，TextInputLayout是LinearLayout的子類(lèi)，用于輔助顯示提示信息。當(dāng)EditText獲取得光標(biāo)的時(shí)候，EditText的hint會(huì)自己顯示在上方，并且有動(dòng)畫(huà)過(guò)渡。

2017-04-13 15_22_21.gif

TextInputLayout錯(cuò)誤提示

TextInputLayout還可以處理錯(cuò)誤并給出相應(yīng)提示，比如在上面的其他上我們添加一個(gè)登錄按鈕，點(diǎn)擊登錄按鈕的時(shí)候要驗(yàn)證密碼長(zhǎng)度為6-18個(gè)字符。

1. 首先在布局上添加一個(gè)登錄按鈕：

    <Button
        android:id="@+id/btn_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/pd_10"
        android:layout_margin="@dimen/pd_10"
        android:text="@string/login"/>

2. 添加一個(gè)顯示錯(cuò)誤提示并獲取焦點(diǎn)的方法：

    /**
     * 顯示錯(cuò)誤提示，并獲取焦點(diǎn)
     * @param textInputLayout
     * @param error
     */
    private void showError(TextInputLayout textInputLayout,String error){
        textInputLayout.setError(error);
        textInputLayout.getEditText().setFocusable(true);
        textInputLayout.getEditText().setFocusableInTouchMode(true);
        textInputLayout.getEditText().requestFocus();
    }

3. 添加驗(yàn)證用戶名和密碼方法：

    /**
     * 驗(yàn)證用戶名
     * @param account
     * @return
     */
    private boolean validateAccount(String account){
        if(StringUtils.isEmpty(account)){
            showError(til_account,"用戶名不能為空");
            return false;
        }
        return true;
    }

    /**
     * 驗(yàn)證密碼
     * @param password
     * @return
     */
    private boolean validatePassword(String password) {
        if (StringUtils.isEmpty(password)) {
            showError(til_password,"密碼不能為空");
            return false;
        }

        if (password.length() < 6 || password.length() > 18) {
            showError(til_password,"密碼長(zhǎng)度為6-18位");
            return false;
        }

        return true;
    }

4. 給登錄按鈕設(shè)置點(diǎn)擊事件，在觸發(fā)點(diǎn)擊事件的時(shí)候獲取用戶名和密碼，并驗(yàn)證用戶名和密碼格式：

private Button btn_login;
private TextInputLayout til_account;
private TextInputLayout til_password;


btn_login = (Button) findViewById(R.id.btn_login);
btn_login.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        String account = til_account.getEditText().getText().toString();
        String password = til_password.getEditText().getText().toString();

        til_account.setErrorEnabled(false);
        til_password.setErrorEnabled(false);

        //驗(yàn)證用戶名和密碼
        if(validateAccount(account)&&validatePassword(password)){
            Toast.makeText(TextInputLayoutActivity.this,"登錄成功",Toast.LENGTH_LONG).show();
        }
    }
});

這個(gè)示例簡(jiǎn)單判斷了用戶名非空和密碼非空和長(zhǎng)度判斷，并給出相應(yīng)提示。

2017-04-13 17_02_26.gif

TextInputEditText

TextInputEditText繼承關(guān)系如下：

java.lang.Object
   ?    android.view.View
       ?    android.widget.TextView
           ?    android.widget.EditText
               ?    android.support.v7.widget.AppCompatEditText
                   ?    android.support.design.widget.TextInputEditText

由繼承關(guān)系可以看出TextInputEditText是EditText的一個(gè)子類(lèi)。上面的例子中，你會(huì)看到用戶輸入控件使用的是的EditText，而密碼輸入控件則使用了TextInputEditText，這里是為了對(duì)比一下兩者的區(qū)別。

官方文檔是這樣描述的：

A special sub-class of EditText
designed for use as a child of TextInputLayout.
Using this class allows us to display a hint in the IME when in 'extract' mode.

大概意思為：TextInputEditText作為EditText的子類(lèi)，為TextInputLayout設(shè)計(jì)的一個(gè)子容器。輸入法在'extract'模式的時(shí)候，使用TextInputEditText類(lèi)允許顯示提示。

還是上面的例子，我們把手機(jī)設(shè)置為橫向，再看一下效果：

2017-04-13 20_31_51.gif

由此可見(jiàn)TextInputEditText的設(shè)計(jì)就是修復(fù)了這個(gè)缺陷，所以TextInputLayout和TextInputEditText配合使用的效果最好!

示例托管在:GitHub