TextInputLayout&TextInputEditText的使用

Android Android, 移动开发 评论

TextInputLayout & TextInputEditText是Material Design里面的控件，相比EditText而言里面添加了动画和一些新特性，个人感觉体验更好些。非常深的研究并没有，这里记录下最常用的一些用法。

效果图：

可以看到在切换不同输入框的时候User Name和Password有动画，Email无动画。动画就是TextInputLayout自带的，当然这个动画也可以关闭，Email输入框就是将动画关闭了。

效果解析：

提示语

1.可以看到User Name下面有一个限制字符的提示标签”？/10”

要实现这个效果，只需添加如下代码即可

1
2
3

mTextInputUserName.setCounterEnabled(true);
mTextInputUserName.setCounterMaxLength(10);

2.可以看到Password有对字符数的提示：

这里面有两个提示，是分别对TextInputLayout和TextInputEditText进行设置的。要实现如下效果，添加如下代码即可：

1
2
3
4
5
6
7
8

 String passwordText = mPassword.getText().toString();
        if (!TextUtils.isEmpty(passwordText) && passwordText.length() < 6) {
 
 //下面两行使用其中一行即可           mTextInputPassword.setError(getString(R.string.password_error));
mPassword.setError(getString(R.string.password_error));  //可以使用这个，带有Drawable的需要的API level是21，如果你兼容的版本是21以下的就不能用
         //mPassword.setError(getString(R.string.password_error),getDrawable(R.mipmap.ic_launcher));//Call requires API level 21
        }

3.对密码的显示与隐藏的切换

这个效果需要添加一个命名空间 ：
xmlns:kevin="http://schemas.android.com/apk/res-auto"
在布局文件中为TextInputLayout添加如下代码即可：

1
2
3
4

kevin:passwordToggleDrawable="@drawable/eye"//图标
kevin:passwordToggleEnabled="true"//密码切换开关是否可以用
kevin:passwordToggleTint="@color/colorAccent"//图标的颜色，可有可无

颜色

说到颜色，这里值得注意的是，可以看到我将提示字符的颜色改成了紫色。但是默认颜色在6.0以下，UserName和Password是一样的。在6.0及6.0以上则不同了。

  • 7.0效果

  • 5.1效果

所以这里如果要兼容6.0或者7.0的时候还是要定制化的，不然达不到统一 效果。

1
2
3
4

kevin:counterOverflowTextAppearance="@style/counterOverflowTextColor"//UserName的TextInputLayout里添加

kevin:errorTextAppearance="@style/counterOverflowTextColor"//Password的TextInputLayout里添加

至于下划线的颜色，就是主题中colorAccent的颜色，所以要改下划线颜色的话，在Theme里面将colorAccent改一下即可。
字条颜色就是textColor属性，默认是黑色。

1
2

android:textColor="@color/light_green_900"//绿色

DownLoad

DownLoad(CSDN)

DownLoad(github)

KevinAndroid developer

个人简介。