Material Design风格文本输入样式TextInputLayout的使用

TextInputLayout介绍

TextInputLayout是Google基于Material Design风格出现的一个文本输入布局。主要特点在样式上，官方第一句介绍是当输入的文本显示或者隐藏的时候，EditText显示浮动标签的布局。

先看看样式

样式其实是有动画效果的

使用方法

引入包环境

由于这个控件在这个android.support.design.widget包下，所以要查看是否已经引入了:

compile ‘com.android.support:design:22.2.0’

compile ‘com.android.support:appcompat-v7:22.2.0’

版本可根据需求自行调整

在布局中加入代码

<android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/form_username"/> </android.support.design.widget.TextInputLayout>

样式修改

将默认的AppTheme主体添加如下属性

<item name="android:textColorHint">@colorcommonTextColorWhite</item> <item name="colorControlNormal">@colorcommonTextColorWhite</item> <item name="colorControlActivated">@colorcommonTextColorWhite</item> <item name="colorControlHighlight">@colorcommonTextColorWhite</item>

解释：

属性含义android:textColorHint提示字体的颜色colorControlNormal下划线没有获取焦点，也就是默认的颜色colorControlActivated点击时下划线的颜色

计数器功能

使用

TextInputLayout还实现了输入时候记录输入字符数的功能，可以通过设置参数实现,导入如下环境

xmlns:app="http://schemas.android.com/apk/res-auto"

添加如下属性

app:counterEnabled="true" app:counterMaxLength="11" app:counterTextAppearance="@style/text_style" 属性含义app:counterEnabled是否开启此功能app:counterMaxLength计数器限制的最大值app:counterTextAppearance计数器的字体样式

错误提示功能

TextInputLayout还有个错误提示的功能，可以直接通过api使用。

添加如下代码

app:errorEnabled="true" app:errorTextAppearance="@style/error_text_style"

在java代码中设置

textInputLayout.setError("这是textInputLayout的错误提示"); mobile.setError("这是EditText的错误提示");

密码可视功能

将inputType的类型设置为password之后，可以通过设置如下属性。而且默认效果支持Material Design效果和默认动画，也是酷酷的。

app:passwordToggleEnabled="true" app:passwordToggleTint="@color/colorAccent" 属性含义app: passwordToggleEnabled是否开启密码可视的功能app: passwordToggleTint修改提示图标的颜色

总结

google继Android5.0后出了一系列Material Design风格的控件，也引起了部分web端与Android端的的Material Design风格化。个人认为这也是一个比较好的设计语言。如果利用的好，将会对APP的交互很有利。