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>