簡介
TextInputLayout是Android5.0新增的android:support.design庫下的特色控制元件。
開發文件介紹：
Layout which wraps an EditText (or descendant) to show a floating label when the hint is hidden due to the user inputting text.
譯：TextInputLayout是包裹一個EditText，可以顯示浮動標籤的佈局。
即：TextInputLayout只能包含一個EditText控制元件，能夠根據使用者輸入來顯示浮動標籤，增加使用者體驗。TextInputLayout也是實現Google提出的MaterialDesign的一個重要特色控制元件。
使用
佈局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp"
tools:context="com.main.textinputlayout.TextInputLayoutActivity">
<android.support.design.widget.TextInputLayout
android:id="@+id/textinput_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true"
app:counterOverflowTextAppearance="@style/counterTextInputLayoutStyle"
app:counterTextAppearance="@style/counterTextInputLayoutStyle"
app:errorTextAppearance="@style/errorTextInputLayoutStyle"
app:hintTextAppearance="@style/textInputLayoutStyle"
app:hintAnimationEnabled="true">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:hint="請輸入使用者名稱"
android:padding="10dp"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true"
app:hintAnimationEnabled="true">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="請輸入密碼"/>
</android.support.design.widget.TextInputLayout>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="請確認密碼"/>
</LinearLayout>
複製程式碼這就是TextInputLayout在xml檔案佈局中使用，TextInputLayout包含一個EditText。 在TextInputLayout中指定了hint文字、輸入錯誤時的hint文字和是否支援提示動畫的樣式等等。
屬性介紹
app:errorEnabled：是否支援輸入錯誤時顯示提示，預設true
app:errorTextAppearance：指定輸入錯誤時顯示提示的文字的樣式。
app:counterOverflowTextAppearance：指定設定計算器越位後的文字的樣式
app:counterTextAppearance：指定計算器的文字的樣式
app:hintTextAppearance：指定hint文字的樣式
app:hintAnimationEnabled：是否支援hint文字動畫，預設true
關於更多的TextInputLayout屬性，可檢視開發文件。
設定的的樣式
<style name="textInputLayoutStyle">
<item name="android:textColor">#3F51B5</item>
<item name="android:textSize">20dp</item>
</style>
<style name="errorTextInputLayoutStyle">
<item name="android:textColor">#FF0000</item>
<item name="android:textSize">20dp</item>
</style>
<style name="counterTextInputLayoutStyle">
<item name="android:textColor">#FF4081</item>
<item name="android:textSize">20dp</item>
</style>
複製程式碼Activity中使用
public class TextInputLayoutActivity extends AppCompatActivity {
private TextInputLayout mInputLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_text_input_layout);
mInputLayout = (TextInputLayout) this.findViewById(R.id.textinput_layout);
//檢測長度應該低於6位數
mInputLayout.getEditText().addTextChangedListener(new MinLengthTextWatcher(mInputLayout, "長度應低於6位數!"));
//開啟計數
mInputLayout.setCounterEnabled(true);
//最大輸入限制數
mInputLayout.setCounterMaxLength(6);
}
private class MinLengthTextWatcher implements TextWatcher {
private String errorStr;
private TextInputLayout textInputLayout;
//注入
public MinLengthTextWatcher(TextInputLayout inputLayout, String s) {
this.textInputLayout = inputLayout;
this.errorStr = s;
}
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void afterTextChanged(Editable editable) {
// 文字改變後回撥
if (textInputLayout.getEditText().getText().toString().length() <= 6) {
textInputLayout.setErrorEnabled(false);
} else {
textInputLayout.setErrorEnabled(true);
//設定輸入錯誤時的提示文字
textInputLayout.setError(errorStr);
}
}
}
}
複製程式碼TextInputLayout在java程式碼中同樣可以設定其屬性，開發者根據需求動態改變其屬性。包括設定hint文字，error文字等等。
效果圖
TextInputLayout還可以根據自己的需求設定不一樣的樣式，顯示的不一樣的效果，設定具體的樣式讀者可以自己去實踐探討下。