【Android - MD】之TextInputLayout的使用

TextInputLayout是Android 5.0新特性——Material Design中的一个布局控件，主要用来嵌套EditText，实现数据输入时的一些效果，如：

• 当输入框获取焦点时，输入提示语会动画移动到输入框上方；
• 当输入框失去焦点时，如果输入框中没有文本，则提示语动画移动回到输入框中；
• 当输入不合规范时，会在输入框下方显示错误提示语；
• 当输入的是密码时，可以选择是否显示“显示密码”的按钮以及按钮的图案；
• 可以显示输入框中当前文本的长度和要求的长度，等。

需要特别注意的是，TextInputLayout作为一个布局控件，不能独立存在，必须嵌套在EditText或TextInputEditText外层。

和其他MD控件一样，使用TextInputLayout之前必须在gradle文件中声明依赖：

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

1、TextInputLayout的属性：

        app:passwordToggleEnabled：是否显示可以查看密码的Toggle按钮        app:passwordToggleDrawable：查看密码的Toggle按钮的图片        注：只有当包裹的EditText或TextInputEditText的InputType是密码格式时才会显示这个图标        app:counterEnabled：是否显示文本长度计数器        app:counterMaxLength：文本长度计数器的最大长度        注：文本长度计数器就是在输入框的右下角显示“X/Y”字样，X表示当前输入框中的文本长度，Y表示规定的输入长度            如果用户输入的长度超过Y，则文本计数器中的文本会变色提示

2、布局代码示例：

<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:orientation="vertical">    <!-- 使用TextInputLayout包裹EditText -->    <android.support.design.widget.TextInputLayout        android:id="@+id/textinputlayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:counterEnabled="true"        app:counterMaxLength="6"        app:passwordToggleDrawable="@mipmap/ic_launcher"        app:passwordToggleEnabled="true">        <!-- 这里的TextInputEditText可以使用EditText代替 -->        <android.support.design.widget.TextInputEditText            android:id="@+id/edittext"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:inputType="textPassword" />    </android.support.design.widget.TextInputLayout></LinearLayout>

运行结果如下图：

3、错误提示：

TextInputLayout支持错误提示，即当经过判断，当前输入的文本不符合要求时，就会在输入框下方显示一行提示，提示输入错误。通过调用TextInputLayout对象的setErrorEnabled()、setError()方法可以实现这一功能。具体代码如下：

        // 是否可以弹出错误提示语        til.setErrorEnabled(true);        // 获取TextInputLayout中包裹的EditText        EditText et = til.getEditText();        // 当EditText中的文本发生变化时处理TextInputLayout的错误提示语及其显隐        et.addTextChangedListener(new TextWatcher() {            @Override            public void beforeTextChanged(CharSequence s, int start, int count, int after) {            }            @Override            public void onTextChanged(CharSequence s, int start, int before, int count) {                try {                    if ("".equals(s + "")) {                        // 设置错误提示语为null，即不显示错误提示语                        til.setError(null);                    } else if (s.length() > 6) {                        // 如果输入长度超过6位，则显示错误提示                        til.setError("密码长度超过上限！");                    } else {                        Integer.parseInt(s + "");                        til.setError(null);                    }                } catch (Exception e) {                    // 设置错误提示语为具体的文本                    til.setError("输入内容不是数字！");                }            }            @Override            public void afterTextChanged(Editable s) {            }        });

演示结果如图所示：

以上就是对TextInputLayout的基本用法的介绍，下面贴出码云中的源码，供大家参考。

DEMO地址