Material Design 之 TextInputLayout和TextInputEditText

時間  2019-11-17
標籤 material design textinputlayout textinputedittext 简体版
原文   原文鏈接

寫在前面

更多Material Design 文章請看：
Material Design 之 Toolbar 開發實踐總結
Material Design之 AppbarLayout 開發實踐總結
Material Design 之 Behavior的使用和自定義Behavior
Material Design 之 TabLayout 使用
文本框相信你們都很熟悉，文本框可讓用戶輸入文本。它們能夠是單行的，帶或不帶滾動條，也能夠是多行的，而且帶有一個圖標。點擊文本框後顯示光標，並自動顯示鍵盤。除了輸入，文本框能夠進行其餘任務操做，如文本選擇（剪切，複製，粘貼）以及數據的自動查找功能。這篇文章講的就是Material Design 風格的文本框，它有有一些比較炫酷的動畫效果（好比輸入的時候，內嵌標籤會浮動到內容的上方），此外還給我一些特別有用的功能，如錯誤提示、計數等等。Material Design 風格的文本框是用TextInputLayout 和TextInputEditText 兩個View來實現的，該類support design 包中。下面就來看一下TextInputLayout 的具體用法。html

TextInputLayout 使用

TextInputLayout介紹

首先來看一下TextInputLayout，TextInputLayout 是EditText(或者EditText子類)的一個包裝類，它主要用於在用戶輸入文本的時候顯示一個浮動標籤，也支持顯示錯誤信息和字符計數等功能。一樣它也支持密碼可見切換按鈕，經過setPasswordVisibilityToggleEnabled(boolean)API 或者 xml 中的屬性，若是設置該屬性爲可用（enable）,那麼當EditText 顯示設置的密碼時，會顯示一個切換密碼可見和隱藏的按鈕。java

注意：當使用密碼切換按鈕的時候，EditText 結束位置的 圖標時會被覆蓋的，爲了保證EditText 結束位置Drawable的正常顯示，你須要設置這些Drawables 的相對位置（ 相對start的位置／相對結束的位置）。android

圖標覆蓋，以下圖：git

override_drawable.png

如上圖所示，切換密碼可見的按鈕（眼睛圖標）和錯誤提示的圖標 覆蓋在一塊兒了。github

TextInputLayout 重要方法和屬性

來看一下TextInputLayout 的一些重要方法和屬性：app

  • app:counterEnabled 字符計數是否可用
    代碼中對應的方法爲：setCounterEnabled（boolean）ide

  • app:counterMaxLength 計數最大的長度
    代碼中對應的方法爲：setCounterMaxLength（int ）佈局

  • app:counterOverflowTextAppearance 計數超過最大長度時顯示的文本樣式post

  • app:counterTextAppearance 顯示的計數的文本樣式。測試

  • app:errorEnabled 顯示錯誤信息是否可用

  • app:errorTextAppearance 顯示錯誤信息的文本樣式

  • android:hint 浮動標籤
    代碼對應方法：setHint(CharSequence)

  • app:hintAnimationEnabled 控制是否須要浮動標籤的動畫
    代碼對應方法：setHintAnimationEnabled(boolean)
  • app:hintEnabled 控制是否顯示浮動標籤
    代碼對應方法：setHintEnabled(boolean)
  • app:hintTextAppearance 浮動標籤的文本樣式
    代碼對應方法：setHintTextAppearance(int)
  • app:passwordToggleDrawable 密碼可見切換圖標
    代碼對應方法：setPasswordVisibilityToggleDrawable(int)或者setPasswordVisibilityToggleDrawable(Drawable)
  • app:passwordToggleEnabled 控制是否顯示密碼可見切換圖標
    代碼對應方法：setPasswordVisibilityToggleEnabled(boolean)
TextInputLayout 使用示例

瞭解了以上的屬性和方法後，咱們看一下具體使用：
1，帶浮動標籤的文本框
代碼以下：

/>
    <android.support.design.widget.TextInputLayout
        android:id="@+id/text_input_layout_user"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:counterOverflowTextAppearance="@style/TextOverCount"
        android:scrollbarAlwaysDrawHorizontalTrack="true"
        android:textColorHint="@color/colorHint"
        >
         <EditText
             android:id="@+id/text_input_user"
             android:layout_width="match_parent"
             android:layout_height="48dp"
             android:hint="用戶名"
             android:inputType="text"
             android:textColor="@color/black"
             />

    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:id="@+id/text_input_layout_phone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:counterOverflowTextAppearance="@style/TextOverCount"
        android:scrollbarAlwaysDrawHorizontalTrack="true"
        android:textColorHint="@color/colorHint"
        >
        <EditText
            android:id="@+id/text_input_phone"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:hint="手機號碼"
            android:inputType="number"
            android:textColor="@color/black"
            />

    </android.support.design.widget.TextInputLayout>複製代碼

效果以下：

Floating_label.gif

2,帶字符計數的文本框
佈局：

<android.support.design.widget.TextInputLayout
        android:id="@+id/text_input_layout_user"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:textColorHint="@color/colorHint"
        >
         <EditText
             android:id="@+id/text_input_user"
             android:layout_width="match_parent"
             android:layout_height="48dp"
             android:hint="用戶名"
             android:inputType="text"
             android:textColor="@color/black"
             />

    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:id="@+id/text_input_layout_phone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"

        android:scrollbarAlwaysDrawHorizontalTrack="true"
        android:textColorHint="@color/colorHint"
        >
        <EditText
            android:id="@+id/text_input_phone"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:hint="手機號碼"
            android:inputType="number"
            android:textColor="@color/black"
            />
    </android.support.design.widget.TextInputLayout>複製代碼

