受夠了原生EditText那種呆板的樣子了嗎，來(lái)給它加點(diǎn)料吧！

TextInputLayout.gif

首先添加依賴

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

開(kāi)始編寫布局

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInput_name"
        // 設(shè)置hint的動(dòng)畫
        app:hintAnimationEnabled="true"
        // 設(shè)置字?jǐn)?shù)統(tǒng)計(jì)
        app:counterEnabled="true"
        // 設(shè)置統(tǒng)計(jì)字?jǐn)?shù)的顏色
        app:counterTextAppearance="@color/colorPrimary"
        // 設(shè)置統(tǒng)計(jì)字?jǐn)?shù)最大值，超出會(huì)有變色提示
        app:counterMaxLength="10"
        // 設(shè)置超出最大值style，就是輸入框提示的顏色
        app:counterOverflowTextAppearance="@style/counterOverflow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        
        // 這個(gè)看上去和EditText沒(méi)什么區(qū)別，繼承自AppCompatEditText，而AppCompatEditText繼承自EditText，只不過(guò)實(shí)現(xiàn)了TintableBackgroundView接口，沒(méi)試過(guò)，搜到的答案說(shuō)是全屏狀態(tài)下有優(yōu)化
        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UserName"/>
    </android.support.design.widget.TextInputLayout>

overflowStyle設(shè)置

    <style name="counterOverflow">
        <item name="android:textColor">@color/red</item>
    </style>

代碼中的操作

我們?cè)诓季治募袑懥艘粋€(gè)簡(jiǎn)單的登錄頁(yè)面，需要驗(yàn)證賬號(hào)是否正確，進(jìn)行模擬登錄操作，下面我們看代碼。

布局文件中

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="@dimen/activity_horizontal_margin"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:gravity="center"
        android:text="Welcome"
        android:textColor="@android:color/black"
        android:textSize="30sp"/>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInput_name"
        app:hintAnimationEnabled="true"
        app:counterEnabled="true"
        app:counterTextAppearance="@color/colorPrimary"
        app:counterOverflowTextAppearance="@style/Widget.Design.TextInputLayout"
        app:counterMaxLength="10"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UserName"/>
    </android.support.design.widget.TextInputLayout>

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

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:inputType="numberPassword"/>
    </android.support.design.widget.TextInputLayout>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:onClick="click"
        android:layout_marginTop="50dp"
        android:text="Login"/>

</LinearLayout>

代碼中

    public class MainActivity extends AppCompatActivity {

    private static final String TAG = MainActivity.class.getSimpleName();
    private TextInputLayout mTi_name;
    private TextInputLayout mTi_pwd;

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

        mTi_name = (TextInputLayout) findViewById(R.id.textInput_name);
        mTi_pwd = (TextInputLayout) findViewById(R.id.textInput_pwd);
    }

    public void click(View view){

        // 在進(jìn)行判斷前把Error提示設(shè)置為false，取消掉錯(cuò)誤提示，好處是輸入錯(cuò)誤之后點(diǎn)擊了之后顯示取消顯示，再設(shè)置Error信息
        // 如果不在這里調(diào)用，兩次錯(cuò)一個(gè)地方，很容易讓用戶混淆，以為點(diǎn)擊了之后沒(méi)有反應(yīng)
        mTi_name.setErrorEnabled(false);
        mTi_pwd.setErrorEnabled(false);

        // TextInputLayout提供了獲取子view也就是EditText對(duì)象的方法。
        // TextInputLayout中只能有一個(gè)子View，必須是EditText
        String name = mTi_name.getEditText().getText().toString();
        String pwd = mTi_pwd.getEditText().getText().toString();

        if (TextUtils.isEmpty(name)){
            mTi_name.setError("username not null");
            return;
        }else if (TextUtils.isEmpty(pwd)){
            mTi_pwd.setError("password not null");
            return;
        }

        if (!name.equals("odriver")){
            mTi_name.setError("username not exist");
            return;
        }else if (!pwd.equals("123456")){
            mTi_pwd.setError("pwd error");
            return;
        }
        Snackbar.make(view,"Login success", Snackbar.LENGTH_SHORT).show();

    }
}

** 好了，TextInputLayout基本使用就結(jié)束了**