须要输入框？试试TextInputLayout

版权声明：

本帐号发布文章均来自公众号，承香墨影（cxmyDev），版权归承香墨影全部。

未经容许，不得转载。

1、前言

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'

2、什么是TextInputLayout？

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

相似以下效果：

til-demo.gif

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

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

TIL 其实就是咱们对表单录入的一个基本要求，例如实现一个简单的登陆页面，彻底是能够知足咱们的需求的，而且它还属于 Material Design 的效果规范。

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

3、使用TextInputLayout

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

til-layout.png

在使用过程当中，是能够不用为 TIL 中的 EditText 单独设定 id 进行操做的，大部分操做都是能够经过 TIL 自身的 API 进行操做的，若是是在须要操做 EditText 对象，TIL 也提供了对应的 getEditText() 方法，来获取其内的 EditView 对象。

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

一、使用 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 便可，可是也须要了解一下如何修改它的其余属性。

二、使用错误提示

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

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

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

三、使用密码开关

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 中的设定进行修改。

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

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

相关属性和方法：

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

能够单独使用 counterEnabled ，也能够配合 counterMaxLength 使用。

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

五、修改样式

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

til-style.png

4、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 ，而是对其进行多个布局的包装，让不一样的功能单独拆分出来去实现。

5、结语

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

公众号二维码.jpg