示例 Github地址:https://github.com/ChaiJiangpeng/AndroidMaterialDesignDemo
TextInputLayout是Android Material Design中新的控件, 要和EditText(或EditText的子类)结合使用,并且只能包含一个EditText(或EditText的子类)。
作用:在用户输入文本的时候显示一个浮动的提示标签。
1.简单使用
<android.support.design.widget.TextInputLayout
android:id="@+id/textInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入您的手机号"
app:hintTextAppearance="@style/MyHintStyle">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>
在手机上运行就可以看见效果,输入信息时,hint(提示信息)就会浮动到上面,体验很好,而传统的EditText就会直接消失。设置提示信息 android:hint="请输入您的手机号" 既可以放到TextInputLayout里也可以放到EditText下,效果是相同的。
2.各个属性的解释
TextInputLayout里还有许多其他的属性来更好的体验,属性如下:
2.1 hint相关属性
app:hintEnabled="true" 设置是否可以使用hint属性,默认为true
app:hintAnimationEnabled="true" 设置hint浮动是否有动画,默认为true
app:hintTextAppearance="@style/MyHintStyle" 设置hint格式,如文字颜色,大小
我的style如下:
<style name="MyHintStyle">
<item name="android:textColor">@color/colorPrimary</item>
<item name="android:textSize">14sp</item>
</style>
运行后可以发现hint信息浮动后样式就变为了我设置的样式。当然输入信息前的hint样式如旧。
2.2 counter相关属性
TextInputLayout还有计数器(count)属性可以用来显示输入文字的数量。
app:counterEnabled="true" 设置是否显示计数器,默认为false
app:counterMaxLength="12" 设置输入文字最大输入限制,超过后并不会限制它继续输入, 而会变色来提示用户
app:counterTextAppearance="@style/MyHintStyle" 设置count样式,如文字颜色,大小
app:counterOverflowTextAppearance="@style/MyHintStyle2" 设置count 超过最大输入限制 后的样式
设置好显示效果如下:
2.3 error相关属性
TextInputLayout还可以处理错误并给出相应提示,使用场景:在登录页面我们输入用户名,密码后,我们可以验证用户名或者密码是否错误,从而可以提示用户,我们可以在代码里添加textInputLayout.error="用户名错误!"等信息。
app:errorEnabled="true" 设置是否可以显示错误信息,默认为false
app:errorTextAppearance="@style/MyHintErrorStyle" 设置error样式。
2.4 password相关属性
当EditText文本输入类型为密码时,系统提供了一个开关来控制密码是否可见(默认为眼睛)。
app:passwordToggleEnabled="true" 设置密码可见开关是否开启,默认为false
点击这个开关就可以来控制输入的密码是否可见。
app:passwordToggleDrawable=" " 设置密码可见开关的图标,如果对于眼睛的图标不满意可以自己设置图标
app:passwordToggleTint="@color/colorPrimary" 设置密码可见开关的图标颜色
app:passwordToggleTintMode="multiply" 设置密码可见开关图标的背景颜色混合模式(与上一个配合使用)
至此TextInputLayout 常用属性就解释完了,我们可以根据自己需求来使用各个属性。
注:在Android Material Design里还有 TextInputEditText 这个控件,看源码发现他是edittext的子类,它和edittext都可以实现以上效果,区别是:当页面为横屏时输入框输入信息时TextInputEditText 也会有hint提示信息,而EditText没有,所以TextInputLayout 与TextInputEditText 配合使用更好,尤其在横屏时。