前言

本文是 Material Design 系列第四篇：TextInputLayout 主要是作为 EditText 的容器，从而为 EditText 生成一个浮动的 Label，当用户点击 EditText 的时候，EditText 中的 hint 字符串会自动移到 EditText 的左上角。

TextInputLayout 的简单使用，是 Google 推出的整个 Material Design 库的一个缩影：Google 将 UI 视觉效果设计得华丽且流畅，同时代码封装更为优雅，开发者只需要在 layout.xml 中写好布局文件，就可以轻松在手机屏幕上展现出魔法般的动画效果，实在是妙不可言。

一、TextInputLayout 相关 API

TextInputLayout 控件 API 官网列举了很多，这里只是整理出开发中常用属性，每个方法对应相关 XML 属性感兴趣的可以查查官网文档。

二、TextInputLayout 使用详解

1、基本使用

• 布局文件中只需要在 EditText 外层包裹一层 TextInputLayout 布局即可

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/userInputLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Username">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="14dp" />

</com.google.android.material.textfield.TextInputLayout>

2、开启错误提示

设置文本框输入最大长度，并且开启错误提示，当文本框输入文本长度超出时，报错显示。

// 开启错误提示
userInputLayout.setErrorEnabled(true);
// 开启计数
userInputLayout.setCounterEnabled(true);
// 设置输入最大长度
userInputLayout.setCounterMaxLength(10);

3、自定义浮动标签字体样式

默认浮动标签样式跟 APP 主题色 colorAccent 色值一致，所以需要自定义样式，修改标签字体大小和颜色

1. 自定义 style

<style name="hintAppearence" parent="TextAppearance.AppCompat">
    <item name="android:textSize">14dp</item>
    <item name="android:textColor">@color/colorPrimary</item>
</style>

2. 使用 setHintTextAppearance()方法加载自定义样式

userInputLayout.setHintTextAppearance(R.style.hintAppearence);

如图所示，Username 文本框是自定义样式效果，Password 文本框是系统默认效果

TextInputLayout 中所有关于样式的设置方式都采用这种方式，所以这里只举例一种，其他属性直接照搬即可使用 。

4、密码可见性切换

APP 登录界面密码框经常会遇到最右边有一个“小眼睛”图标，点击可以切换密码是否可见，以前我们实现时，使用一个 ImageView，然后根据点击事件判断标记位更新文本框的内容。现在使用 TextInputLayout 只需要一行代码即可轻松实现。

这里使用 XML 属性实现，对应的 setPasswordVisibilityToggleEnabled(boolean enabled) 方法

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:focusable="false"
    android:focusableInTouchMode="false"
    android:hint="Password"
    app:counterOverflowTextAppearance="@style/hintAppearence"
    app:hintTextAppearance="@style/hintAppearence"
    app:passwordToggleEnabled="true">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableStart="@drawable/ic_baseline_lock_24"
        android:drawablePadding="8dp"
        android:inputType="textPassword"
        android:textSize="14dp" />

</com.google.android.material.textfield.TextInputLayout>

以上文本框左边的 icon 使用 EditText 的android:drawableStart属性添加

5、文本框输入校验

一般情况下，APP 用户名称输入都会有校验功能，本文以用户名长度不大于 10 为例，如果超出时，输入框底部报错提示。

采用EditText.addTextChangedListener()方法实现，相信大家对这个监听方法并不陌生，因为没有 TextInputLayout 之前，这个应该是最常用的方式了。

注意：TextInputLayout.getEditText()方法获取的就是内部的 EditText 控件，所以不需要在 Activity 中在 findViewById 初始化 View

userInputLayout.getEditText().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) {
        // 文本发生变化时调用
    }

    @Override
    public void afterTextChanged(Editable s) {
        // 文本发生变化后调用
        if(userInputLayout.getEditText().getText().toString().trim().length()>10){
            userInputLayout.setError("用户名长度超出限制");
        }else{
            userInputLayout.setError(null);
        }
    }
});

以上五种使用方式应该是开发过程中最常见的功能了，官网关于 TextInputLayout 属性太多了，好多属性我自己到现在都没理解干什么的。不过只要掌握开发中这些常用的属性就足够了，TextInputLayout 底层实现了 LinearLayout，感兴趣的朋友可以查看阅读源码深入学习。

源码下载 源码包含 Material Design 系列控件集合，定时更新，敬请期待！

三、总结

本片文章已经是 Material Design 系列第四篇了，我会坚持把 Material Design 系列控件全部介绍完毕，最后会将所有的 Demo 整合一套源码分享给大家，敬请期待！相信看完我的博客对你学习 Material Design UI 控件有一定的帮助，因为我会把每个控件开发中的基本使用详细讲解，简单易懂。

我的微信：Jaynm888

欢迎点评，诚邀 Android 程序员加入微信交流群，公众号回复加群或者加我微信邀请入群。