《學習記錄》TextInputLayout一般用法

《學習記錄》TextInputLayout一般用法

design庫已經出現相當長一段時間了，平時除了用一用TabLayout，其他基本沒用到！這怎麼能忍，看到谷歌給的LoginActivity的template，裏面就用TextInputLayout和TextInputEditText，於是抽時間看一看，順便寫篇博客記錄一下學習記錄。

直接開始：

TextInputLayout直接用來包裹一個EditText或者EditText的子類，在用戶輸入時做一些使用戶感覺更友好的體驗。

有一些enabled的屬性和Appearance的屬性，列舉如下;

• app:counterEnabled :是否開啓字數計數，開啓字數計數後在EditText的右下角有一個計數的標誌。
• app:counterMaxLength :設置EditText應該輸入的最大字數，如果輸入的字數超過設置的字數，則計數標誌會有相應的提示。
• app:counterTextAppearance ：計數標誌的樣式，不超過字數的正常模式下。

• app:counterOverflowTextAppearance：超過字數時，計數標誌的樣式。

• app:hintEnabled :hintEnabled 設置爲true，則在輸入狀態下，hint會跑到EditText左上方。

• app:hintAnimationEnabled ：hint跑到EditText左上方時是否有一個動畫效果。

• app:hintTextAppearance：跑到EditText左上方的hint的樣式。

• app:errorEnabled ：是否顯示錯誤內容，設置爲true，EditText的左下方會出現錯誤提示信息。

• app:errorTextAppearance:錯誤提示的樣式。

裏面的TextAppearance很多，一幅圖來說明：

額，圖太醜了！！！！

那我們一般的用法是咋樣呢？很簡單，

• 佈局代碼如下：

 <android.support.design.widget.TextInputLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:counterEnabled="true"<!--設置計數開啓-->
        app:counterMaxLength="6"<!-設置最大長度是6-->
        app:counterOverflowTextAppearance="@style/myOverFlowText"<!--設置長度超出後的樣式-->
        app:errorTextAppearance="@style/myErrorStyle"<!--設置錯誤提示樣式-->
        app:counterTextAppearance="@style/countStyle"<!-設置計數樣式->
        app:hintTextAppearance="@style/hintStyle"<!--設置hint樣式-->
        app:hintAnimationEnabled="true"<!--設置hint動畫開啓-->
        app:hintEnabled="true"><!-設置hint跑到頂部開啓->

        <EditText
            android:id="@+id/id_login_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="請輸入用戶名"
            android:inputType="text" />
    </android.support.design.widget.TextInputLayout>

• 代碼設置如下：

private TextInputLayout layoutName,layoutPassword;
private EditText etLoginName,etPassword;
private Button btnSubmit;

private boolean isNameValid(){
        if(TextUtils.isEmpty(etLoginName.getText().toString())){
            layoutName.setErrorEnabled(true);
            layoutName.setError("用戶名不能爲空");
            etLoginName.requestFocus();
            return false;
        }
        layoutName.setErrorEnabled(false);
        return true;
    }
etLoginName.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) {
            isNameValid();
        }

});


btnSubmit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(!isNameValid()){
                    Snackbar.make(layoutName,"用戶名無效",Snackbar.LENGTH_SHORT)
                            .setAction("click text",null).show();
                    return;
                }

                //go on doing something

            }
        });

• 當然，輸入框錯誤提示你可以這樣指定：

            etPassword.setError("error msg");