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'
}
布局文件:
<?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">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/usernameWrapper"
android:layout_marginTop="32dp"
android:focusable="true"
android:focusableInTouchMode="true">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:hint="请输入账号"
android:ems="10"
android:id="@+id/username" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/passwordWrapper">
<EditText
android:inputType="textPassword"
android:id="@+id/password"
android:hint="请输入密码"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>
<Button
android:onClick="login"
android:layout_marginTop="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="登录"
android:id="@+id/login"
android:textColor="#009999"/>
</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();
}
全部代码:
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的颜色。
2016.7.9:
之前说的不能讲错误的提示去除掉么,今天又试了下,这个就能将错误提示不显示 !oh~
TextInputLayout.setErrorEnabled(false);
但是!!后面在设置setErrorEnabled(true)后,不会居然显示红色的错误提示。。此处有bug,慎用。