关于TextInputLayout的二三事

在谷歌的MaterialDesign中，文本输入是这样表现的：当用户点击输入框想要输入文字时，如果输入框是空的，那么它的提示文字（hint）就会变小并且同时移动到输入框的上方。如果文字不为空，则上方一直浮着这个提示文字）。并且在I/O大会的视频上，我们可以看到整个的动画过程很优美流畅。在design support library中，TextInputLayout就是提供了它的实现。

使用

通过TextInputLayout来实现上述这种效果很简单，就是在布局代码中EditText外面再套上TextInputLayout就可以了，代码如下。注意一个TextInputLayout只能套一个EditText，否则会抛异常。

screenshot_1.png

(注：这里我用了自定义的ValidatedTextInputLayout，就是在TextInputLayout的基础上增加了验证功能)

**XML属性&常用方法 **

属性名	相关方法	描述
app:counterEnabled	setCounterEnabled(boolean)	设置是否显示一个计数器，布尔值
app:counterMaxLength	setCounterMaxLength(int)	设置计数器的最大计数数值，整型
app:errorEnabled	setErrorEnabled(boolean)	设置是否显示一个错误信息，布尔值
app:hintEnabled	setHintEnabled(boolean)	设置是否要用这个浮动标签的功能，布尔值
app:hintAnimationEnabled	setHintAnimationEnabled(boolean)	设置是否要显示输入状态时候的动画效果，布尔值
app:hintTextAppearance	setHintTextAppearance(int)	设置提示文字的样式(注意这里是运行了动画效果之后的样式)

当文本输入类型为密码时，系统提供了一个开关来控制密码是否可见（默认为眼睛）。此为design包24.0.2新提供的功能。

属性名	相关方法	描述
passwordToggleEnabled	setPasswordVisibilityToggleEnabled(boolean)	控制密码可见开关是否启用。**设为false则该功能不启用，密码输入框右侧也没有控制密码可见与否的开关
rpasswordToggleDrawable	setPasswordVisibilityToggleDrawable(Drawable)	设置密码可见开关的图标。通常我们会在不同的情况下设定不同的图标，可通过自定义一个selector，根据state_checked属性来控制图标的切换
passwordToggleTint	setPasswordVisibilityToggleTintList(ColorStateList)	控制密码可见开关图标的颜色。在开启或关闭的状态下我们可以设定不同的颜色，可通过自定义一个color的selector，根据state_checked和state_selected属性来控制颜色的切换
passwordToggleTintMode	setPasswordVisibilityToggleTintMode(PorterDuff.Mode)	控制密码可见开关图标的背景颜色混合模式
passwordToggleContentDescription	setPasswordVisibilityToggleContentDescription(int)	该功能是为Talkback或其他无障碍功能提供的。TalkBack会去读contentDescription的值，告诉用户这个操作是什么

screenshot_2.png

screenshot_3.png

总结

TextInputLayout的使用还是很简单的，同时也实现了非常好的效果。
代码片段取自我的github上的demo：

• DEMO地址