快捷導(dǎo)航

Android開發(fā)手冊(cè)TextInputLayout樣式使用示例

更新時(shí)間：2022年06月10日 17:22:39 作者：芝麻粒兒

這篇文章主要為大家介紹了Android開發(fā)手冊(cè)TextInputLayout樣式使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

前面小空帶同學(xué)們學(xué)了EditText控件，又用其實(shí)踐做了個(gè)驗(yàn)證碼功能，以為這就完了嗎？

然而并沒有。

Android在5.0以后引入了Materia Design庫的設(shè)計(jì)，現(xiàn)在又有了Jetpack UI庫的設(shè)計(jì)。幫助開發(fā)者更高效的實(shí)現(xiàn)炫酷的UI界面，降低開發(fā)門檻。

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

使用方式是將TextInputEditText或EditText套到TextInputLayout內(nèi)，這樣友情提示信息hit就可以帶有動(dòng)畫（上浮為標(biāo)題），計(jì)數(shù)/密碼可見等屬性設(shè)置。

布局代碼

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="請(qǐng)輸入用戶名">
    <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="請(qǐng)輸入密碼">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

這樣就簡單的實(shí)現(xiàn)了一個(gè)效果。我們?cè)诶^續(xù)深入添加些屬性：

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="請(qǐng)輸入用戶名"
    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="請(qǐng)輸入密碼"
    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>

從運(yùn)行結(jié)果可以看出，設(shè)置了字?jǐn)?shù)限制后，自動(dòng)在編輯框右下角顯示最大字?jǐn)?shù)和當(dāng)前輸入字?jǐn)?shù)（隨著輸入情況實(shí)時(shí)變化），并且更改了顏色樣式

??屬性介紹

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