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

Material Design之TextInputLayout使用示例的更多相关文章

  1. Material Design之TextInputLayout、Snackbar的使用

    这两个控件也是Google在2015 I/O大会上公布的Design Library包下的控件,使用比較简单,就放在一起讲了,但有的地方也是须要特别注意一下. TextInputLayout Text ...

  2. Material Design学习-----TextInputLayout

    TextInputLayout是为EditText提供了一种新的实现和交互方式.在传统的EditText中存在一个hint属性,是说在editext中没有内容时,默认的提示信息.当想edittext中 ...

  3. 用户登录(Material Design + Data-Binding + MVP架构模式)实现

    转载请注明出处: http://www.cnblogs.com/cnwutianhao/p/6772759.html MVP架构模式 大家都不陌生,Google 也给出过相应的参考 Sample, 但 ...

  4. Android Material Design控件学习(三)——使用TextInputLayout实现酷市场登录效果

    前言 前两次,我们学习了 Android Material Design控件学习(一)--TabLayout的用法 Android Material Design控件学习(二)--Navigation ...

  5. Android Material Design控件使用(二)——FloatButton TextInputEditText TextInputLayout 按钮和输入框

    FloatingActionButton 1. 使用FloatingActionButton的情形 FAB代表一个App或一个页面中最主要的操作,如果一个App的每个页面都有FAB,则通常表示该App ...

  6. Material Design (二),TextInputLayout的使用

    前言  一般登录注冊界面都须要EditText这个控件来让用户输入信息,同一时候我们通常会设置一个标签(使用TextView)和EditText的hint属性来提示用户输入的内容,而设计库中高级组件T ...

  7. Android Material Design 兼容库的使用

    Android Material Design 兼容库的使用 mecury 前言:近来学习了Android Material Design 兼容库,为了把这个弄懂,才有了这篇博客,这里先推荐两篇博客: ...

  8. Android Material Design(一)史上最全的材料设计控件大全

    主要内容: 本文将要介绍Material design和Support library控件,主要包括TextInputLayout.SwitchCompat.SnackBar.FloatingActi ...

  9. 再不迁移到Material Design Components 就out啦

    翻译自国外文档加自己理解 原文 我们最近宣布了 Material Design Components(MDC)1.1.0 ,这是一个库更新,为您的 Android 应用程序带来了 Material T ...

随机推荐

  1. jQuery文字特效制作文字鼠标滑过多彩色变色显示

    <!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/ht ...

  2. 添加office权限时找不到ofice,com组件的方法

    1.执行 mmc.exe,文件->添加/删除管理单元->可用的管理单元,中选择组件服务->添加->所选单元格 2. 执行dcomcnfg.exe -32,用于64的操作系统

  3. 从出租车司机到大BOSS的转型之路

    来深圳之前,曾有人这样告诉我:在深圳千万不能以貌取人,打扮不起眼,也许他转身开的座驾就是宝马.奔驰;不管一个人多么邋遢俗气,也别瞧不起人家,也许他的手提袋里就是成捆的人民币现金;不管一个人打扮的多么土 ...

  4. FRM-40831 出现截断

    此问题还有一种情况: 在form搜索界面使用时间范围搜索时遇到的 当在PRE-QUERY中调用如下查询时,如果CUX_SUM.PERIOD_NAME的字段长度要设置的长一些,个人建议是前面2个字段的2 ...

  5. vs extension

    优先级高低

  6. swift 实现复制粘贴功能。

    let past = UIPasteboard.generalPasteboard() past.string = pasteboardStr // pasteboardStr就是你要复制的字符串 S ...

  7. Less 使用指南

    简而言之 Less是为了简化css http://less.bootcss.com/features/ 以上链接是Less中文网站,里面有对Less的详细介绍. 一下写在使用中遇到的问题: 1.下载L ...

  8. 在Tomat7上使用Redis保存Session

    源博客http://my.oschina.net/gccr/blog/321083 当用户量大.应用服务器使用集群来布署时,使用Tomcat默认自带的Session就不能满足需求了.当然解决方法有很多 ...

  9. c语言头文件中定义全局变量的问题

    c语言头文件中定义全局变量的问题 (转http://www.cnblogs.com/Sorean/) 先说一下,全局变量只能定义在 函数里面,任意函数,其他函数在使用的时候用extern声明.千万不要 ...

  10. ACID

    ACID:数据库事务正确执行的四个基本要素的缩写. ACID,指数据库事务正确执行的四个基本要素的缩写. 包含:原子性(Atomicity) 一致性(Consistency) 隔离性(Isolatio ...