TextInputLayout是22.2.0新添加的控件, 要和EditText(或EditText的子类)结合使用,并且只能包含一个EditText(或EditText的子类)。
TextInputLayout继承关系如下:
java.lang.Object
↳ android.view.View
↳ android.view.ViewGroup
↳ android.widget.LinearLayout
↳ android.support.design.widget.TextInputLayout
TextInputLayout基本用法
- 首先要引入design和appcompat-v7兼容包:
compile 'com.android.support:design:25.2.0'
compile 'com.android.support:appcompat-v7:25.2.0'
- 在布局文件添加如下代码
<android.support.design.widget.TextInputLayout
android:id="@+id/til_account"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/pd_10">
<EditText
android:id="@+id/et_account"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/form_username"/>
</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="@dimen/pd_10">
<android.support.design.widget.TextInputEditText
android:id="@+id/tiet_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/form_password"
android:inputType="textPassword"/>
</android.support.design.widget.TextInputLayout>
一般情况下,EditText获得光标的时候hint会自动隐藏,这样不是很友好。这时候TextInputLayout就派上用场了,TextInputLayout是LinearLayout的子类,用于辅助显示提示信息。当EditText获取得光标的时候,EditText的hint会自己显示在上方,并且有动画过渡。
TextInputLayout错误提示
TextInputLayout还可以处理错误并给出相应提示,比如在上面的其他上我们添加一个登录按钮,点击登录按钮的时候要验证密码长度为6-18个字符。
- 首先在布局上添加一个登录按钮:
<Button
android:id="@+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/pd_10"
android:layout_margin="@dimen/pd_10"
android:text="@string/login"/>
- 添加一个显示错误提示并获取焦点的方法:
/**
* 显示错误提示,并获取焦点
* @param textInputLayout
* @param error
*/
private void showError(TextInputLayout textInputLayout,String error){
textInputLayout.setError(error);
textInputLayout.getEditText().setFocusable(true);
textInputLayout.getEditText().setFocusableInTouchMode(true);
textInputLayout.getEditText().requestFocus();
}
- 添加验证用户名和密码方法:
/**
* 验证用户名
* @param account
* @return
*/
private boolean validateAccount(String account){
if(StringUtils.isEmpty(account)){
showError(til_account,"用户名不能为空");
return false;
}
return true;
}
/**
* 验证密码
* @param password
* @return
*/
private boolean validatePassword(String password) {
if (StringUtils.isEmpty(password)) {
showError(til_password,"密码不能为空");
return false;
}
if (password.length() < 6 || password.length() > 18) {
showError(til_password,"密码长度为6-18位");
return false;
}
return true;
}
- 给登录按钮设置点击事件,在触发点击事件的时候获取用户名和密码,并验证用户名和密码格式:
private Button btn_login;
private TextInputLayout til_account;
private TextInputLayout til_password;
btn_login = (Button) findViewById(R.id.btn_login);
btn_login.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String account = til_account.getEditText().getText().toString();
String password = til_password.getEditText().getText().toString();
til_account.setErrorEnabled(false);
til_password.setErrorEnabled(false);
//验证用户名和密码
if(validateAccount(account)&&validatePassword(password)){
Toast.makeText(TextInputLayoutActivity.this,"登录成功",Toast.LENGTH_LONG).show();
}
}
});
这个示例简单判断了用户名非空和密码非空和长度判断,并给出相应提示。
TextInputEditText
TextInputEditText继承关系如下:
java.lang.Object
↳ android.view.View
↳ android.widget.TextView
↳ android.widget.EditText
↳ android.support.v7.widget.AppCompatEditText
↳ android.support.design.widget.TextInputEditText
由继承关系可以看出TextInputEditText是EditText的一个子类。上面的例子中,你会看到用户输入控件使用的是的EditText,而密码输入控件则使用了TextInputEditText,这里是为了对比一下两者的区别。
官方文档是这样描述的:
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设计的一个子容器。输入法在'extract'模式的时候,使用TextInputEditText类允许显示提示。
还是上面的例子,我们把手机设置为横向,再看一下效果:
可以看到输入的时候都变成了全屏模式,用户名使用EidtText的时候hint就隐藏了,而密码使用TextInputEditText的时候hint可以正常显示。
由此可见TextInputEditText的设计就是修复了这个缺陷,所以TextInputLayout和TextInputEditText配合使用的效果最好!
示例托管在:GitHub