Android Material Design之TextInputLayout

示例 Github地址:https://github.com/ChaiJiangpeng/AndroidMaterialDesignDemo

TextInputLayout是Android Material Design中新的控件， 要和EditText(或EditText的子类）结合使用，并且只能包含一个EditText(或EditText的子类）。

作用：在用户输入文本的时候显示一个浮动的提示标签。

1.简单使用

    android:id="@+id/textInputLayout"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

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

    app:hintTextAppearance="@style/MyHintStyle">

   

        android:layout_width="match_parent"

        android:layout_height="wrap_content"/>

在手机上运行就可以看见效果，输入信息时，hint（提示信息）就会浮动到上面，体验很好，而传统的EditText就会直接消失。设置提示信息 android:hint="请输入您的手机号"  既可以放到TextInputLayout里也可以放到EditText下，效果是相同的。

2.各个属性的解释

TextInputLayout里还有许多其他的属性来更好的体验，属性如下：

2.1 hint相关属性

app:hintEnabled="true"  设置是否可以使用hint属性，默认为true

app:hintAnimationEnabled="true"  设置hint浮动是否有动画，默认为true

app:hintTextAppearance="@style/MyHintStyle" 设置hint格式，如文字颜色，大小

我的style如下：

运行后可以发现hint信息浮动后样式就变为了我设置的样式。当然输入信息前的hint样式如旧。

2.2 counter相关属性

TextInputLayout还有计数器（count）属性可以用来显示输入文字的数量。

app:counterEnabled="true"    设置是否显示计数器，默认为false

app:counterMaxLength="12"  设置输入文字最大输入限制，超过后并不会限制它继续输入，                                                    而会变色来提示用户

app:counterTextAppearance="@style/MyHintStyle"      设置count样式，如文字颜色，大小

app:counterOverflowTextAppearance="@style/MyHintStyle2"   设置count 超过最大输入限制                                                                                                      后的样式

设置好显示效果如下：

计数器

2.3 error相关属性

TextInputLayout还可以处理错误并给出相应提示，使用场景：在登录页面我们输入用户名，密码后，我们可以验证用户名或者密码是否错误，从而可以提示用户，我们可以在代码里添加textInputLayout.error="用户名错误！"等信息。

app:errorEnabled="true"  设置是否可以显示错误信息，默认为false

app:errorTextAppearance="@style/MyHintErrorStyle"  设置error样式。

2.4 password相关属性

当EditText文本输入类型为密码时，系统提供了一个开关来控制密码是否可见（默认为眼睛）。

app:passwordToggleEnabled="true"  设置密码可见开关是否开启，默认为false

设置开关样式

点击这个开关就可以来控制输入的密码是否可见。

app:passwordToggleDrawable=" "  设置密码可见开关的图标，如果对于眼睛的图标不满意可以自己设置图标

app:passwordToggleTint="@color/colorPrimary"    设置密码可见开关的图标颜色

app:passwordToggleTintMode="multiply"  设置密码可见开关图标的背景颜色混合模式（与上一个配合使用）

至此TextInputLayout 常用属性就解释完了，我们可以根据自己需求来使用各个属性。

注：在Android Material Design里还有 TextInputEditText 这个控件，看源码发现他是edittext的子类，它和edittext都可以实现以上效果，区别是：当页面为横屏时输入框输入信息时TextInputEditText  也会有hint提示信息，而EditText没有，所以TextInputLayout 与TextInputEditText 配合使用更好，尤其在横屏时。

Android Material Design其他篇

「FloatingActionButton」

「Snackbar」