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:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:hint="请输入您的手机号">

         < EditText

           android:layout_width="match_parent"

           android:layout_height="wrap_content"/>

是不是感觉很简单，就是包裹了一层而已。接下来看看它给我们提供了哪些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的代码：

效果图：

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