Android中TextInputLayout 使用

首先添加依赖:
compile 'com.android.support:design:25.3.1'

• TextInputLayout继承了LinearLayout，包裹一个EditText。

 <android.support.design.widget.TextInputLayout
        android:id="@+id/til_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:errorEnabled="true">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入密码"
            android:inputType="text"/>

    </android.support.design.widget.TextInputLayout>

下面我们就来看看TextInputLayout包裹EditText和单独使用EditText的区别:

很明显，TextInputLayout包裹EditText的方式展示效果更好。

• TextInputLayout包裹EditText布局如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:focusable="true"
    android:focusableInTouchMode="true">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_account"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:errorEnabled="true"
        >

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="text"
            android:hint="请输入账号"/>

    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:errorEnabled="true">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入密码"
            android:inputType="textPassword"/>

    </android.support.design.widget.TextInputLayout>
</LinearLayout>

• TextInputLayout 可用属性

app:errorEnabled   错误提示信息是否显示
app:errorTextAppearance 错误提示信息的字体样式
app:counterEnabled 是否使用计数功能
app:counterMaxLength  使用计数功能显示最大的长度
app:counterTextAppearance   在长度范围内字体样式
app:counterOverflowTextAppearance 超出最大长度后字体样式
app:hintEnabled  提示信息是否显示
app:hintAnimationEnabled  提示信息是否使用动画
app:hintTextAppearance  提示信息字体样式
app:passwordToggleEnabled 是否使用 密码显示、隐藏功能。
app:passwordToggleDrawable  设置控制密码显示或隐藏的图标

• 错误提示和字数统计组合使用

 <android.support.design.widget.TextInputLayout
        android:id="@+id/til_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:errorEnabled="true"
        app:errorTextAppearance="@style/ErrorStyle"
        app:counterEnabled="true"
        app:counterMaxLength="15"
        app:counterTextAppearance="@style/NormalStyle"
        app:counterOverflowTextAppearance="@style/OverflowStyle"
        >

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入密码"
            android:inputType="textPassword"/>

    </android.support.design.widget.TextInputLayout>

style 如下：

  <!--字数显示默认样式-->
    <style name="NormalStyle" parent="TextAppearance.AppCompat.Small">
        <item name="android:textColor">#00ff00</item>
        <item name="android:textSize">12sp</item>
    </style>
    <!--字数显示超出范围样式-->
    <style name="OverflowStyle" parent="TextAppearance.AppCompat.Small">
        <item name="android:textColor">#ff0000</item>
        <item name="android:textSize">12sp</item>
    </style>
    <!--错误字体样式-->
    <style name="ErrorStyle" parent="TextAppearance.AppCompat.Small">
        <item name="android:textColor">#ff0000</item>
        <item name="android:textSize">12sp</item>
    </style>

Activity 中对EditText进行监听:

public class EditTextActivity extends AppCompatActivity {

    private EditText mEditTextPassword;
    private TextInputLayout mTextInputLayoutPassword;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_edit_text);

        //初始化控件
        mTextInputLayoutPassword = (TextInputLayout) findViewById(R.id.til_password);
        //获取EditText
        mEditTextPassword = mTextInputLayoutPassword.getEditText();
        //动态监听EditText变化
        mEditTextPassword.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) {
                String account = mEditTextPassword.getText().toString();
                if (account.length() < 6){
                    mTextInputLayoutPassword.setError("密码长度不得小于6位");
                } else if (account.length() >= 6 && account.length() <= 15) {
                    mTextInputLayoutPassword.setErrorEnabled(false);
                }else if (account.length() > 15) {
                    mTextInputLayoutPassword.setError("密码长度不得大于15位");
                }
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });
    }
}

通过监听输入的长度来动态改变错误提示信息。
TextInputLayout.setError()用来设置需要显示的错误提示。

如图所示，未获得焦点时 字数显示为绿色，未显示错误信息。获取焦点之后，错误信息提示为 密码长度不得小于6位 ；长度达到6位的时候错误提示消失。超过15位之后提示 密码长度不得大于15位 ，字数显示变为我们所设置的红色。

• 使用 app:passwordToggleEnabled功能

设置 app:passwordToggleEnabled=”true”

<android.support.design.widget.TextInputLayout
        android:id="@+id/til_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:passwordToggleEnabled="true"
        >

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入密码"
            android:inputType="textPassword"/>

    </android.support.design.widget.TextInputLayout>

默认是隐藏密码的，点击按钮之后即可显示输入的数据。

• app:passwordToggleDrawable 设置自己的图标。

  由于需要两张图片，所以使用selector来实现。
  创建 password_show_or_hide_selector.xml ，一张开眼，一张闭眼照片。
  

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/eye_open" android:state_checked="true"></item>
    <item android:drawable="@drawable/eye_close"></item>

</selector>

布局中引用

app:passwordToggleDrawable="@drawable/password_show_or_hide_selector"

运行后的效果