关于TextInputLayout的二三事

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

使用

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

 <com.lv.rxdemo.widget.ValidatedTextInputLayout
                android:id="@+id/validate_text_phone"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/activity_vertical_margin"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                validation:autoTrim="true"
                validation:isRequired="true"
                validation:regex="^[1][3,4,5,8][0-9]{9}$"
                validation:regexValidationMessage="请填写有效的手机号码">

                <android.support.design.widget.TextInputEditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="手机号码"
                    android:inputType="number"
                    android:maxLength="11"
                    android:singleLine="true" />
                    
</com.lv.rxdemo.widget.ValidatedTextInputLayout>

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的值，告诉用户这个操作是什么

<com.lv.rxdemo.widget.ValidatedTextInputLayout
                android:id="@+id/validate_text_phone"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/activity_vertical_margin"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                validation:autoTrim="true"
                validation:isRequired="true"
                validation:regex="^[1][3,4,5,8][0-9]{9}$"
                validation:regexValidationMessage="请填写有效的手机号码">

                <android.support.design.widget.TextInputEditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="手机号码"
                    android:inputType="number"
                    android:maxLength="11"
                    android:singleLine="true" />

</com.lv.rxdemo.widget.ValidatedTextInputLayout>

screenshot_2.png
screenshot_3.png

总结

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

• DEMO地址