寫在前面
更多Material Design 文章請(qǐng)看：
Material Design 之 Toolbar 開發(fā)實(shí)踐總結(jié)
Material Design之 AppbarLayout 開發(fā)實(shí)踐總結(jié)
Material Design 之 Behavior的使用和自定義Behavior
Material Design 之 TabLayout 使用
文本框相信大家都很熟悉，文本框可以讓用戶輸入文本。它們可以是單行的，帶或不帶滾動(dòng)條，也可以是多行的，并且?guī)в幸粋€(gè)圖標(biāo)。點(diǎn)擊文本框后顯示光標(biāo)，并自動(dòng)顯示鍵盤。除了輸入，文本框可以進(jìn)行其他任務(wù)操作，如文本選擇（剪切，復(fù)制，粘貼）以及數(shù)據(jù)的自動(dòng)查找功能。這篇文章講的就是Material Design 風(fēng)格的文本框，它有有一些比較炫酷的動(dòng)畫效果（比如輸入的時(shí)候，內(nèi)嵌標(biāo)簽會(huì)浮動(dòng)到內(nèi)容的上方），此外還給我一些特別有用的功能，如錯(cuò)誤提示、計(jì)數(shù)等等。Material Design 風(fēng)格的文本框是用TextInputLayout 和TextInputEditText 兩個(gè)View來實(shí)現(xiàn)的，該類support design 包中。下面就來看一下TextInputLayout 的具體用法。
TextInputLayout 使用
TextInputLayout介紹
首先來看一下TextInputLayout，TextInputLayout 是EditText(或者EditText子類)的一個(gè)包裝類，它主要用于在用戶輸入文本的時(shí)候顯示一個(gè)浮動(dòng)標(biāo)簽，也支持顯示錯(cuò)誤信息和字符計(jì)數(shù)等功能。同樣它也支持密碼可見切換按鈕，通過setPasswordVisibilityToggleEnabled(boolean)API 或者 xml 中的屬性，如果設(shè)置該屬性為可用（enable）,那么當(dāng)EditText 顯示設(shè)置的密碼時(shí)，會(huì)顯示一個(gè)切換密碼可見和隱藏的按鈕。
注意：當(dāng)使用密碼切換按鈕的時(shí)候，EditText 結(jié)束位置的 圖標(biāo)時(shí)會(huì)被覆蓋的，為了保證EditText 結(jié)束位置Drawable的正常顯示，你需要設(shè)置這些Drawables 的相對(duì)位置（ 相對(duì)start的位置／相對(duì)結(jié)束的位置）。
圖標(biāo)覆蓋，如下圖：
如上圖所示，切換密碼可見的按鈕（眼睛圖標(biāo)）和錯(cuò)誤提示的圖標(biāo) 覆蓋在一起了。
TextInputLayout 重要方法和屬性
來看一下TextInputLayout 的一些重要方法和屬性：
app:counterEnabled 字符計(jì)數(shù)是否可用
代碼中對(duì)應(yīng)的方法為：setCounterEnabled（boolean）app:counterMaxLength 計(jì)數(shù)最大的長(zhǎng)度
代碼中對(duì)應(yīng)的方法為：setCounterMaxLength（int ）app:counterOverflowTextAppearance 計(jì)數(shù)超過最大長(zhǎng)度時(shí)顯示的文本樣式
app:counterTextAppearance 顯示的計(jì)數(shù)的文本樣式。
app:errorEnabled 顯示錯(cuò)誤信息是否可用
app:errorTextAppearance 顯示錯(cuò)誤信息的文本樣式
android:hint 浮動(dòng)標(biāo)簽
代碼對(duì)應(yīng)方法：setHint(CharSequence)app:hintAnimationEnabled 控制是否需要浮動(dòng)標(biāo)簽的動(dòng)畫
代碼對(duì)應(yīng)方法：setHintAnimationEnabled(boolean)app:hintEnabled 控制是否顯示浮動(dòng)標(biāo)簽
代碼對(duì)應(yīng)方法：setHintEnabled(boolean)app:hintTextAppearance 浮動(dòng)標(biāo)簽的文本樣式
代碼對(duì)應(yīng)方法：setHintTextAppearance(int)app:passwordToggleDrawable 密碼可見切換圖標(biāo)
代碼對(duì)應(yīng)方法：setPasswordVisibilityToggleDrawable(int)或者setPasswordVisibilityToggleDrawable(Drawable)app:passwordToggleEnabled 控制是否顯示密碼可見切換圖標(biāo)
代碼對(duì)應(yīng)方法：setPasswordVisibilityToggleEnabled(boolean)
TextInputLayout 使用示例
了解了以上的屬性和方法后，我們看一下具體使用：
1，帶浮動(dòng)標(biāo)簽的文本框
代碼如下：
/>
<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="手機(jī)號(hào)碼"
android:inputType="number"
android:textColor="@color/black"
/>
</android.support.design.widget.TextInputLayout>
效果如下：
2,帶字符計(jì)數(shù)的文本框
布局：
<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="手機(jī)號(hào)碼"
android:inputType="number"
android:textColor="@color/black"
/>
</android.support.design.widget.TextInputLayout>
在Activity 中設(shè)置，計(jì)數(shù)的長(zhǎng)度：
mTextInputLayoutUser = (TextInputLayout) findViewById(R.id.text_input_layout_user);
//設(shè)置可以計(jì)數(shù)
mTextInputLayoutUser.setCounterEnabled(true);
//計(jì)數(shù)的最大值
mTextInputLayoutUser.setCounterMaxLength(20);
效果如下：
如上圖所示，右下角會(huì)自動(dòng)計(jì)數(shù)，當(dāng)超過最大值時(shí)，計(jì)數(shù)文本、浮動(dòng)標(biāo)簽和下標(biāo)線都變成了紅色，然后我們也可以用上面介紹的屬性來更改：
添加代碼
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>
效果如下：
如上圖，將顯示的顏色改為了綠色，當(dāng)然也可以在style中改字體的大小，在添加一個(gè)item 就行
<item name="android:textSize">20sp</item>
** 更改計(jì)數(shù)文本的顯示樣式是一樣的，定義一個(gè)style ,然后通過app:counterTextAppearance 設(shè)置就行。**
** 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>
效果如下：
如上圖，可以看到，右邊多了一個(gè)圖標(biāo)，點(diǎn)擊圖標(biāo)可以使密碼是明文或者隱藏。只是在布局文件中添加了幾個(gè)屬性
app:passwordToggleEnabled="true"
app:passwordToggleTint="@color/colorHint"
app:passwordToggleDrawable="@drawable/ic_eye_grey_24dp"
當(dāng)然了，也可依在代碼中設(shè)置，一樣的效果，不在演示。
4, 顯示錯(cuò)誤信息
TextInputLayout 是可以顯示錯(cuò)誤信息的，這種需求很常見沒，比如登錄的時(shí)候密碼錯(cuò)誤，給出相應(yīng)的提示，比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("密碼錯(cuò)誤不能少于6個(gè)字符");
}
}
});
效果如下：
當(dāng)密碼不正確的時(shí)候，顯示錯(cuò)誤提示，當(dāng)內(nèi)容發(fā)生變幻的時(shí)候，記得調(diào)用
mTextInputLayoutPassword.setErrorEnabled(false);
否則錯(cuò)誤信息會(huì)一直顯示界面上。
** 當(dāng)然有些時(shí)候我們不需要浮動(dòng)標(biāo)簽，或者不需要浮動(dòng)標(biāo)簽的動(dòng)畫，我們可以控制，將對(duì)應(yīng)屬性設(shè)置為false就行了。**
TextInputEditText 使用
上面講了TextInputLayout的使用，那么TextInputEditText是干什么的呢？ 其實(shí)就是一個(gè)EditText 的子類，上面講的所有功能，TextInputLayout 里面包的子View既可以是EditText,也可以是TextInputEditText，效果是一樣的。根據(jù)文檔的解釋，官網(wǎng)原文：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｀模式（提取模式）下顯示浮動(dòng)標(biāo)簽。
也看過一些文章說，橫屏模式EditText 不顯示浮動(dòng)標(biāo)簽，TextInputEditText 會(huì)顯示浮動(dòng)標(biāo)簽，但是我測(cè)試了一下，并沒有發(fā)現(xiàn)所說的EditText 不顯示浮動(dòng)標(biāo)簽，TextInputEditText 會(huì)顯示浮動(dòng)標(biāo)簽。如果有知道的，請(qǐng)?jiān)谠u(píng)論區(qū)告知一下。,測(cè)試效果如下：（上看兩個(gè)是EditText,最后一個(gè)是TextInputEditText）
** TextInputEditText 、EditText 作為TextInputLayout 的子View使用差別很小，既然Google 說在extract 模式下TextInputEditText 更好，那我們開發(fā)中使用TextInputEditText配合TextInputLayout使用就好了。**
另外，上面講了TextInputLayout 可以顯示錯(cuò)誤信息，TextInputEditText也是可以顯示錯(cuò)誤信息的，用下面兩個(gè)方法：
mInputEditTextUser.setError("格式不正確");
//或者
mInputEditTextUser.setError("格式不正確",getDrawable(R.drawable.activity_close));
最后
以上就是TextInputLayout和TextInputEditText 的全部?jī)?nèi)容，Demo 請(qǐng)戳MaterialDesignSamples。元旦之前來一發(fā)，祝大家元旦快樂??！
