在谷歌的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：
网友评论