Material Design - TextInputLayout的使用

最近在项目中尝试使用了官方的MD里面控制,感觉效果不错,很是好用,下面记载下TextInputLayout的使用。
TextInputLayout是Material Design中的一个布局控件,主要用来嵌套EditText,实现数据输入时的一些效果,如:
当输入框获取焦点时,输入提示语会动画移动到输入框上方;
当输入框失去焦点时,如果输入框中没有文本,则提示语动画移动回到输入框中;
当输入不合规范时,会在输入框下方显示错误提示语;
当输入的是密码时,可以选择是否显示“显示密码”的按钮以及按钮的图案;
可以显示输入框中当前文本的长度和要求的长度,等。
需要特别注意的是,TextInputLayout作为一个布局控件,不能独立存在,必须嵌套在EditText或TextInputEditText外层,而且1个TextInputLayout只能包1个EditTExt。
简单说下TextInputLayout的属性:

Material Design - TextInputLayout的使用_第1张图片
Paste_Image.png

app:passwordToggleEnabled:是否显示可以查看密码的Toggle按钮
app:passwordToggleDrawable:查看密码的Toggle按钮的图片
注:只有当包裹的EditText或TextInputEditText的InputType是密码格式时才会显示这个图标
app:counterEnabled:是否显示文本长度计数器
app:counterMaxLength:文本长度计数器的最大长度
注:文本长度计数器就是在输入框的右下角显示“X/Y”字样,X表示当前输入框中的文本长度,Y表示规定的输入长度,如果用户输入的长度超过Y,则文本计数器中的文本会变色提示
app:counterOverflowTextAppearance:当字数超出计数器的最大限制时的字体格式
其他属性基本都是见名知意
布局代码示例:

Material Design - TextInputLayout的使用_第2张图片
Paste_Image.png
Material Design - TextInputLayout的使用_第3张图片
Paste_Image.png

基本代码使用:

Material Design - TextInputLayout的使用_第4张图片
Paste_Image.png

你可能感兴趣的:(Material Design - TextInputLayout的使用)