Material Design ，TextInputLayout的使用

Posted 2020-09-30 gccbuaa

前言

?一般登录注冊界面都须要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属性值作为提示标签，所以。使用很easy，例如以下：

<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);
        }
    }
}

这里仅仅是对username与password是否为空进行了推断。假设要指定格式能够结合正則表達式验证数据格式。对于EditText能够给它加入文本改变监听addTextChangedListener，当用户改变输入的文本后进行数据格式的验证。然后更加情况显示输入提示。

执行效果：

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