Android开发——Material Design系列之TextInputLayout

0. 前言  

TextInputLayout 继承于 LinearLayout，专门用来包裹 EditText或EditText的子类，当用户进行输入动作的时候我们设置的android:hint 属性值会作为提示以动画的形式运动到输入框左上角，错误信息也显示在输入框的下方。有些输入验证是在后台做得，产生错误后再反馈给前台，这样非常耗时而且用户体验差。TextInputLayout则完美的解决了这个问题，达到了很好的用户体验效果。

先看一下效果图，后面慢慢进行实现的介绍。

1.  TextInputLayout的使用

dependencies {
    //…
    compile 'com.android.support:appcompat-v7:25.0.0'
    compile 'com.android.support:design:25.0.0
}

首先添加supportdesign依赖包，版本号最好和v7包一致。

2.  布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    tools:context="com.seucalvin.textinputlayout.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="65dp"
        android:orientation="vertical">

        <android.support.design.widget.TextInputLayout
            android:id="@+id/layout_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:counterEnabled="true"
            app:counterMaxLength="6">
            <!--app:counterOverflowTextAppearance="@style/MyOverflowText"-->
            <!--app:errorTextAppearance="@style/MyErrorStyle">-->

            <EditText
                android:id="@+id/input_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/EnterName"
                android:singleLine="true" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/layout_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:counterEnabled="true"
            app:counterMaxLength="6">
            <!--app:counterOverflowTextAppearance="@style/MyOverflowText"-->
            <!--app:errorTextAppearance="@style/MyErrorStyle">-->

            <EditText
                android:id="@+id/input_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/EnterPassWord"
                android:inputType="textPassword"
                android:singleLine="true" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/layout_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <!--app:counterOverflowTextAppearance="@style/MyOverflowText"-->
            <!--app:errorTextAppearance="@style/MyErrorStyle">-->

            <EditText
                android:id="@+id/input_email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/EnterEmail"
                android:inputType="textEmailAddress"
                />
        </android.support.design.widget.TextInputLayout>

        <Button
            android:id="@+id/login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:background="@color/colorPrimary"
            android:text="@string/login"
            android:textColor="#ffffff"
            android:textSize="20sp"
            android:textStyle="bold" />
    </LinearLayout>
</RelativeLayout>

布局很简单，一个用户名输入框和一个密码框，再加上一个email输入框和登陆按钮。

这里在用户名和密码输入框里所在的TextInputLayout中配置了app:counterEnabled=”true”属性即可进行效果图中的字数统计功能。当然，你也可以指定最大输入的字符数，这里使用app:counterMaxLength=”6”指定了最多输入6个字符。最后就是app:counterOverflowTextAppearance和app:errorTextAppearance两个属性，这里我都注释掉了，即使用的是系统默认的效果，两者都可以通过指定style进行自定义效果，前者为当输入字符超过限定个数时EditText控件的整体显示样式，比如可以自定义输入框的颜色的改变，注意如果要自定义style，parent属性要是TextAppearance.AppCompat.Small，后者即显示错误提示文字（输入框左下方）的属性，比如修改其颜色啊等等。

EditText的hint属性指定的是飘在输入框左上角的文字，那么左下角的错误提示文字是如何设置内容以及出现时机的呢？

3. 代码逻辑

首先肯定要响应EditText的输入事件，这样才能实时地检测是否输入有误。

input_name.addTextChangedListener(newMyTextWatcher(input_name));

这里MyTextWatcher实现了TextWatcher接口，并重写了该接口中的afterTextChanged()方法，在该方法中通过判断MyTextWatcher()构造函数中传来的控件id，来switch到底进行哪个输入框的逻辑判断，这里以邮件输入框的逻辑举例介绍：

String email = input_email.getText().toString().trim();
if (TextUtils.isEmpty(email) || !android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
    layout_email.setErrorEnabled(true);
    layout_email.setError(getString(R.string.error_email));
    layout_email.requestFocus();
}
layout_email.setErrorEnabled(false);

该逻辑在输入事件发生后实时回调，当检测到邮箱输入框为空或者邮箱格式有误时，会调用layout_eamil.setError()使所在的TextInputLayout左下角显示错误提示信息。否则传入false隐藏错误信息。这样就完成了效果图中的效果。

