Android进阶UI之使用TextInputLayout创建一个登陆界面

在Google I/O 2015期间，安卓团队发布了一个崭新的兼容库，Design Support Library。它简直就是为解决这个问题而生的。本教程将演示如何使用Design Support Library中的TextInputLayout控件。

1 实现 TextInputLayout

1.1 创建一个新的项目

在Android Studio中 选择New > New project 。

1.2 导入Support Library

要使用TextInputLayout控件，你需要导入两个Library。第一个是appcompat-v7,它确保material style可以向后兼容。第二个是Design Support Library。在你的build.gradle文件中，添加如下依赖：

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])

compile 'com.android.support:design:22.2.0'
compile 'com.android.support:appcompat-v7:22.2.0'
}

1.3 设计用户界面

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<include layout="@layout/include_toolbar" />

<android.support.design.widget.TextInputLayout
android:id="@+id/edit_text_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hint_username"
android:inputType="textEmailAddress" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
android:id="@+id/edit_text_password"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hint_password"
android:inputType="textEmailAddress" />

</android.support.design.widget.TextInputLayout>

<Button
android:id="@+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_login" />
</LinearLayout>

1.4 设置 Hints

final TextInputLayout usernameWrapper = (TextInputLayout) findViewById(R.id.edit_text_email);
final TextInputLayout passwordWrapper = passwordWrapper = (TextInputLayout) findViewById(R.id.edit_text_password);

//设置一个hint
usernameWrapper.setHint("Username");
passwordWrapper.setHint("Password");

2 处理错误

TextInputLayout的另一个特色是它可以处理错误。

2.1 实现 onClick 方法

btnLogin = (Button) findViewById(R.id.btnLogin);
//登录验证
btnLogin.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
hideKeyboard();//隐藏键盘
//TextInputLayout只是一个容器，但是和LinearLayout和ScrollView不同，你可以使用一个特殊的方法获得子元素getEditText，不需要使用findViewById
String username = usernameWrapper.getEditText().getText().toString();
String password = passwordWrapper.getEditText().getText().toString();

if (!validateEmail(username)) {
usernameWrapper.setError("Not a valid email address!");
} else if (!validatePassword(password)) {
passwordWrapper.setError("Not a valid password!");
} else {
usernameWrapper.setErrorEnabled(false);
passwordWrapper.setErrorEnabled(false);
doLogin();
}
}
});
/**
* 隐藏键盘
*/
private void hideKeyboard() {
View view = getCurrentFocus();
if (view != null) {
((InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE)).
hideSoftInputFromWindow(view.getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);
}
}

2.2 验证方法

/**
* 检验用户名（邮箱）
*/
public boolean validateEmail(String email) {
matcher = pattern.matcher(email);
return matcher.matches();
}

/**
* 检验密码
*/
public boolean validatePassword(String password) {
return password.length() > 5;
}

/**
* 登录操作
*/
public void doLogin() {
Toast.makeText(getApplicationContext(), "OK! I'm performing login.", Toast.LENGTH_SHORT).show();
}

2.3 显示错误

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

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

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

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

2.4 样式

改变TextInputLayout控件的颜色，默认AppCompact会把它设置成绿色的。

//在 style.xml 中指定。打开它添加colorAccent 到主题以改变表单的颜色。

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

3 总结

本教程中，我们看到了如何实现新的布局元素TextInputLayout，多亏有了刚刚引入的Design Support Library。