简介
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还可以根据自己的需求设置不一样的样式,显示的不一样的效果,设置具体的样式读者可以自己去实践探讨下。