该控件继承自linearlayout,里边只能包裹一个控件,EditText或继承自EditText,java
在用户输入的时候能将原来的提示文字浮动在控件上边。android
使用此控件须要引入依赖app
dependencies{ implementation 'com.android.support:appcompat-v7:28.0.0' implementation 'com.android.support:design:28.0.0' }
下面是简单调用的代码ide
<?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>
实现的效果布局
属性 | 说明 |
---|---|
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代码同上spa
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) { } });
效果以下3d
加入密码, 用户能够手动设置可见
效果以下
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配置的颜色。
下面是注意事项 : 百度出来的感受挺有道理, 贴在下方了
若是加上字数统计须要在style里加上textErrorColor,不然超过字数会后会闪退。
若是不须要字数统计,且启用错误机制(setErrorEnabled(true)), 不须要加上textErrorColor(不会闪退)系统会提供一个默认的error color。
固然能够经过textErrorColor来自定义错误颜色(error color).
若是加上字数统计,且同时设置了textErrorColor和errorTextAppearance。 这个时候回出现奇怪的效果,Label和统计的颜色为textErrorColor的颜色。 EditText的横线 和 错误文字提示为errorTextAppearance设置的效果。因此为何不加上textErrorColor会闪退,由于超过字数后TextInputLayout须要textErrorColor属性设置的颜色。