在Activity 中設置，計數的長度：

mTextInputLayoutUser = (TextInputLayout) findViewById(R.id.text_input_layout_user);
        //設置能夠計數
        mTextInputLayoutUser.setCounterEnabled(true);
        //計數的最大值
        mTextInputLayoutUser.setCounterMaxLength(20);複製代碼

效果以下：

count_edittext.gif

如上圖所示，右下角會自動計數，當超過最大值時，計數文本、浮動標籤和下標線都變成了紅色，而後咱們也能夠用上面介紹的屬性來更改：
添加代碼

app:counterOverflowTextAppearance="@style/TextOverCount"複製代碼

style 的代碼以下：

<style name="TextOverCount" parent="Base.TextAppearance.AppCompat.Light.Widget.PopupMenu.Small">
      <item name="android:textColor">@android:color/holo_green_light</item>
    </style>複製代碼

效果以下：

count_over_apprence.png

如上圖，將顯示的顏色改成了綠色，固然也能夠在style中改字體的大小，在添加一個item 就行

<item name="android:textSize">20sp</item>複製代碼

更改計數文本的顯示樣式是同樣的，定義一個style ,而後經過app:counterTextAppearance 設置就行。

3，顯示密碼可見和隱藏的切換按鈕
代碼以下：

<android.support.design.widget.TextInputLayout
        android:id="@+id/text_input_layout_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:textColorHint="@color/colorHint"
        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/colorHint"
        app:passwordToggleDrawable="@drawable/ic_eye_grey_24dp"
        >

        <android.support.design.widget.TextInputEditText
            android:id="@+id/text_input_password"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:hint="密碼"
            android:textColor="@color/black"
            android:inputType="textPassword"
            android:singleLine="true"
            />
    </android.support.design.widget.TextInputLayout>複製代碼

效果以下：

toggle.gif

如上圖，能夠看到，右邊多了一個圖標，點擊圖標可使密碼是明文或者隱藏。只是在佈局文件中添加了幾個屬性

app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/colorHint"
        app:passwordToggleDrawable="@drawable/ic_eye_grey_24dp"複製代碼

固然了，也可依在代碼中設置，同樣的效果，不在演示。
4, 顯示錯誤信息
TextInputLayout 是能夠顯示錯誤信息的，這種需求很常見沒，好比登陸的時候密碼錯誤，給出相應的提示，比Toast 提示更加友好。
代碼以下：

mTextInputLayoutPassword = (TextInputLayout) findViewById(R.id.text_input_layout_password);
        mInputEditTextPassword = (TextInputEditText) findViewById(R.id.text_input_password);

        mInputEditTextPassword.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) {
                mTextInputLayoutPassword.setErrorEnabled(false);
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });

        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String password = mInputEditTextPassword.getText().toString();
                if(TextUtils.isEmpty(password)||password.length()<6){
                    mTextInputLayoutPassword.setError("密碼錯誤不能少於6個字符");
                }

            }
        });複製代碼

效果以下：

error_tip.gif

當密碼不正確的時候，顯示錯誤提示，當內容發生變幻的時候，記得調用

mTextInputLayoutPassword.setErrorEnabled(false);複製代碼

不然錯誤信息會一直顯示界面上。

固然有些時候咱們不須要浮動標籤，或者不須要浮動標籤的動畫，咱們能夠控制，將對應屬性設置爲false就好了。

TextInputEditText 使用

上面講了TextInputLayout的使用，那麼TextInputEditText是幹什麼的呢？ 其實就是一個EditText 的子類，上面講的全部功能，TextInputLayout 裏面包的子View既能夠是EditText,也能夠是TextInputEditText，效果是同樣的。根據文檔的解釋，官網原文：A special sub-class of EditText
designed for use as a child of TextInputLayout。Using this class allows us to display a hint in the IME when in 'extract' mode.

解釋：TextInputEditText 是 EditText 的子類，專門用做TextInputLayout的子View。它容許再｀extract｀模式（提取模式）下顯示浮動標籤。

也看過一些文章說，橫屏模式EditText 不顯示浮動標籤，TextInputEditText 會顯示浮動標籤，可是我測試了一下，並無發現所說的EditText 不顯示浮動標籤，TextInputEditText 會顯示浮動標籤。若是有知道的，請在評論區告知一下。,測試效果以下：（上看兩個是EditText,最後一個是TextInputEditText）

text_input_edit.gif

TextInputEditText 、EditText 做爲TextInputLayout 的子View使用差異很小，既然Google 說在extract 模式下TextInputEditText 更好，那咱們開發中使用TextInputEditText配合TextInputLayout使用就行了。

另外，上面講了TextInputLayout 能夠顯示錯誤信息，TextInputEditText也是能夠顯示錯誤信息的，用下面兩個方法：

mInputEditTextUser.setError("格式不正確");
//或者
mInputEditTextUser.setError("格式不正確",getDrawable(R.drawable.activity_close));複製代碼

error_tip2.png

最後

以上就是TextInputLayout和TextInputEditText 的所有內容，Demo 請戳MaterialDesignSamples。元旦以前來一發，祝你們元旦快樂！！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程