AndroidASD完全解析02之TextInputLayout

这是AndroidASD完全解析系列的第二篇，上一篇我们介绍过了NavigationView控件，这一篇我们介绍另外一个控件TextInputLayout，好了，不多说，下面我们直接进入主题。

概述

　　我们在编写登录或者注册页面的时候，都用到EditText这个控件，而且为了给用户良好的体验，会设置hint属性。但是使用这个属性有一个缺陷，就是：当EditText获得焦点的时候，hint就会消失，折让用户体验非常不好。现在这个有了很好的解决办法，就是使用TextInputLayout控件。TextInputLayout这个控件会在EditText获取到焦点的时候自动创建一个悬浮框，显示在hint属性里面设置的内容，并且可以设置动画，效果很酷炫。下面我们开始使用这个控件吧！

使用

这一篇，我们使用TextInputLayout这个控件写一个注册页面，输入的信息不会与服务器交互，只是画一个界面。

在使用TextInputLayout的时候同样需要先导入ASD库，很简单，直接在gradle中添加一句代码：

compile 'com.android.support:design:24.0.0'

导入这个库之后就可以直接在布局文件中使用了。

接着我们介绍一下TextInputLayout提供的方法和对应的XML属性：

• setErrorEnabled(boolean enabled)方法：设置是否显示错误信心，对应的是app:errorEnabled=”“属性，没有设置这个方法，但是在setError(CharSequence error)方法中有值传入，会默认设置为true。

• setHintAnimationEnabled(boolean)方法：设置是否显示出现Hint属性时候的动画，对应的XML属性是：app:HintAnimationEnabled=”“

• setHintTextAppearance(int)方法：通过TextAppearance指定hint里面字体的颜色，大小等，对应的XML属性是：app:hintTextAppearance=”“

• setHint(CharSequence)方法：设置Hint的值，对应的XML属性是：Android:hint=”“

• isHintAnimationEnabled()方法：返回是否允许设置Hint的动画

• isErrorEnabled()方法：获取到是否允许显示错误信息

• getHint()方法：获取到Hint显示的信息

• getError()方法：获取到需要显示的错误信息

• getEditText()方法：获取到TextInputLayout里面包含的EditText，这样我们就不在需要用到findViewById去获取EditText了。

常用的属性了方法就是这些，下面我们通过例子体会一下TextInputLayout的基本用法：

Activity代码：

