Android Material Design控件學習（三）——使用TextInputLayout實現酷市場登陸效果

前言

前兩次，咱們學習了

• Android Material Design控件學習（一）——TabLayout的用法
• Android Material Design控件學習（二）——NavigationView的學習和使用

今天咱們繼續MD控件的學習和使用。在學習以前，咱們先來看一下酷市場的登陸效果。

實現這種效果的正是咱們今天的主角——TextInputLayout。

學習

無論學習什麼，首先看它的官方文檔。這是最權威，最高效的學習途徑。

文檔地址:http://developer.android.com/reference/android/support/design/widget/TextInputLayout.html

能夠看到，TextInputLayout繼承自LinearLayout。通常將EditText和它的子類包含在內，以便用戶在輸入文本時，且當提示文本被隱藏時顯示一個浮動的標籤。

也支持經過setErrorEnabled(boolean)和setError(CharSequence)方法來顯示錯誤提示。

用法

TextInputLayout使用起來很是簡單，兩部搞定

• 1.編寫XML佈局文件，將EditText包含在內便可。

<android.support.design.widget.TextInputLayout
            android:id="@+id/textInputLayoutName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="30dp">

            <EditText
                android:id="@+id/editTextName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/hint_name"
                android:textColorHint="@color/colorGray"
                />
        </android.support.design.widget.TextInputLayout>

• 2.編寫邏輯代碼
  原本不須要這一步的，由於這控件存在一個bug，當清空以前輸錯的內容後，提示錯誤的紅色文字並不會消失。

我在Google和StackOverFlow上找了好久，這貌似是Google的bug。可參考 https://code.google.com/p/android/issues/detail?id=190355

爲了解決這個bug，就須要咱們監聽EditText的輸入變化了，具體處理看代碼。

mEditTextName.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) {
                checkName(s.toString(),false);
            }
        });
/**
 *若用戶名爲空且用戶是想登陸，提示錯誤，返回false。不爲空，錯誤設爲null
 */
 private boolean checkName(CharSequence name,boolean isLogin) {
        if(TextUtils.isEmpty(name)) {
            if(isLogin) {
                mTextInputLayoutName.setError(getString(R.string.error_login_empty));
                return false;
            }
        }else{
            mTextInputLayoutName.setError(null);
        }
        return true;
    }

實現效果：

具體代碼我上傳到Github了，https://github.com/JohnTsaiAndroid/CoolMarket

歡迎star&fork