小蔡学Android——TextInputLayout

TextInputLayout是一个新的布局,从继承树上看,它继承自LinearLayout,是一个专门针对文本输入动作而设计的布局。

《小蔡学Android——TextInputLayout》 努力工作中

某日,工作时间内,小蔡突然叫住老王,问:“老王,你看这个效果怎么做的?应该很难吧?”

《小蔡学Android——TextInputLayout》 小蔡看到的效果

老王看了一眼之后,说:“这个效果,在以前,的确是很难的,但是自从Google推出了Android Design之后,这个效果就很简单了。”

小蔡好奇的问:“什么是Android Design呢?”

老王推了推鼻梁上的眼镜,说道:“Andriod Design是一套新的标准,是Google为了统一Android系统的视觉和使用体验而专门设计的。”

《小蔡学Android——TextInputLayout》 小蔡很沮丧

小蔡沮丧的说:“原来是新标准,看来我没办法使用了。因为我正在做的APP要求兼容到以前的4.0版本。”

老王说:“你还是可以使用这套标准的,为了让旧的系统也能兼容这套新的标准,Google提供了Android Design Support Library包,你只需引入这个包就可以了。”

小蔡好奇的问:“那接下来呢?”

老王说:“接下来,你直接使用TextInputLayout吧,这是一个新的布局,从继承树上看,它继承自LinearLayout,但是它并不支持android:orientation属性。因为它和ScrollView一样,只能在其中嵌入唯一的控件。使用这个布局,你就可以实现你看到的这个效果了。”

小蔡充满期待的说:“老王,你真是一本活字典,那你教教我怎么使用这个控件呗。”

《小蔡学Android——TextInputLayout》 小蔡充满期待

老王推了推眼镜,说:“好好好,看在你卖的萌的面子上,我就教教你怎么使用它,首先我们从它的名字就可以猜到,这是一个专门针对文本输入动作而设计的布局。所以其内部一般是包含EditText或者AutoCompleteTextView。我就以包含EditText作为示例,重现你看到的这个效果吧。”

《小蔡学Android——TextInputLayout》 老王推眼镜

老王接着说:“首先,布局文件如下:”

<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"

《小蔡学Android——TextInputLayout》 老王又推了推眼镜

老王接着说:“这下你再运行,就是你拿给我看的那个效果了。知道Google为什么要推出这个控件吗?”

小蔡说:“因为看上特别酷啊。”

老王问:“仅仅只是酷吗?”

小蔡说:“不然呢?难道还有其他吗?”

老王叹口气,说:“看来得找个时间,给你科普一下产品设计方面的之知识了。”

小蔡满怀期望的说:“好啊,好啊。择日不如撞日,要不就今天教教我吧。你应该知道,最近我们把我们的交流公布出来之后,都有朋友打赏我们了。”

《小蔡学Android——TextInputLayout》 小蔡又满怀期待了

老王轻敲了一下小蔡脑门:“小蔡,安心将现在这个学好。产品设计的知识我们以后再讲,另外,我还在考虑要不要建一个群,将支持我们的朋友都拉进来,加强交流呢。好了。我们继续学习TextInputLayout吧。”

小蔡点了点头。

老王接着说:“在TextInputLayout里,它做了以下几个事情:”
1. 自动计算出一个Padding,为动画,错误信息以及字数统计留出足够的显示空间。
2. 当EditText获取到焦点时,以动画的方式,将EditText中的hint移动到左上方。
3. 统计EditText字数,并动态更新显示。

老王接着说:“小蔡,你记一下,在TextInputLayout中的重要属性有下面这个几个:”

counterEnabled:是否启用计数器
counterMaxLength:启用计数器时,最大字数限制(仅仅用做显示)
counterOverflowTextAppearance:当字数超出计数器的最大限制时的字体格式
hintAnimationEnabled:是否启用hint动画效果
errorEnabled:是否显示错误信息
errorTextAppearance:错误信息的字体格式

小蔡点了点头。

老王问:“别光顾着点头啊,记下来了没?”

小蔡微笑着说:“记啦记啦。今天真感谢你耐心的教我,所以,我决定奖励你一下。”

《小蔡学Android——TextInputLayout》 小蔡的迷之微笑

老王问:“那你准备怎么奖励我啊?”

小蔡说:“奖励你请我吃午饭啊。下面新开的那家73°煨面挺不错的,环境好,味道棒,就请我吃那个吧。”

老王碎了一句:“这也算奖励?这个奖励不要也罢。”

小蔡说:“您再说一遍,你敢不要~”

《小蔡学Android——TextInputLayout》 你敢不要

老王一低头说:“谢谢奖励,走吧,吃煨面去。”

《小蔡学Android——TextInputLayout》 老王/小蔡求打赏

更多内容,正在赶来,敬请关注“老王的互联网杂谈”。

    原文作者:我是真老王
    原文地址: https://www.jianshu.com/p/fe1175eebb3a
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