Android Design Support Library - TextInputLayout使用

基本使用

通常，单独的EditText会在用户输入第一个字母之后隐藏hint提示信息，但是现在你可以使用TextInputLayout 来将EditText封装起来，提示信息会变成一个显示在EditText之上的floating label，这样用户就始终知道他们现在输入的是什么。同时，如果给EditText增加监听，还可以给它增加更多的floating label。
下面是一个基本布局示例

<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="输入文字" />
</android.support.design.widget.TextInputLayout>

有了TextInputLayout，一个单一的EditText 在输入文字的时候会隐藏hint，而被包含在TextInputLayout中的EditText则会让hint变成一个在EditText上方的浮动标签。同时还包括一个漂亮的material动画。

处理错误

TextInputLayout的错误处理简单快速。需要的方法是setErrorEnabled和setError。

setError设置一个红色的错误消息，显示在EditText的下面。如果传入的参数为null，错误消息将清空。并且它会改变整个EditText控件为红色。

setErrorEnabled开启错误提醒功能。这直接影响到布局的大小，增加底部padding为错误标签让出空间。在setError设置错误消息之前开启这个功能意味着在显示错误的时候布局不会变化。你可以把这两个方法结合起来验证下我所说的。

另一个有趣的事实是如果错误功能未开启但是你调用了传入非null参数的setError，那么setErrorEnabled(true)将自动被调用。

样式

改变TextInputLayout控件的颜色。默认AppCompact会把它设置成绿色的，但是很有可能这个颜色会和你的颜色主题（color palette）冲突。
谷歌把Design Support Library写的很好。每一个控件的颜色都是直接通过主题颜色绘制的，在 style.xml 中指定。打开它添加colorAccent 到主题以改变表单的颜色。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorAccent">#3498db</item>
</style>

符：登录样例

package cn.yshye.jsonye.design;

import android.os.Bundle;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.text.TextUtils;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AutoCompleteTextView;
import android.widget.Button;
import android.widget.EditText;

import java.util.regex.Matcher;
import java.util.regex.Pattern;

import cn.yshye.jsonye.R;

import static cn.yshye.jsonye.R.id.email;

/**
* 登录验证，TextInputLayout的使用
*/
public class LoginActivity extends AppCompatActivity {

private AutoCompleteTextView mEmailView;
private EditText mPasswordView;
TextInputLayout tilEmail, tilPassWord;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
mEmailView = (AutoCompleteTextView) findViewById(email);
mPasswordView = (EditText) findViewById(R.id.password);
tilEmail = (TextInputLayout) findViewById(R.id.til_email);
tilPassWord = (TextInputLayout) findViewById(R.id.til_password);

Button mEmailSignInButton = (Button) findViewById(R.id.email_sign_in_button);
mEmailSignInButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
attemptLogin();
}
});

}

/**
* 登录
*/
private void attemptLogin() {

// 清空错误消息
tilEmail.setError(null);
tilPassWord.setError(null);

// 获取邮箱和密码
String email = mEmailView.getText().toString();
String password = mPasswordView.getText().toString();
// 判断邮箱是否正确
if (TextUtils.isEmpty(email)) {
tilEmail.setError("邮箱不能为空");
} else if (!isEmailValid(email)) {
tilEmail.setError("邮箱格式不对");
}

// 判断密码是否合法
if (TextUtils.isEmpty(password)){
tilEmail.setError("密码不能为空");
}else if(!isPasswordValid(password)) {
tilPassWord.setError("密码长度小于6位");
}
}

// Wikipedia 上关于邮箱验证的指导
private static final String EMAIL_PATTERN = "^[a-zA-Z0-9#_~!$&'()*+,;=:.\"(),:;<>@\\[\\]\\\\]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*$";
private Pattern pattern = Pattern.compile(EMAIL_PATTERN);
private Matcher matcher;

/**
* 邮箱格式是否正确
*
* @param email
* @return
*/
private boolean isEmailValid(String email) {
matcher = pattern.matcher(email);
return matcher.matches();
}

/**
* 密码长度不得小于6位
* @param password
* @return
*/
private boolean isPasswordValid(String password) {
return password.length() > 5;
}

}

效果图