Material Design （二），TextInputLayout的使用

前言

 一般登录注册界面都需要EditText这个控件来让用户输入信息，同时我们一般会设置一个标签（使用TextView）和EditText的hint属性来提示用户输入的内容，而设计库中高级组件TextInputLayout则专门为EditText设计的，即通过使用TextInputLayout包裹EditText实现当用户开始输入时hint属性值将显示在EditText上面作为一个提示标签，这个过程还带有动画效果，这样就避免了用户输入时输入提示消失的情况，同时，还可以更好地向用户提示错误输入信息。

TextInputLayout的两个功能：

1. 给EditText添加一个带有动画效果的提示标签（利用EditText的hint属性的值作为提示标签内容）；
2. 处理错误输入，将错误输入提示信息显示在EditText附近，便于提示用户更好地完成输入。

1. 实现浮动标签提示效果

 TextInputLayout和FrameLayout一样都是一个ViewGroup，而TextInputLayout包裹的是EditText，并且会将EditText的android:hint属性值作为提示标签，所以，使用非常简单，如下：

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_margin="20dp"
        android:id="@+id/usernameWraper"
        android:layout_height="wrap_content">
        <EditText
            android:layout_width="match_parent"
            android:hint="请输入用户名"
            android:layout_height="wrap_content"/>

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

用TextInputLayout包裹EditText并给EditText设置了hint属性后，这个EditText就带有了浮动提示标签的效果了，为了更好地看到效果，丰富一下这个xml布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">

    <RelativeLayout  android:layout_width="match_parent" android:background="#ff9900" android:layout_height="200dp">

        <TextView  android:text="用户登录" android:layout_centerInParent="true" android:layout_width="wrap_content" android:textColor="#fff" android:textSize="30sp" android:layout_height="wrap_content"/>
    </RelativeLayout>

    <android.support.design.widget.TextInputLayout  android:layout_width="match_parent" android:layout_margin="20dp" android:id="@+id/usernameWraper" android:layout_height="wrap_content">
        <EditText  android:layout_width="match_parent" android:hint="请输入用户名" android:layout_height="wrap_content"/>

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

    <android.support.design.widget.TextInputLayout  android:layout_width="match_parent" android:layout_margin="20dp" android:id="@+id/passwordWraper" android:layout_height="wrap_content">
        <EditText  android:layout_width="match_parent" android:hint="请输入密码" android:layout_height="wrap_content"/>

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

    <Button  android:layout_width="match_parent" android:layout_margin="20dp" android:text="登录" android:id="@+id/btn_login" android:layout_height="wrap_content"/>
</LinearLayout>

2. 显示错误输入信息

 TextInputLayout使得我们在验证输入数据是可以更加方便地显示错误输入提示，这样可以使得输入更加友好。

对于处理错误信息，TextInputLayout提供了两个方法：

1. setError(String message)：设置错误提示信息，这个信息将会显示在EditText附近。
2. setErrorEnabled(boolean enabled)：设置错误信息不可以用，也就是移除setError(String message)添加的错误提示信息。

代码例子：

package com.example.lt.meterialdesign;

import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.widget.Button;

public class LoginActivity extends AppCompatActivity implements View.OnClickListener {

    private TextInputLayout mUsernameWraper;
    private TextInputLayout mPasswordWraper;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        mUsernameWraper = (TextInputLayout) findViewById(R.id.usernameWraper);
        mPasswordWraper = (TextInputLayout) findViewById(R.id.passwordWraper);

        Button btn_login = (Button) findViewById(R.id.btn_login);
        btn_login.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        // TextInputLayout可以取得包裹的EditText
        String username = mUsernameWraper.getEditText().getText().toString().trim();
        String password = mPasswordWraper.getEditText().getText().toString().trim();
        if(TextUtils.isEmpty(username)){
            mUsernameWraper.setError("用户名不能为空");
            return;
        }else{
            // 移除错误提示信息
            mUsernameWraper.setErrorEnabled(false);
        }
        if(TextUtils.isEmpty(password)){
            mPasswordWraper.setError("密码不能为空");
            return;
        }else{
            // 移除错误提示信息
            mPasswordWraper.setErrorEnabled(false);
        }
    }
}

这里只是对用户名和密码是否为空进行了判断，如果要指定格式可以结合正则表达式验证数据格式。对于EditText可以给它添加文本改变监听addTextChangedListener，当用户改变输入的文本后进行数据格式的验证，然后更加情况显示输入提示。

运行效果：

可以看到，当我们开始在EditText中输入信息的时候，EditText的hint属性值将会显示在EditText上面，并且带有一个动画效果，显示为一个浮动标签。而且，当输入的数据格式不对时，还会显示错误提示在EditText下面。