受夠了原生EditText那種呆板的樣子了嗎，來給它加點料吧！

TextInputLayout.gif

首先添加依賴

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

開始編寫布局

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInput_name"
        // 設置hint的動畫
        app:hintAnimationEnabled="true"
        // 設置字數統計
        app:counterEnabled="true"
        // 設置統計字數的顏色
        app:counterTextAppearance="@color/colorPrimary"
        // 設置統計字數最大值，超出會有變色提示
        app:counterMaxLength="10"
        // 設置超出最大值style，就是輸入框提示的顏色
        app:counterOverflowTextAppearance="@style/counterOverflow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        
        // 這個看上去和EditText沒什么區(qū)別，繼承自AppCompatEditText，而AppCompatEditText繼承自EditText，只不過實現了TintableBackgroundView接口，沒試過，搜到的答案說是全屏狀態(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設置

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

代碼中的操作

我們在布局文件中寫了一個簡單的登錄頁面，需要驗證賬號是否正確，進行模擬登錄操作，下面我們看代碼。

布局文件中

    <?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){

        // 在進行判斷前把Error提示設置為false，取消掉錯誤提示，好處是輸入錯誤之后點擊了之后顯示取消顯示，再設置Error信息
        // 如果不在這里調用，兩次錯一個地方，很容易讓用戶混淆，以為點擊了之后沒有反應
        mTi_name.setErrorEnabled(false);
        mTi_pwd.setErrorEnabled(false);

        // TextInputLayout提供了獲取子view也就是EditText對象的方法。
        // TextInputLayout中只能有一個子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基本使用就結束了**