AndroidAndroid-ui效果Android原生控件集中营

Design库-TextInputLayout那些事

2016-06-11  本文已影响6219人  积木Blocks

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的相关知识 -。-

上一篇下一篇

猜你喜欢

热点阅读