小蔡学Android——TextInputLayout
努力工作中TextInputLayout是一个新的布局,从继承树上看,它继承自LinearLayout,是一个专门针对文本输入动作而设计的布局。
某日,工作时间内,小蔡突然叫住老王,问:“老王,你看这个效果怎么做的?应该很难吧?”
小蔡看到的效果老王看了一眼之后,说:“这个效果,在以前,的确是很难的,但是自从Google推出了Android Design之后,这个效果就很简单了。”
小蔡好奇的问:“什么是Android Design呢?”
老王推了推鼻梁上的眼镜,说道:“Andriod Design是一套新的标准,是Google为了统一Android系统的视觉和使用体验而专门设计的。”
小蔡很沮丧小蔡沮丧的说:“原来是新标准,看来我没办法使用了。因为我正在做的APP要求兼容到以前的4.0版本。”
老王说:“你还是可以使用这套标准的,为了让旧的系统也能兼容这套新的标准,Google提供了Android Design Support Library包,你只需引入这个包就可以了。”
小蔡好奇的问:“那接下来呢?”
老王说:“接下来,你直接使用TextInputLayout
吧,这是一个新的布局,从继承树上看,它继承自LinearLayout
,但是它并不支持android:orientation
属性。因为它和ScrollView
一样,只能在其中嵌入唯一的控件。使用这个布局,你就可以实现你看到的这个效果了。”
小蔡充满期待的说:“老王,你真是一本活字典,那你教教我怎么使用这个控件呗。”
小蔡充满期待老王推了推眼镜,说:“好好好,看在你卖的萌的面子上,我就教教你怎么使用它,首先我们从它的名字就可以猜到,这是一个专门针对文本输入动作而设计的布局。所以其内部一般是包含EditText
或者AutoCompleteTextView
。我就以包含EditText
作为示例,重现你看到的这个效果吧。”
老王接着说:“首先,布局文件如下:”
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:counterMaxLength="5"
app:hintAnimationEnabled="true"
app:counterOverflowTextAppearance="@android:style/TextAppearance.DeviceDefault.Large">
<EditText
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:maxLines="1"
android:hint="@string/prompt_password"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
老王又推了推眼镜,接着说:“其中的app是为了使用Android Design Support Library包提供的新属性,而进行的一个申明,这需要在布局文件的根元素上引入以下的命名空间即可。”
xmlns:app="http://schemas.android.com/apk/res-auto"
老王又推了推眼镜
老王接着说:“这下你再运行,就是你拿给我看的那个效果了。知道Google为什么要推出这个控件吗?”
小蔡说:“因为看上特别酷啊。”
老王问:“仅仅只是酷吗?”
小蔡说:“不然呢?难道还有其他吗?”
老王叹口气,说:“看来得找个时间,给你科普一下产品设计方面的之知识了。”
小蔡满怀期望的说:“好啊,好啊。择日不如撞日,要不就今天教教我吧。你应该知道,最近我们把我们的交流公布出来之后,都有朋友打赏我们了。”
小蔡又满怀期待了老王轻敲了一下小蔡脑门:“小蔡,安心将现在这个学好。产品设计的知识我们以后再讲,另外,我还在考虑要不要建一个群,将支持我们的朋友都拉进来,加强交流呢。好了。我们继续学习TextInputLayout
吧。”
小蔡点了点头。
老王接着说:“在TextInputLayout
里,它做了以下几个事情:”
1. 自动计算出一个Padding,为动画,错误信息以及字数统计留出足够的显示空间。
2. 当EditText获取到焦点时,以动画的方式,将EditText中的hint移动到左上方。
3. 统计EditText字数,并动态更新显示。
老王接着说:“小蔡,你记一下,在TextInputLayout
中的重要属性有下面这个几个:”
counterEnabled:是否启用计数器
counterMaxLength:启用计数器时,最大字数限制(仅仅用做显示)
counterOverflowTextAppearance:当字数超出计数器的最大限制时的字体格式
hintAnimationEnabled:是否启用hint动画效果
errorEnabled:是否显示错误信息
errorTextAppearance:错误信息的字体格式
小蔡点了点头。
老王问:“别光顾着点头啊,记下来了没?”
小蔡微笑着说:“记啦记啦。今天真感谢你耐心的教我,所以,我决定奖励你一下。”
小蔡的迷之微笑老王问:“那你准备怎么奖励我啊?”
小蔡说:“奖励你请我吃午饭啊。下面新开的那家73°煨面挺不错的,环境好,味道棒,就请我吃那个吧。”
老王碎了一句:“这也算奖励?这个奖励不要也罢。”
小蔡说:“您再说一遍,你敢不要~”
你敢不要老王一低头说:“谢谢奖励,走吧,吃煨面去。”
老王/小蔡求打赏