小蔡学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°煨面挺不错的，环境好，味道棒，就请我吃那个吧。”

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

小蔡说：“您再说一遍，你敢不要~”

你敢不要

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

老王/小蔡求打赏