TextInputLayout 使用

TextInputLayout 作为 EditText 的容器，只接受一个子元素，并且这个子元素是 EditText，获得焦点之后 EditText 的 hint 会浮动到 EditText 上并伴随着动画，失去焦点之后，EditText 的 hint 会回到原本的 EdutText 中并伴随着动画。

使用

xml 布局代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/tl_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:counterOverflowTextAppearance="@style/text_input_layout">
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="username"
            android:maxLines="1"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/tl_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/tl_username">
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="password"
            android:maxLines="1"
            android:inputType="textPassword"/>
    </android.support.design.widget.TextInputLayout>

    <Button
        android:id="@+id/bt_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/tl_password"
        android:text="登录"/>
</android.support.constraint.ConstraintLayout>

res/values/styles.xml

   <style name="text_input_layout" parent="TextAppearance.AppCompat">
       <item name="android:textColor">@color/colorYellow</item>
   </style>

属性	作用
counterEnabled	设置为true才能显字符数
app:counterMaxLength	设置最大字符数
app:counterOverflowTextAppearance	设置超出字符数后提示文字错误提示文字的颜色，如果不设置默认为@color/colorAccent的颜色。

使用代码

    private void login() {
        String username = tl_username.getEditText().getText().toString().trim();
        String password = tl_password.getEditText().getText().toString().trim();
        if (!validateUserName(username)) {
            tl_username.setErrorEnabled(true);
            tl_username.setError("请输入正确的用户名");
        } else if (!validatePassword(password)) {
            tl_password.setErrorEnabled(true);
            tl_password.setError("密码长度要大于６位");
        } else {
            tl_username.setErrorEnabled(false);
            tl_password.setErrorEnabled(false);
            Toast.makeText(this, "登录成功", Toast.LENGTH_SHORT).show();
        }
    }

    private boolean validatePassword(String password) {
        return (password.length() > 6);
    }

    private boolean validateUserName(String userName) {
        String phonePattern = "^0?1[0-9][0-9]\\d{8}$";
        Pattern pattern = Pattern.compile(phonePattern);
        return pattern.matcher(userName).matches();
    }

通过 setError 可以友好的显示错误信息。

实现效果

效果.gif