EditText作為Android中最常用的組件之一，相信很多人對(duì)它都很熟悉，EditText有一個(gè)屬性hint,能提示我們輸入什么信息，當(dāng)用戶在EditText輸入文字時(shí)，hint屬性提示的文字就消失了。
說到這，就要介紹今天的主角TextInputLayout了，使用TextInputLayout能讓hint屬性提示的文字在用戶輸入時(shí)不消失，而是顯示為EditText上方的浮動(dòng)標(biāo)簽。

一、TextInputLayout的簡(jiǎn)單使用

慣例，使用前先添加依賴

dependencies {
    compile 'com.android.support:design:25.3.1'
}

TextInputLayout繼承自LinearLayout，是一個(gè)容器。跟ScrollView只能嵌套一個(gè)子元素特性一樣，TextInputLayout也只接受一個(gè)子元素。子元素需要是一個(gè)EditText

布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp">

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

        <EditText
            android:id="@+id/et_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Username"
            android:inputType="textEmailAddress" />

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


    <EditText
        android:id="@+id/et_normal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Normal"
        android:inputType="textEmailAddress" />

</LinearLayout>

上面的布局文件中有2個(gè)EditText，都聲明了hint屬性，其中一個(gè)EditText用
TextInputLayout包裹了，另外一個(gè)沒有.
PS: 其實(shí)hint屬性直接設(shè)置給TextInputLayout也是可以的

來(lái)看看效果圖：

關(guān)于Android Design Support Library主題

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

我們?cè)贏ndroidStudio中創(chuàng)建項(xiàng)目時(shí)，系統(tǒng)在res/values/style.xml中的主題一般向上面這樣，大多數(shù)時(shí)候我們只是在這里去除ActionBar:

Theme.AppCompat.Light.NoActionBar

Material Design設(shè)計(jì)語(yǔ)言鼓勵(lì)大家使用充滿活力的鮮艷色彩，并在同一界面建議使用三種色調(diào)，Android Design Support Library中每個(gè)控件的設(shè)計(jì)顏色都來(lái)自 style.xml 中 theme 指定的三種顏色。
在此處，我們通過修改 colorAccent 屬性便可以指定 TextInputLayout 的浮動(dòng)標(biāo)簽的字體顏色以及 EditText 的下劃線顏色。

 <item name="colorAccent">@android:color/holo_blue_dark</item>

二、TextInputLayout的一些屬性、方法

屬性

android:hint=""    直接把hint屬性設(shè)置給TextInputLayout也是可以的
android:textColorHint=""  hint提示內(nèi)容的顏色（在下劃線上時(shí)）
app:hintEnabled="true"    設(shè)置是否可以使用hint屬性，默認(rèn)是true
app:hintAnimationEnabled="false"      控制hint提示信息的動(dòng)畫是否開啟
app:hintTextAppearance=""   設(shè)置hint提示文本（在浮動(dòng)標(biāo)簽時(shí)）的樣式（大小、顏色等等）
app:errorTextAppearance=""  設(shè)置錯(cuò)誤信息文本的樣式（大小、顏色等等）

方法

getEditText()    返回TextInputLayout包裹的EditText

getHint()     返回TextInputLayout包裹的EditText中的hint信息
setHint()     設(shè)置TextInputLayout包裹的EditText中的hint信息

setError()            設(shè)置錯(cuò)誤顯示信息
setErrorEnabled()        設(shè)置錯(cuò)誤信息是否顯示，true顯示，false不顯示

當(dāng)然，Android中的屬性和方法一般是一一對(duì)應(yīng)的，你既可以在布局文件中設(shè)置，也可以通過代碼設(shè)置。

三、TextInputLayout處理錯(cuò)誤

在以前，我們一般都是在提交信息時(shí)才檢驗(yàn)EditText中內(nèi)容格式正不正確，如果用戶輸入了一大堆信息之后你再提示用戶輸入的格式不正確，這是一種很糟糕的體驗(yàn)。

而用TextInputLayout處理錯(cuò)誤，可以實(shí)時(shí)驗(yàn)證EditText的內(nèi)容，反饋結(jié)果給用戶，防止用戶輸入無(wú)效的、錯(cuò)誤的信息。

public class MainActivity extends AppCompatActivity {

    private EditText etName;
    private TextInputLayout mTextInputLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        etName = (EditText) findViewById(R.id.et_name);
        mTextInputLayout = (TextInputLayout) findViewById(R.id.textInputLayout);

        /**
         * 為EditText 添加文本內(nèi)容改變時(shí)的監(jiān)聽
         */
        etName.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) {
                if (s.length() < 6) {
                    mTextInputLayout.setErrorEnabled(true);
                    mTextInputLayout.setError("用戶名不能小于6位");
                } else {
                    mTextInputLayout.setErrorEnabled(false);
                }
            }

            @Override
            public void afterTextChanged(Editable s) {
            }
        });
    }
}

在EditText 內(nèi)容發(fā)生改變時(shí)，我們通過判斷EditText 內(nèi)容來(lái)提示用戶，這里我判斷EditText 內(nèi)容長(zhǎng)度是否小于6，當(dāng)然，你完全可以在這里通過正則表達(dá)式判斷更多的東西.

可以看到，在EditText 內(nèi)容不正確的時(shí)候，下方有一個(gè)錯(cuò)誤信息顯示，同時(shí)EditText 的下劃線變成紅色，這樣就能實(shí)時(shí)的提示用戶輸入的內(nèi)容是否正確了.

TextInputLayout使用比較簡(jiǎn)單，就介紹到這里，現(xiàn)在市場(chǎng)上有這種效果的app不是很多，不過相信在以后這種效果的app會(huì)慢慢變多的。