Android Material Design 之 TextInputLayout

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

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

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

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="Welcome"
            android:textColor="#333333"
            android:textSize="30sp" />

    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:orientation="vertical">

        <android.support.design.widget.TextInputLayout
            android:id="@+id/usernameWrapper"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/username"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Username"
                android:inputType="textEmailAddress" />

        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/passwordWrapper"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp">

            <EditText
                android:id="@+id/password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Password"
                android:inputType="textPassword" />

        </android.support.design.widget.TextInputLayout>

        <Button
            android:id="@+id/btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:text="Login" />

    </LinearLayout>

</LinearLayout>
           

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() > ;
    }
}
           

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

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

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

自定义浮动标签样式

<style name="hintAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">#ffee00</item>
</style>
           

app:errorTextAppearance

自定义错误信息样式

<style name="errorAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">@color/red</item>
</style>