三、TextInputLayout

作者: Serenity那年 | 来源:发表于2017-06-01 11:57 被阅读93次

三、TextInputLayout
Material Design风格文本输入样式TextInput
TextInputLayout详解
Design控件
TextInputLayout
MaterialDesign--(5)TextInputLayo
安卓6.0新控件TextInputLayout
TextInputLayout
TextInputLayout
TextInputLayout

一、TextInputLayout是对EditText的包装扩展，可以对EditText进行输入检查，输入字符计数，密码隐藏，如下图所示：

效果图.png

当EditText获得焦点时，android:hint指定的字符串会以高亮的颜色显示在EditText的上方，当失去焦点时，又会以灰色的提示样式显示在EditText中，这就是最基本的使用方式：当我们输入过程中仍可以看到EditText所关联的提示；

二、TextInputLayout的基本使用

1.首先导入TextInputLayout的依赖

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

2.编写xml布局，将TextInputLayout作为EditText的父布局来使用，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context="com.androidwanga.serenitynanian.serenityproject.TextInputActivity">

    <android.support.design.widget.TextInputLayout
        android:layout_marginTop="100dp"
        android:id="@+id/username_inputlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/et_username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="userName" />


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

    <!--app:passwordToggleDrawable="@mipmap/ic_launcher_round"设置自己想要的最右边的图标-->
    <android.support.design.widget.TextInputLayout
        android:id="@+id/password_inputlayout"
        android:layout_width="match_parent"
        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/colorPrimary"
        android:layout_height="wrap_content">

        <android.support.design.widget.TextInputEditText
            android:inputType="textPassword"
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="password" />
    </android.support.design.widget.TextInputLayout>

</LinearLayout>

TextInputEditText控件是design给我们提供的一个右边带图标的控件，继承与LinearLayout，只要在TextInputLayout中设置app:passwordToggleEnabled="true"和在TextInputEditText中同时设置android:inputType="numberPassword"就能显示默认的图标，并且将密码隐藏和显示功能已经实现；此功能也可在代码中动态设置

mPasswordTextInputLayout.setPasswordVisibilityToggleEnabled(true);
mPasswordTextInputLayout.setPasswordVisibilityToggleDrawable(R.mipmap.ic_launcher_round);

注意下TextInputLayout中设置字体样式的属性：

1.app:hintTextAppearance：用来设置悬浮上面的提示文字的外观；
2.app:counterTextAppearance：用来设置右下角提示数字的外观，只有设置了setCounterEnabled为true后才有效果；
3.app:counterOverflowTextAppearance：用来设置超过最大字符限制时悬浮左上提示文字和右下角记录数字的外观；TextInputLayout必须设置了setError之后，并且触发了error之后才有效果；
4.app:errorTextAppearance:用来设置下划线和左下角的外观；只有触发了setError才有效果；

三、具体的设置

3.1 输入检查
除了在EdiText的左上方提示输入外，TextInputLayout还支持在EditText正右下方提示用户是否输入了不和规则条件的内容，以此来提醒用户；
代码设置如下：

 mUserNameEditText.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) {

            }

            @Override
            public void afterTextChanged(Editable s) {
                int length = s.length();
                if(length> MAX_LENGTH ){
                    mUserNameTextInputLayout.setError("Max length is :"+ MAX_LENGTH);
                }else{
                    mUserNameTextInputLayout.setErrorEnabled(false);
                }
            }
        });

在上面的代码中我们监听了EditText的输入内容，然后在输入后触发某个条件，调用TextInputLayout的setError方法来设置提醒的描述；与setError相关的方法如下：

1. public void setError(@Nullable final CharSequence error)
  设置错误提示的文字，它会被显示在EditText的正下方；
2 . public void setErrorTextAppearance(@StyleRes int resId)
设置错误提示的文字颜色和大小；
mUserNameTextInputLayout.setErrorTextAppearance(R.style.TextInputErrorStyle);

<style name="TextInputErrorStyle" parent="AppTheme">
<item name="android:textSize">16sp</item>
<item name="android:textColor">@color/colorPrimary</item>
</style>

3 . ** public void setErrorEnabled(boolean enabled)
设置错误提示是否可用；
3.2 输入计数
TextInputLayout支持输入框中字符实时统计，并在字符长度超过设置的阈值后，改变输入框边栏的颜色和提示文字的颜色；
具体设置如下：

mUserNameTextInputLayout.setCounterEnabled(true);
mUserNameTextInputLayout.setCounterMaxLength(MAX_LENGTH);

与输入计数功能相关的方法：

1 . public void setCounterEnabled(boolean enabled)
设置计数功能是否可用；
2 . public void setCounterMaxLength(int maxLength)
设置计数显示的最大值；
3.3 输入时隐藏密码，或者在输入框右边设置一个图标
在输入框的右边设置一个开关图标，让用来来选择输入时是否能够隐藏（一般用*显示）；TextInputLayout也提供了这样的功能，EditText的inputType为textPassword/textWebPassword/numberPassword时，通过下面的设置：

mPasswordTextInputLayout.setPasswordVisibilityToggleEnabled(true);
   mPasswordTextInputLayout.setPasswordVisibilityToggleDrawable(R.mipmap.ic_launcher_round);

我们也可以通过下面的方法来改变输入框右边的图标和颜色：