Design库-TextInputLayout那些事
1.什么是TextInputLayout
Layout which wraps an {@link android.widget.EditText} (or descendant) to show a floating label when the hint is hidden due to the user inputting text.
译:一个布局包裹了EditText(或者EditText的子类),在用户输入文本的时候显示一个浮动的提示标签。
以上是源码对TextInputLayout的解释,从上面我们不仅知道了TextInputLayout的
作用:在用户输入文本的时候显示一个浮动的提示标签,
而且知道了:
TextInputLayout内部必须包含一个EditText(或者EditText的子类)
2.为什么要用TextInputLayout
一言不合就上图:
是否使用了TextInputLayout传统的EditText,在用户输入信息的时,hint(提示)会自动消失,就如上图的中的第一行所示,这时候用户可能会忘记自己需要输入的内容是什么了,得删除所有的输入内容才可以看到hint的提示内容,这样的用户体验不太好。
而图二在用户输入的时候,hint会默认弹到上方,并且携带一个动画效果。它仅仅只是在EditText外包裹了一层TextInputLayout,然而就是这样一个小小的改动不仅提高了与用户交互的体验,而且解决了hint输入后消失的问题,唯一的不好就是“占地面积”大了一点,当然这一点点小瑕疵还是可以忽略的。
3.TextInputLayout的基本使用
XML布局:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入您的手机号">
< EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>
是不是感觉很简单,就是包裹了一层而已。接下来看看它给我们提供了哪些Api ↓↓↓
4.TextInputLayout的基本属性
· 4.1.设置提示信息,这个不仅可以设置在EditText还可以直接设置在TextInputLayout
android:hint="请输入您的手机号"
总感觉设置在TextInputLayout上逼格比较高,其实并没有什么差别。
· 4.2.设置hint的相关属性(由于TextInputLayout也是一个自定义控件,所以以app开头,并且需要给予命名空间:xmlns:app="http://schemas.android.com/apk/res-auto")
app:hintAnimationEnabled="true"//设置是否可以使用动画,默认是true
app:hintEnabled="true"//设置是否可以使用hint属性,默认是true
app:hintTextAppearance="@style/MyStyle"//设置hint的文本属性,改变hint文字的大小颜色等属性
附上MyStyle的代码:
<style name="MyStyle">
<item name="android:textColor">#00FFFF</item>
<item name="android:textSize">12sp</item>
</style>
效果图:
改变hint的颜色一开始感觉没啥作用啊,是不是这个属性没有效果,结果点击了以后发现,hintTextAppearance设置的是:
上弹以后的文字的显示---(实践检验真理)
我们知道hint的文字大小和text的一样,如果你非要设置hint的字体大小,请点开这个链接简单粗暴解决EditText的hint和text文字大小
· 4.3 设置Counter(计数器)的相关属性
app:counterEnabled="true"//设置是否可以开启计数器,默认是false
app:counterOverflowTextAppearance="@style/MyStyle2"//设置计算器越位后的文字颜色和大小
app:counterTextAppearance="@style/MyStyle"//设置正常情况下的计数器文字颜色和大小
app:counterMaxLength="11"//设置计算器的最大字数限制
这里MyStyle是设置文字颜色为蓝色,大小为16sp,MyStyle2是设置文字颜色为红色,大小为20sp,下面看看效果:
计数器这个功能可以很好的告诉用户目前输入的文字位数,已经告诉用户已经超标请不要在输入了。
· 4.4 设置错误提示的相关属性
app:errorEnabled="true"//是否允许错误提示
app:errorTextAppearance="@style/MyStyle2"//错误提示的文字大小和颜色
在代码中设置:
textInputLayout.setError("只是展示下错误的显示样式");
et.setError("只是展示下错误的显示样式");
效果如图:
显示错误的样式原本的EditText是显示在右侧,样式是一个感叹号和一个文本框,而被TextInputLayout包裹后,显示在了输入框的下方。(原谅我的图大得有点吓人,用Android Studio直接截得)。
5.相关链接
欢迎大家推荐有关TextInputLayout的相关知识 -。-