Android開發手冊TextInputLayout樣式使用示例

Posted on by

前言

前面小空帶同學們學瞭EditText控件，又用其實踐做瞭個驗證碼功能，以為這就完瞭嗎？

然而並沒有。

Android在5.0以後引入瞭Materia Design庫的設計，現在又有瞭Jetpack UI庫的設計。幫助開發者更高效的實現炫酷的UI界面，降低開發門檻。

Jetpack我們後面再說，承接之前的EditText，先說說Materia Design裡的TextInputLayout。

使用方式是將TextInputEditText或EditText套到TextInputLayout內，這樣友情提示信息hit就可以帶有動畫（上浮為標題），計數/密碼可見等屬性設置。  

佈局代碼

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="請輸入用戶名">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="60dp"
    android:hint="請輸入密碼">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

這樣就簡單的實現瞭一個效果。我們在繼續深入添加些屬性：

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="請輸入用戶名"
    app:hintAnimationEnabled="false">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="60dp"
    android:hint="請輸入密碼"
    app:counterEnabled="true"
    app:counterMaxLength="10"
    app:passwordToggleEnabled="true">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

從運行結果可以看出，設置瞭字數限制後，自動在編輯框右下角顯示最大字數和當前輸入字數（隨著輸入情況實時變化），並且更改瞭顏色樣式

😜屬性介紹

  • app:boxCollapsedPaddingTop 設置用於編輯文本在框模式下折疊的頂部填充的值 
  • app:boxStrokeErrorColor 在顯示錯誤時設置輪廓框的描邊顏色。 
  • app:boxStrokeWidth 設置描邊的寬度 
  • app:boxStrokeWidthFocused 設置獲取焦點框的描邊寬度 
  • app:counterEnabled     是否顯示計數器 
  • app:counterMaxLength 設置計數器的最大值,與counterEnabled同時使用 
  • app:counterTextAppearance       計數器的字體樣式 
  • app:counterOverflowTextAppearance 輸入字符大於我們限定個數字符時的字體樣式 
  • app:errorEnabled  是否顯示錯誤信息 
  • app:errorTextAppearance&nbsp;   錯誤信息的字體樣式 
  • app:endIconCheckable 設置是否顯示結束圖標 
  • app:endIconContentDescription 為結束圖標設置內容說明 
  • app:endIconDrawable 設置結束圖標圖像 
  • app:endIconMode 設置模式 
  • app:endIconTintMode 指定混合模式，用於將 指定的色調應用於可繪制的結束圖標。 
  • app:helperText 設置幫助文本 
  • app:helperTextEnabled 設置是否激活幫助文本 
  • app:helperTextTextColor 設置幫助文本顏色 
  • app:hintAnimationEnabled  是否顯示hint的動畫,默認true 
  • app:hintEnabled    是否使用hint屬性,默認true 
  • app:hintTextAppearance      設置hint的文字樣式(指運行動畫效果之後的樣式) 
  • app:passwordToggleDrawable    設置密碼開關Drawable圖片,於passwordToggleEnabled同時使用 
  • app:passwordToggleEnabled      是否顯示密碼開關圖片,需要EditText設置inputType 
  • app:passwordToggleTint     設置密碼開關圖片顏色 
  • app:passwordToggleTintMode    設置密碼開關圖片(混合顏色模式),與passwordToggleTint同時使用

以上就是Android開發手冊TextInputLayout樣式使用示例的詳細內容，更多關於Android開發TextInputLayout樣式的資料請關註WalkonNet其它相關文章！

推薦閱讀：