4. TextInputEditText

官方的实例中，TextInputLayout包裹的并不是EditText，而是TextInputEditText，它是EditText的子类，那么它和EditText有什么区别呢，官方给出的解释是，当你的输入框太大的时候，如下图所示：

点击输入框会进入全屏编辑模式，如下图所示，如果你使用的是EditText，则如下图所示：

而如果你使用的是TextInputEditText，则会在全屏编辑模式下依然显示出hint属性值，如下图所示：

5.  正则表达式工具类

Android开发中经常在登录逻辑中使用正则表达式校验邮箱、手机号、密码、身份证号码等信息，特意找到了一个工具类方便需要的同学使用。

/**
 * 校验器:利用正则表达式校验邮箱、手机号等
 * @author Mr.duan
 */
public class Validator {
    /**
     * 正则表达式:验证用户名(不包含中文和特殊字符)如果用户名使用手机号码或邮箱 则结合手机号验证和邮箱验证
     */
    public static final String REGEX_USERNAME = "^[a-zA-Z]\\w{5,17}$";

    /**
     * 正则表达式:验证密码(不包含特殊字符)
     */
    public static final String REGEX_PASSWORD = "^[a-zA-Z0-9]{6,16}$";

    /**
     * 正则表达式:验证手机号
     */
    public static final String REGEX_MOBILE = "^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$";

    /**
     * 正则表达式:验证邮箱
     */
    public static final String REGEX_EMAIL = "^([a-z0-9A-Z]+[-|\\.]?)+[a-z0-9A-Z]@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-zA-Z]{2,}$";

    /**
     * 正则表达式:验证汉字(1-9个汉字)  {1,9} 自定义区间
     */
    public static final String REGEX_CHINESE = "^[\u4e00-\u9fa5]{1,9}$";

    /**
     * 正则表达式:验证身份证
     */
    public static final String REGEX_ID_CARD = "(^\\d{15}$)|(^\\d{17}([0-9]|X)$)";

    /**
     * 正则表达式:验证URL
     */
    public static final String REGEX_URL = "http(s)?://([\\w-]+\\.)+[\\w-]+(/[\\w- ./?%&=]*)?";

    /**
     * 正则表达式:验证IP地址 
     */
    public static final String REGEX_IP_ADDR = "(2[5][0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\.(25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\.(25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\.(25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})";

    /**
     * 校验用户名
     * @param username
     * @return 校验通过返回true，否则返回false
     */
    public static boolean isUserName(String username) {
        return Pattern.matches(REGEX_USERNAME, username);
    }

    /**
     * 校验密码
     * @param password
     * @return 校验通过返回true，否则返回false
     */
    public static boolean isPassword(String password) {
        return Pattern.matches(REGEX_PASSWORD, password);
    }

    /**
     * 校验手机号
     * @param mobile
     * @return 校验通过返回true，否则返回false
     */
    public static boolean isMobile(String mobile) {
        return Pattern.matches(REGEX_MOBILE, mobile);
    }

    /**
     * 校验邮箱
     * @param email
     * @return 校验通过返回true，否则返回false
     */
    public static boolean isEmail(String email) {
        return Pattern.matches(REGEX_EMAIL, email);
    }

    /**
     * 校验汉字
     * @param chinese
     * @return 校验通过返回true，否则返回false
     */
    public static boolean isChinese(String chinese) {
        return Pattern.matches(REGEX_CHINESE, chinese);
    }

    /**
     * 校验身份证
     * @param idCard
     * @return 校验通过返回true，否则返回false
     */
    public static boolean isIDCard(String idCard) {
        return Pattern.matches(REGEX_ID_CARD, idCard);
    }

    /**
     * 校验URL
     * @param url
     * @return 校验通过返回true，否则返回false
     */
    public static boolean isUrl(String url) {
        return Pattern.matches(REGEX_URL, url);
    }

    /**
     * 校验IP地址
     * @param ipAddress
     * @return
     */
    public static boolean isIPAddress(String ipAddress) {
        return Pattern.matches(REGEX_IP_ADDR, ipAddress);
    }

}