Material Design之TextInputLayout使用示例

Google在2015的IO大会上，给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了全新的Android Design Support Library，在这个support库里面，Google给我们提供了更加规范的MD设计风格的控件。最重要的是，Android Design Support Library的兼容性更广，直接可以向下兼容到Android 2.2。这不得不说是一个良心之作。

效果图：

在项目的build.gradle文件中，添加下面的依赖(dependencies)，并同步工程。

dependencies {
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:design:23.1.0'
}

dependencies {
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:design:23.1.0'
}

布局文件：

<?xml version="1.0" encoding="utf-8"?>  
2.<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.              android:layout_width="match_parent"  
4.              android:layout_height="match_parent"  
5.              android:orientation="vertical">  
6.  
7.    <android.support.design.widget.TextInputLayout  
8.        android:layout_width="match_parent"  
9.        android:layout_height="wrap_content"  
10.        android:id="@+id/usernameWrapper"  
11.        android:layout_marginTop="32dp"  
12.        android:focusable="true"  
13.        android:focusableInTouchMode="true">  
14.        <EditText  
15.            android:layout_width="match_parent"  
16.            android:layout_height="wrap_content"  
17.            android:inputType="textEmailAddress"  
18.            android:hint="请输入账号"  
19.            android:ems="10"  
20.            android:id="@+id/username" />  
21.    </android.support.design.widget.TextInputLayout>  
22.  
23.  
24.    <android.support.design.widget.TextInputLayout  
25.        android:layout_width="match_parent"  
26.        android:layout_height="wrap_content"  
27.        android:id="@+id/passwordWrapper">  
28.        <EditText  
29.            android:inputType="textPassword"  
30.            android:id="@+id/password"  
31.            android:hint="请输入密码"  
32.            android:layout_width="match_parent"  
33.            android:layout_height="wrap_content"/>  
34.    </android.support.design.widget.TextInputLayout>  
35.  
36.    <Button  
37.        android:onClick="login"  
38.        android:layout_marginTop="16dp"  
39.        android:layout_width="match_parent"  
40.        android:layout_height="wrap_content"  
41.        android:layout_gravity="right"  
42.        android:text="登录"  
43.        android:id="@+id/login"  
44.        android:textColor="#009999"/>  
45.</LinearLayout>

如果布局这样设置了，运行起来没有动画效果的话，那么需要在Activity中初始化了，我是没有遇到过这个问题。

TextInputLayout另一个很赞的功能是，可以处理错误情况。通过验证用户输入，你可以防止用户输入错误的邮箱，或者输入不符合规则的密码。 
有些输入验证，验证是在后台做得，产生错误后会反馈给前台，最后展示给用户。非常耗时而且用户体验差。最好的办法是在请求后台前做校验。

假设是验证邮箱账号，验证邮箱稍微有些复杂，我们可以用Apache Commons library 来做这个事。我这里用一个维基百科里的正则表达式。

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;

//判断账号的格式，这里是邮箱的格式
public boolean validateEmail(String email) {
    matcher = pattern.matcher(email);
    return matcher.matches();
}

 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;

    //判断账号的格式，这里是邮箱的格式
    public boolean validateEmail(String email) {
        matcher = pattern.matcher(email);
        return matcher.matches();
    }

全部代码：

[java] view plain copy

 

print?

