增强EditText--TextInputLayout

最新推荐文章于 2022-03-28 16:37:04 发布

lanyu96

最新推荐文章于 2022-03-28 16:37:04 发布

阅读量195

点赞数

本文链接：https://blog.csdn.net/wx_lanyu/article/details/84901466

版权

开发十年，就只剩下这套架构体系了！ >>>

该控件继承自linearlayout，里边只能包裹一个控件，EditText或继承自EditText，

在用户输入的时候能将原来的提示文字浮动在控件上边。

使用此控件需要引入依赖

dependencies{
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support:design:28.0.0'

}

下面是简单调用的代码

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

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp">
        <EditText
            android:id="@+id/et_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UserName" />

    </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">
        <EditText
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:hint="password" />

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

</LinearLayout>

实现的效果

TextInputLayout 属性说明

属性	说明
app:Theme	设置下划线或其他的颜色属性
android.support.design:counterEnabled	是否显示计数器
android.support.design:counterMaxLength	设置计数器的最大值,与counterEnabled同时使用
android.support.design:counterTextAppearance	计数器的字体样式
android.support.design:counterOverflowTextAppearance	输入字符大于我们限定个数字符时的字体样式
android.support.design:errorEnabled	是否显示错误信息
android.support.design:errorTextAppearance	错误信息的字体样式
android.support.design:hintAnimationEnabled	是否显示hint的动画,默认true
android.support.design:hintEnabled	是否使用hint属性,默认true
android.support.design:hintTextAppearance	设置hint的文字样式(指运行动画效果之后的样式)
android.support.design:passwordToggleDrawable	设置密码开关Drawable图片,于passwordToggleEnabled同时使用
android.support.design:passwordToggleEnabled	是否显示密码开关图片,需要EditText设置inputType
android.support.design:passwordToggleTint	设置密码开关图片颜色
android.support.design:passwordToggleTintMode	设置密码开关图片(混合颜色模式),与passwordToggleTint同时使用

下面加入显示计数器的,

 <android.support.design.widget.TextInputLayout
        android:id="@+id/til_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp">
        <EditText
            android:id="@+id/et_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UserName" />

    </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"
        
        app:counterEnabled="true"  //设置为true才能显示字符串
        app:counterMaxLength="8"   //设置为最大字符数为8
                                   //实际运行的时候,不能再布局内部加注释,把注释删掉,运行
        
       android:layout_margin="10dp">
        <EditText
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:hint="password" />

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

加入输入的密码不能小于三位时的错误提示文字

xml代码同上

Java代码如下

        final TextInputLayout password_til = findViewById(R.id.til_password);
        final EditText password_et = findViewById(R.id.et_password);
        password_et.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                if (charSequence.length()<=3) {
                    password_til.setError("密码不能小于三位");
                    password_til.setErrorEnabled(true);
                } else {
                    password_til.setErrorEnabled(false);
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });

效果如下

加入密码, 用户可以手动设置可见

效果如下

xml代码如下

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        app:passwordToggleEnabled="true"  //设置为true 是加入密码手动设置是否可见
                                          //需要EditText设置inputType

        android:layout_margin="10dp">

        <EditText
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:hint="password" />

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

更改获取焦点后，上面Label的颜色/大小等

app:hintTextAppearance="@style/HintAppearance"

通过这个属性修改

style示例

<style name="HintAppearance" parent="TextAppearance.AppCompat">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">#8bc34a</item>
</style>

修改下面横线的颜色

直接在工程的color中修改

修改错误提示的颜色

通过如下方法修改

app:errorTextAppearance="@style/ErrorAppearance"

style

<style name="ErrorAppearance" parent="TextAppearance.AppCompat">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">#a2ced1</item>
</style>

需要注意的是，该属性不止改变的是错误文字的颜色、大小，还修改了EditText的的那条横线的颜色。

如果不想在编写TextInputLayout布局的时候都去设置，还可以通过style文件去统一设置，如：

<item name="textColorError">@color/textColorError</item>

如果你设置了errorTextAppearance同时又设置了textColorError，TextInputLayout会优先使用errorTextAppearance配置的颜色。

下面是注意事项 : 百度出来的感觉挺有道理, 贴在下方了

添加库的时候注意要加appcompat-v7库,确保可以向后兼容
TextInputLayout下的实际视图层次结构不能保证以XML格式编写视图层次结构。因此，对于TextInputLayout的子对象EditText(或子类TextInputEditText)想调用getParent()可能不会返回TextInputLayout. 如果您需要直接访问视图,建议设置一个android：id并使用findViewById(int).
一个TextInputLayout只能套一个EditText(或它的子类TextInputEditText)
当使用passwordToggleDrawable密码开关图片的时候，EditText end位置的图标时会被覆盖的，为了保证EditText end 位置Drawable的正常显示，你需要在设置这些Drawables 的相对位置（start/end）为绝对(left/right).(官方文档说的)
使用了TextInputLayout,和它的setError(),布局所占的位置会变多,设计布局注意留适当的空间
EditText的setError和passwordToggleDrawable的图片会重叠,建议只用TextInputLatyout的setError或者重写EditText的布局,抉择一个吧
TextInputLayout.setError()注意调用setErrorEnabled(false)清空错误信息,不然会一直显示
建议TextInputLayout只套一个EditText,放其他控件会出现焦点抢占的问题(View的事件分发)
如果加上字数统计需要在style里加上textErrorColor，否则超过字数会后会闪退。
如果不需要字数统计，且启用错误机制（setErrorEnabled(true)）, 不需要加上textErrorColor（不会闪退）系统会提供一个默认的error color。
当然可以通过textErrorColor来自定义错误颜色(error color).
可以使用更为强大的errorTextAppearance来定义错误颜色，字体大小等属性。如果TextInputLayout 同时设置了textErrorColor和errorTextAppearance ，只有errorTextAppearance生效.
如果加上字数统计，且同时设置了textErrorColor和errorTextAppearance。
这个时候回出现奇怪的效果，Label和统计的颜色为textErrorColor的颜色。
EditText的横线和错误文字提示为errorTextAppearance设置的效果。所以为什么不加上textErrorColor会闪退，因为超过字数后TextInputLayout需要textErrorColor属性设置的颜色。