Android Design - TextInputLayout

可以说，该控件是 EditText 的一个辅助控件，它可以帮助我们让输入提示的实现变得更简单。

看图说话

demo

使用

1. 引入

compile 'com.android.support:design:27.1.1'

2. 布局

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="密码"
    android:textColorHint="@android:color/holo_green_dark"
    app:counterEnabled="true"
    app:counterTextAppearance="@style/counterAppearance"
    app:errorTextAppearance="@style/errorAppearance"
    app:hintTextAppearance="@style/hintAppearance"
    app:passwordToggleDrawable="@drawable/selector_password_show_or_hide"
    app:passwordToggleEnabled="true"
    app:passwordToggleTint="@color/colorAccent">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>

3. 添加 hint：

android:hint="密码"
android:textColorHint="@android:color/holo_green_dark"
app:hintTextAppearance="@style/hintAppearance"

• android:hint ：EditText 的提示文字
• android:textColorHint ：EditText 的提示文字失去焦点的颜色
• app:hintTextAppearance ：EditText 的提示文字获取焦点时的样式
• 样式 hintAppearance 具体内容

<!-- TextInputLayout hint 提示的样式 -->
<style name="hintAppearance" parent="TextAppearance.AppCompat">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">@android:color/holo_purple</item>
</style>

4. 添加错误提示

• 添加错误提示的样式

app:errorTextAppearance="@style/errorAppearance"

• 样式内容

<!-- TextInputLayout 错误 提示的样式 -->
<style name="errorAppearance" parent="TextAppearance.AppCompat">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">@android:color/holo_orange_light</item>
</style>

• 代码中监听输入内容，给出错误提示

et_account.addTextChangedListener(new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
    }
    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
        if (s.length() > 3) {
            //显示错误提示
            til_account.setError("用户名不合法！");
            til_account.setErrorEnabled(true);
        } else {
            til_account.setErrorEnabled(false);
        }
    }
    @Override
    public void afterTextChanged(Editable s) {
    }
});

5. 在输入密码时添加小眼睛，控制密码的可见性

app:passwordToggleDrawable="@drawable/selector_password_show_or_hide"
app:passwordToggleEnabled="true"
app:passwordToggleTint="@color/colorAccent"

• app:passwordToggleDrawable ：小眼睛的图标，可以不设置，使用系统默认
• app:passwordToggleEnabled ：开启小眼睛功能，默认是关闭的
• app:passwordToggleTint ：小眼睛的颜色
• 选择器 selector_password_show_or_hide 具体实现

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:drawable/ic_media_play" android:state_checked="false" />
    <item android:drawable="@android:drawable/ic_media_pause" android:state_checked="true" />
</selector>

6. 加入输入字数统计功能，提示用户输入文字的长度

app:counterEnabled="true"
app:counterTextAppearance="@style/counterAppearance"

• app:counterEnabled ：开启字数统计功能，默认是关闭的
• app:counterTextAppearance ：字数统计文字的样式，可不设置
• 样式 counterAppearance 具体实现

<!-- TextInputLayout 字数统计 提示的样式 -->
<style name="counterAppearance" parent="TextAppearance.AppCompat">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">@android:color/holo_blue_light</item>
</style>

---

源码：
完整布局 activity_003_text_input_layout
代码 _003_TextInputLayoutActivity