Material Design之TextInputLayout

---

引言

TextInputLayout是Material Design的控件之一，继承自LinearLayout。
参考文章：

• Material Design 之 TextInputLayout和TextInputEditText
• Android TextInputLayout，打造 Material Design 风格的文本输入框

1.几种属性

• app:counterEnabled：字符计数是否可用
• app:counterMaxLength计数最大的长度
• app:counterOverflowTextAppearance：计数超过最大长度时显示的文本样式
• app:counterTextAppearance：显示的计数的文本样式
• app:errorEnabled：显示错误信息是否可用
• app:errorTextAppearance:显示错误信息的文本样式
• android:hint 浮动标签
• app:hintAnimationEnabled 控制是否需要浮动标签的动画
• app:hintEnabled 控制是否显示浮动标签
• app:hintTextAppearance 浮动标签的文本样式
• app:passwordToggleDrawable 密码可见切换图标
• app:passwordToggleEnabled 控制是否显示密码可见切换图标

2. 使用示例

（1）带浮动标签的文本框
效果图：

布局文件：

（2）带字符计数的文本框
效果图：

在上面的基础上添加以下属性：

        app:counterOverflowTextAppearance="@style/TextOverCount"
        app:counterTextAppearance="@style/TextCount"
        app:counterMaxLength="10"
        app:counterEnabled="true"

用到的样式

（3）修改浮动标签的字体大小
效果图：

我们可以利用上面说到的app:hintTextAppearance 属性：

app:hintTextAppearance="@style/HintTextStyle"

样式：

（4）显示密码可见和隐藏的切换按钮
效果图：

添加以下属性即可：

        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/colorPrimary"

（5）显示错误信息
效果图：

代码如下：

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_input_layout);
        ButterKnife.bind(this);
        setTitle("TextInputLayout的学习");
        mTextInputPassword.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) {
                mTextInputLayoutPassword.setErrorEnabled(false);
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });
    }

    @OnClick(R.id.login)
    public void onViewClicked() {
        String password = mTextInputPassword.getText().toString();
        if(TextUtils.isEmpty(password)||password.length()<6){
            mTextInputLayoutPassword.setError("密码错误不能少于6个字符");
        }
    }

3. 完整的demo

效果图：