需要输入框？试试TextInputLayout

版权声明：

本账号发布文章均来自公众号，承香墨影（cxmyDev），版权归承香墨影所有。

未经允许，不得转载。

一、前言

Design Support Library 是 Google 发布的一个全新的兼容函数库，它可以在 Android 2.1 （Api level 7）及以上的设备中，实现 Material Design 的效果，这个函数库同时也提供了一系列控件。今天介绍的 TextInputLayout（以下简称 TIL） 就是其中之一。

在使用 Design Support Library 之前，需要在 build.gradle 文件中，添加依赖，这里使用的是 25.3.0。

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

二、什么是TextInputLayout？

TIL 继承自 LinearLayout ，可以用它实现 Material Design 效果的一个表单输入框。

类似如下效果：

til-demo.gif

从实现的功能可以看到，它在原本的 EditText 的基础之上，添加了一些表单录入必要的功能：

1. 输入提示，不同于原有 EditText 的 hint 属性，它可以在输入的时候，将提示的字符，通过一个动态的效果，显示在 EditText 的上面。
2. 错误提示，在有错误的信息录入的时候，可以通过一个友善的方式，将错误提示给用户。
3. 密码是否可见标志，这个常见于密码输入的时候，输入内容是否可用。
4. 输入的字符数量和最大输入限制并且显示。

TIL 其实就是我们对表单录入的一个基本要求，例如实现一个简单的登录页面，完全是可以满足我们的需求的，并且它还属于 Material Design 的效果规范。

这些效果，我们只需要使用 TIL 的属性和方法，即可完成这些功能，而在之前我们都需要开发者对其单独开发。

三、使用TextInputLayout

TIL 从名字上看也能猜到，它是一个 Layout ，并且是继承自 LinearLayout ，但是它只能容纳一个 EditText，而实际上从它设计的角度来看，也不推荐再在其内包含其它的 View 了，因为这样会破坏 TIL 原本的设计。

til-layout.png

在使用过程中，是可以不用为 TIL 中的 EditText 单独设定 id 进行操作的，大部分操作都是可以通过 TIL 自身的 API 进行操作的，如果是在需要操作 EditText 对象，TIL 也提供了对应的 getEditText() 方法，来获取其内的 EditView 对象。

这样就完成了 TIL 最基本的功能，接下来让我们把 TIL 的特性拆分出来，来看看实现个别功能需要使用到的属性。

1、使用 hint 效果

TIL 中，可以通过使用 hint 对输入的内容进行提示，当其内部的 EditText 获取到焦点的时候，将 hint 的内容上移。

在 TIL 中，使用 hint 效果，相关的属性和方法：

• android:hint ：设置 hint。
• app:hintEnabled：设置 hint 是否可见，默认为 true。
• app:hintAnimationEnabled：设置 hint 上移的时候是否有动画，默认为 true。
• app:hintTextAppearance：设置 hint 的样式。
• setHint()：设置 hint 。
• setHintAnimationEnabled()：设置 hint 是否可见。
• isHintAnimationEnabled()：判断当前 hint 的可见状态。

最简单的用法，就是只使用 android:hint 属性设置一次 hint 即可，但是也需要了解一下如何修改它的其他属性。

2、使用错误提示

TIL 中，错误一般都是在逻辑代码里，通过对输入数据的校验，来进行提示，但是同时也可以使用属性设置错误提示的样式。

在 TIL 中，使用错误提示的相关属性和方法：

• app:errorEnabled：是否显示错误提示。
• app:errorTextAppearance：设置错误提示的样式。
• setErrorEnabled()：设置错误是否可见。
• setErrorTextAppearance()：设置错误提示的样式。
• isErrorEnabled()：判断当前是否显示错误提示。
• setError()：设置错误提示的错误信息。

3、使用密码开关

TIL 在内部 EditText 的 android:inputType 为 xxxPassword 的时候，可以在 TIL 配置一个图标按钮，用于开启和关闭是否显示密码内容。

使用密码开关功能，使用到的相关属性和方法：

• app:passwordToggleEnabled：设置 password 开关是否可用。
• app:passwordToggleTint：设置 password 开关图标的 tint 着色。
• app:passwordToggleTintMode：设置 password tint 的模式。
• app:passwordToggleDrawable：设置 password 开关图标。
• setPasswordVisibilityToggleDrawable：设置 password 开关图标。
• isPasswordVisibilityToggleEnabled：设置 password 开关图标 是否可见。
• setPasswordVisibilityToggleTintList：设置 password 开关图标的 tint。
• setPasswordVisibilityToggleTintMode：设置 password 开关图标的 tint 模式。
• getPasswordVisibilityToggleDrawable：设置 password 开关图标。

一般来说，我们使用默认的眼睛样式的图标即可。如果一定需要修改，可以参见 Widget.Design.TextInputLayout 中的设定进行修改。

4、使用输入限制长度提示

TIL 也可以设定当前输入的字符长度，以及限定的字符长度。

相关属性和方法：

• app:counterEnabled：设置输入限制长度是否显示。
• app:counterMaxLength：设置最大输入字符长度。
• app:counterEnabled：设置输入字符提示是否显示。
• app:counterTextAppearance：设置输入字符长度提示的样式。
• setCounterEnabled()：设置长度显示是否显示。

可以单独使用 counterEnabled ，也可以配合 counterMaxLength 使用。

TIL 对输入支付长度的限制提示，如果超过 counterMaxLength 的限制，只是会变色提示，但是并不会让阻止用户继续输入。

5、修改样式

默认的样式其实已经够我们使用了，除了使用对应属性的 xxxTextAppearance 对其最终使用的 TextView 进行设定样式外。还可以在style 中，统一设定，具体每个属性的格式，可以参考Widget.Design.TextInputLayout 中的设定。

til-style.png

四、TextInputLayout细节探究

之前就说过，虽然 MD 的设计很酷炫，但是实际上，我们在学习它的使用过程中，有一些它设计上的优点，值得我们学习，这才是精髓部分。

看看上面介绍的 TIL 的一些特性的设置来看看他们具体是如何实现的。

首先先让我们看看最终显示出来的布局结构。

til-layout1.png

可以看到，虽然在我们设定的布局中，看着 EditText 是 TextInputLayot 的直接子 View ，但是从源码上看，在 TIL 中，会使用一个 FrameLayout 类型的 mInputFrame，将其添加到 TIL 中。

til-create.png

而真正遇到 EditText 的时候，却将其拦截下来，再添加到这个 mInputFrame 布局中。

til-addview.png

那么接下来看看 hint 属性的效果是如何实现的。

从布局结构上看，hint 的文字，是直接 draw 到 TIL 上的，所以它并不是和其他效果一样是用 TextView 堆起来的。

继续源码中找蛛丝马迹。

til-draw.png

可以看到，如果 hint 需要被显示，将会把具体的实现，托管给 mCollapsingTextHelper 来处理 hint 效果的逻辑，这里就不继续跟下去了，有兴趣的可以找出来看看。

从上面布局结构可以看到，除了 mInputFrame 之外，还有一个 LinearLayout 的布局，它用于承载 mErrorView(错误提示) 和 mCounterView（输入计数）。

til-a.png

这个 LinearLayout 就是 mIndicatorArea。当 mErrorView 被使用完之后，也有对应的代码逻辑将其从 mIndicatorArea 中移除掉。

到这里，TIL 的关键设计点就已经清楚了，它不像外部看到的布局那样，直接使用 EditText ，而是对其进行多个布局的包装，让不同的功能单独拆分出来去实现。

五、结语

到这里就结束了，之后再继续介绍 Support Design 里的其它控件。

公众号二维码.jpg