Design下TextInputLayout結合EditText的簡單使用

今天寫的是Design下的TextInputLayout。

稍微介紹一下，一般我們在App上面登錄註冊頁面時，都需要去檢測用戶輸入的內容是否正確，然後給出提醒或錯誤顯示。之前我們都是佈局寫一大堆代碼，顯示錯誤信息，判斷控件內容。總的來說比較麻煩。而現在有了TextInputLayout,我們不在需要這麼麻煩。

TextInputLayout給我們提供了兩種功能：

1，給EditText添加一個帶有動畫效果的提示標籤（利用EditText的hint屬性的值作爲提示標籤內容）,

2，處理錯誤輸入，將錯誤輸入提示信息顯示在EditText附近，便於提示用戶更好地完成輸入。

TextInputLayout只是一個ViewGroup,裏面可以定義Edittext,而且會把EditText中hint屬性作爲提示標籤。

首先需先導入Design包：

之後build.gradle文件下會多下面一句代碼：

先看下activity_mian.xml佈局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="main.hwh.com.textinputtext.MainActivity"
    android:orientation="vertical">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/usernameLayout"
        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:inputType="textEmailAddress"
            android:hint="Username"/>

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

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

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

    <Button
        android:id="@+id/loginBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="50dp"
        android:text="Login"
        android:onClick="loginOnClick"
        android:layout_gravity="center"/>

</LinearLayout>

這個是個簡單登錄頁面。兩個TextInputLayout分別包裹UserName和Password。

注意：當EditText設置了Hint屬性時,它的內容將作爲TextInputLayout的提示標籤,不是錯誤標籤。

下面看一下用法，MainActivity.java:

<pre style="font-family: Consolas; font-size: 10.5pt; background-color: rgb(255, 255, 255);"><pre name="code" class="java">public class MainActivity extends AppCompatActivity {

    private TextInputLayout usernameLayout;
    private TextInputLayout passwordLayout;
    private Button loginBtn;


//
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        usernameLayout = ((TextInputLayout) findViewById(R.id.usernameLayout));
        passwordLayout = ((TextInputLayout) findViewById(R.id.passwordLayout));
        loginBtn = ((Button) findViewById(R.id.loginBtn));
    }

    public void loginOnClick(View v){
        hideKeyboard();
        String username = usernameLayout.getEditText().getText().toString();
        String password = passwordLayout.getEditText().getText().toString();

        if (!"Tmac".equals(username)){
            usernameLayout.setError("你不是麥迪。請重新輸入");
        }else if(!"123456".equals(password)){
            passwordLayout.setError("密碼錯誤，請重新輸入");
        }else{
            //用戶名密碼都正確。取消Error顯示
            usernameLayout.setErrorEnabled(false);
            passwordLayout.setErrorEnabled(false);
            Toast.makeText(this,"歡迎回來",Toast.LENGTH_LONG).show();

        }
    }

    //隱藏虛擬鍵盤
    private void hideKeyboard() {
        View view = getCurrentFocus();
        if (view != null) {
            ((InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE)).
                    hideSoftInputFromWindow(view.getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);
        }
    }
}

其中

usernameLayout.getEditText().getText().toString();

可以到EditText中輸入的內容。

usernameLayout.setError("你不是麥迪。請重新輸入");

這個方法是判斷用戶名錯誤之後希望他顯示的錯誤信息。

usernameLayout.setErrorEnabled(false);

這個方法是用戶名，密碼都正確之後把他的錯誤提示設置爲false，不這樣設置的話，錯誤信息會一直顯示。

下面看下效果圖：