Android中TextInputLayout 使用
首先添加依赖:
compile 'com.android.support:design:25.3.1'
- TextInputLayout继承了LinearLayout，包裹一个EditText。
.support.design.widget.TextInputLayout
android:id="@+id/til_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:errorEnabled="true">
"match_parent"
android:layout_height="wrap_content"
android:hint="请输入密码"
android:inputType="text"/>
.support.design.widget.TextInputLayout>下面我们就来看看TextInputLayout包裹EditText和单独使用EditText的区别:
很明显，TextInputLayout包裹EditText的方式展示效果更好。
- TextInputLayout包裹EditText布局如下:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:focusable="true"
android:focusableInTouchMode="true">
<android.support.design.widget.TextInputLayout
android:id="@+id/til_account"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:errorEnabled="true"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:hint="请输入账号"/>
android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/til_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:errorEnabled="true">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入密码"
android:inputType="textPassword"/>
android.support.design.widget.TextInputLayout>
LinearLayout>
- TextInputLayout 可用属性
app:errorEnabled 错误提示信息是否显示
app:errorTextAppearance 错误提示信息的字体样式
app:counterEnabled 是否使用计数功能
app:counterMaxLength 使用计数功能显示最大的长度
app:counterTextAppearance 在长度范围内字体样式
app:counterOverflowTextAppearance 超出最大长度后字体样式
app:hintEnabled 提示信息是否显示
app:hintAnimationEnabled 提示信息是否使用动画
app:hintTextAppearance 提示信息字体样式
app:passwordToggleEnabled 是否使用 密码显示、隐藏功能。
app:passwordToggleDrawable 设置控制密码显示或隐藏的图标- 错误提示和字数统计组合使用
.support.design.widget.TextInputLayout
android:id="@+id/til_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:errorEnabled="true"
app:errorTextAppearance="@style/ErrorStyle"
app:counterEnabled="true"
app:counterMaxLength="15"
app:counterTextAppearance="@style/NormalStyle"
app:counterOverflowTextAppearance="@style/OverflowStyle"
>
"match_parent"
android:layout_height="wrap_content"
android:hint="请输入密码"
android:inputType="textPassword"/>
.support.design.widget.TextInputLayout>style 如下：
<style name="NormalStyle" parent="TextAppearance.AppCompat.Small">
<item name="android:textColor">#00ff00item>
<item name="android:textSize">12spitem>
style>
<style name="OverflowStyle" parent="TextAppearance.AppCompat.Small">
<item name="android:textColor">#ff0000item>
<item name="android:textSize">12spitem>
style>
<style name="ErrorStyle" parent="TextAppearance.AppCompat.Small">
<item name="android:textColor">#ff0000item>
<item name="android:textSize">12spitem>
style>Activity 中对EditText进行监听:
public class EditTextActivity extends AppCompatActivity {
private EditText mEditTextPassword;
private TextInputLayout mTextInputLayoutPassword;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_edit_text);
//初始化控件
mTextInputLayoutPassword = (TextInputLayout) findViewById(R.id.til_password);
//获取EditText
mEditTextPassword = mTextInputLayoutPassword.getEditText();
//动态监听EditText变化
mEditTextPassword.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) {
String account = mEditTextPassword.getText().toString();
if (account.length() < 6){
mTextInputLayoutPassword.setError("密码长度不得小于6位");
} else if (account.length() >= 6 && account.length() <= 15) {
mTextInputLayoutPassword.setErrorEnabled(false);
}else if (account.length() > 15) {
mTextInputLayoutPassword.setError("密码长度不得大于15位");
}
}
@Override
public void afterTextChanged(Editable s) {
}
});
}
}通过监听输入的长度来动态改变错误提示信息。
TextInputLayout.setError()用来设置需要显示的错误提示。
如图所示，未获得焦点时 字数显示为绿色，未显示错误信息。获取焦点之后，错误信息提示为 密码长度不得小于6位 ；长度达到6位的时候错误提示消失。超过15位之后提示 密码长度不得大于15位 ，字数显示变为我们所设置的红色。
- 使用 app:passwordToggleEnabled功能
设置 app:passwordToggleEnabled=”true”
.support.design.widget.TextInputLayout
android:id="@+id/til_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:passwordToggleEnabled="true"
>
"match_parent"
android:layout_height="wrap_content"
android:hint="请输入密码"
android:inputType="textPassword"/>
.support.design.widget.TextInputLayout>
默认是隐藏密码的，点击按钮之后即可显示输入的数据。
app:passwordToggleDrawable 设置自己的图标。
由于需要两张图片，所以使用selector来实现。 创建 password_show_or_hide_selector.xml ，一张开眼，一张闭眼照片。
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/eye_open" android:state_checked="true">item>
<item android:drawable="@drawable/eye_close">item>
selector>布局中引用
app:passwordToggleDrawable="@drawable/password_show_or_hide_selector"运行后的效果
