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)，并同步工程。

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

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

布局文件：

1. <?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 来做这个事。我这里用一个维基百科里的正则表达式。

1. private static final String EMAIL_PATTERN = "^[a-zA-Z0-9#_~!$&‘()*+,;=:.\"(),:;<>@\\[\\]\\\\]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*$";
2. private Pattern pattern = Pattern.compile(EMAIL_PATTERN);
3. private Matcher matcher;
4. //判断账号的格式，这里是邮箱的格式
5. public boolean validateEmail(String email) {
6. matcher = pattern.matcher(email);
7. return matcher.matches();
8. }

  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();
     }

全部代码：

 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的颜色。