TextInputLayout的使用

这篇博客是学习完 Android 6.0 的新控件 TextInputLayout 后所写。如有不妥之处，欢迎留言，谢谢~

接下来这几篇博客，我将学习 Android 5.0 以及 6.0 的一些新控件。每个新控件一篇博客，能拓展的，我也会学习如何扩展。学习完后，我将综合到一个案例中。

TextInputLayout 是 Android 6.0 时推出的新控件，是 Android Support Design Library 库中的一个控件。

效果图

什么也别说，没看到效果图，没有看下去的欲望。那行，先来看效果图：

Android API 中的简述

官方介绍说明

TextInputLayout介绍

从上图可知：

  1. TextInputLayout 是继承 LinearLayout ；
  2. 当被 TextInputLayout 包裹的 EditText 有 hint 提示，输入框中无内容 ，且获得焦点时，hint 将会浮到输入框的上面；
  3. 其是与 EditText 或 EditText的子类 进行搭配使用的，也就是说单独使用 TextInputLayout 是没有任何意义的；
  4. 同样的，TextInputLayout 也支持错误提示。

使用步骤

  1. 导入兼容库

    1
    compile 'com.android.support:design:23.3.0'

  2. 布局文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/et_username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.design.widget.TextInputEditText
            android:id="@+id/tiet_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </android.support.design.widget.TextInputLayout>

    不知道你有没有注意到，我这里使用的两个输入框是不一样的。一个是我们常见的 EditText ，另一个是 MD 中的输入框 TextInputEditText 。 TextInputLayout 中的源码中，是这样解释的：

  3. Java 代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    private void initData() {
        // 设置TextInputLayout提示信息
        mTilUsername.setHint("用户名");
        mEtUsername.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) {
                if (s.length() > 6) {
                    // 设置TextInputLayout显示错误提示
                    mTilUsername.setErrorEnabled(true);
                    // 设置TextInputLayout错误提示消息
                    mTilUsername.setError("用户名不能超过6位！");
                } else {
                    // 设置TextInputLayout隐藏错误提示
                    mTilUsername.setErrorEnabled(false);
                }
            }
            @Override
            public void afterTextChanged(Editable s) {
            }
        });
        // 设置TextInputLayout提示信息
        mTilPassword.setHint("密码");
        mTietPassword.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) {
                if (s.length() > 6) {
                    // 设置TextInputEditText的错误提示消息
                    mTietPassword.setError("密码不能超过6位！");
                }
            }
            @Override
            public void afterTextChanged(Editable s) {
            }
        });
    }

这样，TextInputLayout 的使用就算完成了。但是，还有一些属性需要说下。在上面的例子中，我采用的是 Java 代码进行设置的方式进行的，也可以使用在 XML 文件进行相应的设置。

在 XML 中常用的属性有：

1
2
3
4
android:hint="Hint" <!--设置提示文本-->
app:hintAnimationEnabled="true" ：<!--设置是否动画显示提示文本-->
app:hintEnabled="true" <!--设置提示是否可用-->
app:errorEnabled="true" <!--设置错误提示是否可用-->

在 Java 代码中常用的属性有：

1
2
3
4
5
6
setHint();// 设置提示文本
setHintAnimationEnabled();// 设置是否动画显示提示文本
setHintEnabled();// 设置提示是否可用
setErrorEnabled();// 设置错误提示是否可用
setError();// 设置错误信息
getEditText();// 获取 TextInputLayout 中的 EditText

错误消息提示的区别

上面说到了 TextInputLayout 也支持错误消息提示，那么其与EditText、TextInputEditText 的有什么区别呢？下图就是答案。两者的错误消息提示在呈现方式上是不同的。

项目地址

GitHub 传送门

TextInputLayout 的使用教程到此结束了。

作者简介：

刘广明(@cnLGMing)，一步一步往上爬。

个人博客 、GitHub 、知乎

文章若有不对之处，欢迎指正，谢谢~

版权声明：原创作品，转载时请务必注明原始出处。

留言

▲