Material Design(二)、TextInputLayoutの使用

前言
 一般的にログイン登録インタフェースにはEditTextというコントロールが必要であり、ユーザーに情報を入力させるためにラベル(TextViewを使用)とEditTextのhint属性を設定してユーザーに入力された内容を提示するのが一般的であるが、設計ライブラリの高級コンポーネントTextInputLayoutはEditTextのために設計されている.すなわち、ユーザが入力を開始するとhint属性値がEditTextの上にヒントラベルとして表示されることを、TextInputLayoutラップEditTextを使用して実現する.このプロセスにはアニメーション効果もあり、ユーザが入力したときに入力プロンプトが消えることを回避し、ユーザに誤った入力情報をよりよく提示することができる.
TextInputLayoutの2つの機能:

EditTextにアニメーション効果のあるヒントラベル(ヒントラベルの内容としてEditTextのhint属性の値を利用する)を追加する.

はエラー入力を処理し、エラー入力プロンプト情報をEditTextの近くに表示し、ユーザーによりよく入力を完了するように促す.

1.フローティングラベルヒント効果を実現する
 TextInputLayoutはFrameLayoutと同様にViewGroupですが、TextInputLayoutはEditTextを包み、EditTextのandroid:hint属性値をヒントラベルとして使用するので、以下のように非常に簡単です.

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_margin="20dp"
        android:id="@+id/usernameWraper"
        android:layout_height="wrap_content">
        <EditText
            android:layout_width="match_parent"
            android:hint="      "
            android:layout_height="wrap_content"/>

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

TextInputLayoutでEditTextをラップし、EditTextにhintプロパティを設定すると、このEditTextにフローティングプロンプトラベルの効果があります.効果をよりよく見るために、このxmlレイアウトファイルを豊富にします.

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

    <RelativeLayout  android:layout_width="match_parent" android:background="#ff9900" android:layout_height="200dp">

        <TextView  android:text="    " android:layout_centerInParent="true" android:layout_width="wrap_content" android:textColor="#fff" android:textSize="30sp" android:layout_height="wrap_content"/>
    </RelativeLayout>

    <android.support.design.widget.TextInputLayout  android:layout_width="match_parent" android:layout_margin="20dp" android:id="@+id/usernameWraper" android:layout_height="wrap_content">
        <EditText  android:layout_width="match_parent" android:hint="      " android:layout_height="wrap_content"/>

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

    <android.support.design.widget.TextInputLayout  android:layout_width="match_parent" android:layout_margin="20dp" android:id="@+id/passwordWraper" android:layout_height="wrap_content">
        <EditText  android:layout_width="match_parent" android:hint="     " android:layout_height="wrap_content"/>

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

    <Button  android:layout_width="match_parent" android:layout_margin="20dp" android:text="  " android:id="@+id/btn_login" android:layout_height="wrap_content"/>
</LinearLayout>

2.エラー入力情報を表示
 TextInputLayoutは、入力データがエラー入力プロンプトをより容易に表示できることを検証し、入力をより友好的にすることができます.
エラー情報の処理には、TextInputLayoutが2つの方法を提供します.

setError(String message):EditText付近に表示されるエラーメッセージを設定します.

setErrorEnabled(boolean enabled):エラー情報を設定してはいけません.つまり、setError(String message)に追加されたエラーメッセージを削除します.

コード例:

package com.example.lt.meterialdesign;

import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.widget.Button;

public class LoginActivity extends AppCompatActivity implements View.OnClickListener {

    private TextInputLayout mUsernameWraper;
    private TextInputLayout mPasswordWraper;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        mUsernameWraper = (TextInputLayout) findViewById(R.id.usernameWraper);
        mPasswordWraper = (TextInputLayout) findViewById(R.id.passwordWraper);

        Button btn_login = (Button) findViewById(R.id.btn_login);
        btn_login.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        // TextInputLayout       EditText
        String username = mUsernameWraper.getEditText().getText().toString().trim();
        String password = mPasswordWraper.getEditText().getText().toString().trim();
        if(TextUtils.isEmpty(username)){
            mUsernameWraper.setError("       ");
            return;
        }else{
            //         
            mUsernameWraper.setErrorEnabled(false);
        }
        if(TextUtils.isEmpty(password)){
            mPasswordWraper.setError("      ");
            return;
        }else{
            //         
            mPasswordWraper.setErrorEnabled(false);
        }
    }
}

ここでは、ユーザー名とパスワードが空かどうかを判断するだけで、フォーマットを指定する場合は正規表現と組み合わせてデータフォーマットを検証できます.EditTextでは、addTextChangedListenerをリスニングするテキスト変更を追加できます.ユーザーが入力したテキストを変更した後、データフォーマットの検証を行い、入力プロンプトをさらに表示します.
実行効果:
EditTextに情報を入力し始めると、EditTextのhintプロパティ値がEditTextに表示され、フローティングラベルとして表示されます.また、入力されたデータフォーマットが正しくない場合は、EditTextの下にエラーメッセージが表示されます.