Android 5.0新控件 TextInputLayout | 文字輸入布局 介紹及使用詳情

extends LinearLayout

Layout which wraps an EditText (or descendant) to show a floating label when the hint is hidden due to the user inputting text.

Also supports showing an error via setErrorEnabled(boolean) and setError(CharSequence)

Google官方對這個控件的大概意思是 這是一個可以包裹EditText或者繼承EditText的浮動标簽，提示當由于使用者輸入text時而隐藏,

還支援通過setErrorEnabled（boolean）和setError（CharSequence）顯示錯誤

一般來說， EditText 有一個 hint 屬性，當 Edittext 中沒有内容時，就會顯示文字提示。一旦使用者開始輸入時，這個文字提示就會消失，取而代之地顯示使用者的輸入。這樣有一個壞處就是使用者就無法了解到目前自己輸入的是關于什麼的資訊。

而TextInputLayout解決了這個問題，使用者開始輸入時， hint 文字提示會變成 EditText 上方的标簽，并伴随一個向上平移+縮放的優雅動畫

說得再好不如來張圖

使用方法

• TextInputLayout來自design相容包，使用需要添加依賴。android studio 添加依賴如下：

dependencies {
    compile ‘com.android.support:design:24.2.0‘
}
           

首先，XML中添加布局檔案

Step1

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="@dimen/px_90">

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

                <EditText
                    android:id="@+id/edittext_username"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>

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

            <android.support.design.widget.TextInputLayout
                android:id="@+id/text_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/px_90">

                <EditText
                    android:id="@+id/edittext_password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>

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

            <Button
                android:id="@+id/btn_login"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/px_90"
                android:text="登入"
                android:textColor="@color/colorWrite"
                android:textSize="16sp"/>

        </LinearLayout>
           

然後，編寫相應的邏輯代碼

Step2

public class PlayTextInputLayout extends MvvmBaseActivity<ActivityPlayTextInputLayoutBinding> implements View.OnClickListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_play_text_input_layout);
        showContentView();
        bindingView.back.setOnClickListener(this);
        bindingView.btnLogin.setOnClickListener(this);
        bindingView.textUsername.setHint("使用者名/Email/手機号");
        bindingView.textPassword.setHint("密碼");
        bindingView.edittextUsername.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }
            @Override
            public void afterTextChanged(Editable s) {
                username();
            }
        });
        bindingView.edittextPassword.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }
            @Override
            public void afterTextChanged(Editable s) {
                password();
            }
        });
    }

    private boolean username() {
        if (TextUtils.isEmpty(bindingView.edittextUsername.getText())) {
            bindingView.textUsername.setError("使用者名/Email/手機号不能為空");
            return false;
        } else {
            bindingView.textUsername.setError(null);
        }
        return true;
    }

    private boolean password() {
        if (TextUtils.isEmpty(bindingView.edittextPassword.getText())) {
            bindingView.textPassword.setError("密碼不能為空");
            return false;
        } else {
            bindingView.textPassword.setError(null);
        }
        return true;
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.back:
                finish();
                break;
            case R.id.btn_login:
                if (username() && password()) {
                    finish();
                    ToastUtil.show("登入成功");
                }
                break;
        }
    }
}
           

• OK，這就完成了如效果圖上的效果，這裡并沒有對UI進行優化，可以自己嘗試一下，下面貼上一些可以自己定制需求常用的方法

設定錯誤提示是否可用

setErrorEnabled(boolean)

設定錯誤提示

setError(CharSequence error) 

設定提示動畫是否可用

setHintAnimationEnabled(boolean enabled) 

設定提示

setHint(CharSequence hint) 

設定提示text的顔色，大小，樣式

setHintTextAppearance(int resId) 

設定提示text的字型

setTypeface(Typeface typeface) 
           

遇到的問題

Question1：TextInputLayout并沒有實作當Edittext出現錯誤提示後輸入内容完成之後隐藏錯誤提示

• 檢視源碼發現并沒有對此進行處理，是以我們在使用的時候需要自己實作edittext的監聽來實作完整的效果

完整代碼點我下載下傳

Thank you

• 以上僅本人學習中遇到的問題，如有更多意見歡迎随時交流 issues
• email:[email protected]