package com.zhangli.mylayout;  
2.  
3.import android.content.Context;  
4.import android.os.Bundle;  
5.import android.support.design.widget.TextInputLayout;  
6.import android.support.v7.app.AppCompatActivity;  
7.import android.view.View;  
8.import android.view.inputmethod.InputMethodManager;  
9.import android.widget.Toast;  
10.  
11.import java.util.regex.Matcher;  
12.import java.util.regex.Pattern;  
13.  
14.public class MainActivity extends AppCompatActivity  {  
15.  
16.    private TextInputLayout usernameWrapper;  
17.    private TextInputLayout passwordWrapper;  
18.  
19.    @Override  
20.    protected void onCreate(Bundle savedInstanceState) {  
21.        super.onCreate(savedInstanceState);  
22.        setContentView(R.layout.activity_main);  
23.  
24.        usernameWrapper= (TextInputLayout) findViewById(R.id.usernameWrapper);  
25.        passwordWrapper= (TextInputLayout) findViewById(R.id.passwordWrapper);  
26.  
27.    }  
28.  
29.    public void login(View v){  
30.        hideKeyboard();  
31.        String username = usernameWrapper.getEditText().getText().toString();  
32.        String password = passwordWrapper.getEditText().getText().toString();  
33.  
34.        if (!validateEmail(username)) {  
35.            usernameWrapper.setError("账号格式不正确");  
36.        }else if (!validatePassword(password)) {  
37.            passwordWrapper.setError("密码不能小于6位数");  
38.        }else{  
39.            doLogin();  
40.        }  
41.    }  
42.  
43.    //让键盘弹回去  
44.    private void hideKeyboard() {  
45.        View view = getCurrentFocus();  
46.        if (view != null) {  
47.            ((InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE)).  
48.                    hideSoftInputFromWindow(view.getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);  
49.        }  
50.    }  
51.  
52.    private static final String EMAIL_PATTERN = "^[a-zA-Z0-9#_~!$&‘()*+,;=:."(),:;<>@\[\]\\]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*$";  
53.    private Pattern pattern = Pattern.compile(EMAIL_PATTERN);  
54.    private Matcher matcher;  
55.  
56.    //判断账号的格式，这里是邮箱的格式  
57.    public boolean validateEmail(String email) {  
58.        matcher = pattern.matcher(email);  
59.        return matcher.matches();  
60.    }  
61.  
62.    //密码长度要大于5  
63.    public boolean validatePassword(String password) {  
64.        return password.getBytes().length>5;  
65.    }  
66.  
67.    public void doLogin() {  
68.        Toast.makeText(getApplicationContext(), "登陆成功", Toast.LENGTH_SHORT).show();  
69.    }  
70.}  
package com.zhangli.mylayout;

import android.content.Context;
import android.os.Bundle;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.inputmethod.InputMethodManager;
import android.widget.Toast;

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

public class MainActivity extends AppCompatActivity  {

    private TextInputLayout usernameWrapper;
    private TextInputLayout passwordWrapper;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        usernameWrapper= (TextInputLayout) findViewById(R.id.usernameWrapper);
        passwordWrapper= (TextInputLayout) findViewById(R.id.passwordWrapper);

    }

    public void login(View v){
        hideKeyboard();
        String username = usernameWrapper.getEditText().getText().toString();
        String password = passwordWrapper.getEditText().getText().toString();

        if (!validateEmail(username)) {
            usernameWrapper.setError("账号格式不正确");
        }else if (!validatePassword(password)) {
            passwordWrapper.setError("密码不能小于6位数");
        }else{
            doLogin();
        }
    }

    //让键盘弹回去
    private void hideKeyboard() {
        View view = getCurrentFocus();
        if (view != null) {
            ((InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE)).
                    hideSoftInputFromWindow(view.getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);
        }
    }

    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;

    //判断账号的格式，这里是邮箱的格式
    public boolean validateEmail(String email) {
        matcher = pattern.matcher(email);
        return matcher.matches();
    }

    //密码长度要大于5
    public boolean validatePassword(String password) {
        return password.getBytes().length>5;
    }

    public void doLogin() {
        Toast.makeText(getApplicationContext(), "登陆成功", Toast.LENGTH_SHORT).show();
    }
}

提示错误的方式还是很nice的，就是还没解决将错误提示清除的方法，传进null也不行，会报错，还请大神解答。hint的color在editText里设置不了，这里只用通过设置activity的style中的textColorHint来更改hint的颜色。