Android Material Design 之 TextInputLayout

TextInputLayout 是 Material Design 风格的输入框。效果如下。

EditText 在获取焦点的时候，hint 会作为 title 移动到上面去，这样用户输入的过程中也能看到 hint。

TextInputLayout 自带 Error Message，当发生错误的时候，消息显示到线的下方，并且线的颜色也会变掉。

EditText 只要用 TextInputLayout 包裹一下，就能够达到 Material Design 的效果了，XML 的代码如下

Activity 中的代码如下：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private static final String EMAIL_PATTERN = "^[a-zA-Z0-9#_~!$&'()*+,;=:.\"(),:;<>@\\[\\]\\\\]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*$";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.btn).setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {

        TextInputLayout usernameWrapper = (TextInputLayout) findViewById(R.id.usernameWrapper);
        TextInputLayout passwordWrapper = (TextInputLayout) findViewById(R.id.passwordWrapper);

        String username = usernameWrapper.getEditText().getText().toString();
        String password = passwordWrapper.getEditText().getText().toString();

        if (!TextUtils.isEmpty(username) && !validateEmail(username)) {
            usernameWrapper.setError("Not a valid email address!");
        } else {
            usernameWrapper.setErrorEnabled(false);
        }

        if (!TextUtils.isEmpty(password) && !validatePassword(password)) {
            passwordWrapper.setError("Not a valid password!");
        } else {
            passwordWrapper.setErrorEnabled(false);
        }
    }

    public boolean validateEmail(String email) {
        Matcher matcher = Pattern.compile(EMAIL_PATTERN).matcher(email);
        return matcher.matches();
    }

    public boolean validatePassword(String password) {
        return password.length() > 5;
    }
}

这样，一个简单的登陆画面就完成了。

下面在进一步的介绍一些属性的使用

app:hintEnable
hintEnable 默认是 true 的，只有 true 的时候，获取焦点后 hint 才会移到上面去，如果设为 false，那么 hint 还会再输入框里面。

app:hintAnimationEnabled
hintAnimationEnabled 默认是 true 的，只有 true 的时候，获取焦点以及丢失焦点后 hint 的移动才有动画，如果设为 false，则没有动画。

app:counterEnabled app:counterMaxLength
如果像在输入框下面加入字数统计，可以设置这两个属性，效果如下图

字数统计仅仅是字数统计，并不会限制字数。当超过最大字数时，仍然可以输入，只不过颜色会变成红色，如下图

app:passwordToggleEnabled
有些 App 在输入密码的时候，右边有个眼睛的图标，通过点击可以控制密码可不可见。
如果要显示图标，只要设置 passwordToggleEnabled 为 true 就好了。效果如下

app:passwordToggleTint="@color/colorAccent"
当然 password 的图标的颜色也是可以变的。

app:passwordToggleDrawable
也可以自定义 password 的图标，自定义的图标的颜色也可以通过 app:passwordToggleTint 来改变颜色！

app:hintTextAppearance
自定义浮动标签样式

app:errorTextAppearance
自定义错误信息样式