package com.example.adsdemo;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.design.widget.TextInputLayout;import android.support.v7.app.AppCompatActivity;import android.text.Editable;import android.text.TextWatcher;import android.view.View;import android.widget.Button;import android.widget.EditText;/** * Created by Devin on 2016/8/12. */public class TILActivity extends AppCompatActivity {private TextInputLayout til_phone;private TextInputLayout til_name;private TextInputLayout til_pass;private TextInputLayout til_email;private EditText et_til_phone;private EditText et_til_name;private EditText et_til_pass;private EditText et_til_email;private Button btn_sign_up;@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_til);    til_phone = (TextInputLayout) findViewById(R.id.til_phone);    til_phone.setHint("请输入你的手机号");    til_name = (TextInputLayout) findViewById(R.id.til_name);    til_name.setHint("请输入用户名");    til_pass = (TextInputLayout) findViewById(R.id.til_pass);    til_pass.setHint("请输入密码");    til_email = (TextInputLayout) findViewById(R.id.til_email);    til_email.setHint("请输入邮箱");    et_til_phone = til_phone.getEditText();    et_til_phone.addTextChangedListener(new CustomTextWatcher(til_phone));    et_til_name = til_name.getEditText();    et_til_name.addTextChangedListener(new CustomTextWatcher(til_name));    et_til_pass = til_pass.getEditText();    et_til_pass.addTextChangedListener(new CustomTextWatcher(til_pass));    et_til_email = til_email.getEditText();    et_til_email.addTextChangedListener(new CustomTextWatcher(til_email));    btn_sign_up = (Button) findViewById(R.id.btn_sign_up);    btn_sign_up.setOnClickListener(new View.OnClickListener() {        @Override        public void onClick(View view) {            String phone = til_phone.getEditText().getText().toString().trim();            String name = til_name.getEditText().getText().toString().trim();            String pass = til_pass.getEditText().getText().toString().trim();            String email = til_email.getEditText().getText().toString().trim();            if (phone.equals("")) {                til_phone.setErrorEnabled(true);                til_phone.setError("手机号码不能为空");            } else if (name.equals("")) {                til_phone.setErrorEnabled(false);                til_name.setErrorEnabled(true);                til_name.setError("用户名不能为空");            } else if (pass.equals("")) {                til_name.setErrorEnabled(false);                til_pass.setErrorEnabled(true);                til_pass.setError("用户密码不能为空");            } else if (email.equals("")) {                til_pass.setErrorEnabled(false);                til_email.setErrorEnabled(true);                til_email.setError("用户邮箱不能为空");            } else {                til_email.setErrorEnabled(false);                ToastUtils.showToast(TILActivity.this, "恭喜你，注册成功");            }        }    });}private class CustomTextWatcher implements TextWatcher {    TextInputLayout mTextInputLayout;    public CustomTextWatcher(TextInputLayout textInputLayout) {        this.mTextInputLayout = textInputLayout;    }    /**     * @param charSequence 未改变之前的内容     * @param start        内容被改变的开始位置     * @param count        原始文字被删除的个数     * @param after        新添加的内容的个数     */    @Override    public void beforeTextChanged(CharSequence charSequence, int start, int count, int after) {    }    /**     * @param charSequence 改变之后的新内容     * @param start        内容被改变的开始位置     * @param before       原始文字被删除的个数     * @param count        新添加的内容的个数     */    @Override    public void onTextChanged(CharSequence charSequence, int start, int before, int count) {    }    /**     * @param editable 最终内容     */    @Override    public void afterTextChanged(Editable editable) {    }}}

这里面，EditText设置了一个文本观察者，但是没有实现具体的逻辑。

接着是XML布局的代码：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"          android:layout_width="match_parent"          android:layout_height="match_parent"          xmlns:app="http://schemas.android.com/apk/res-auto"          android:orientation="vertical"><LinearLayout    android:layout_width="match_parent"    android:layout_height="150dp"    android:orientation="vertical"></LinearLayout><android.support.design.widget.TextInputLayout    android:id="@+id/til_phone"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="vertical">    <EditText        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:hint="请输入你的手机号"        android:padding="5dp"/></android.support.design.widget.TextInputLayout><android.support.design.widget.TextInputLayout    android:id="@+id/til_name"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_marginTop="18dp"    android:orientation="vertical">    <EditText        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="top|left"        android:hint="请输入用户名"        android:padding="5dp"        android:paddingBottom="2dp"/></android.support.design.widget.TextInputLayout><android.support.design.widget.TextInputLayout    android:id="@+id/til_pass"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_marginTop="18dp"    android:orientation="vertical">    <EditText        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:hint="请输入密码"        android:padding="5dp"/></android.support.design.widget.TextInputLayout><android.support.design.widget.TextInputLayout    android:id="@+id/til_email"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_marginTop="18dp"    android:orientation="vertical">    <EditText        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:hint="请输入你的邮箱"        android:padding="5dp"/></android.support.design.widget.TextInputLayout><Button    android:id="@+id/btn_sign_up"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_marginTop="20dp"    android:padding="8dp"    android:text="完成注册"/></LinearLayout>

这里需要注意的是，一个TextInputLayout只能包含一个EditText，可以不用给EditText设置id属性，直接通过TextInputLayout的getEditText()方法获取到。其它的就没有什么了，我们看一下最终实现的效果图：

这里的Hint会默认有一个动画，也可以设置错误提示，非常酷炫。

以上就是TextInputLayout的基本使用，不是很复杂，最后附上TextInputLayout的国内镜像API：请猛戳这里