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();
}
全部代码:
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使用示例的更多相关文章
- Material Design之TextInputLayout、Snackbar的使用
这两个控件也是Google在2015 I/O大会上公布的Design Library包下的控件,使用比較简单,就放在一起讲了,但有的地方也是须要特别注意一下. TextInputLayout Text ...
- Material Design学习-----TextInputLayout
TextInputLayout是为EditText提供了一种新的实现和交互方式.在传统的EditText中存在一个hint属性,是说在editext中没有内容时,默认的提示信息.当想edittext中 ...
- 用户登录(Material Design + Data-Binding + MVP架构模式)实现
转载请注明出处: http://www.cnblogs.com/cnwutianhao/p/6772759.html MVP架构模式 大家都不陌生,Google 也给出过相应的参考 Sample, 但 ...
- Android Material Design控件学习(三)——使用TextInputLayout实现酷市场登录效果
前言 前两次,我们学习了 Android Material Design控件学习(一)--TabLayout的用法 Android Material Design控件学习(二)--Navigation ...
- Android Material Design控件使用(二)——FloatButton TextInputEditText TextInputLayout 按钮和输入框
FloatingActionButton 1. 使用FloatingActionButton的情形 FAB代表一个App或一个页面中最主要的操作,如果一个App的每个页面都有FAB,则通常表示该App ...
- Material Design (二),TextInputLayout的使用
前言 一般登录注冊界面都须要EditText这个控件来让用户输入信息,同一时候我们通常会设置一个标签(使用TextView)和EditText的hint属性来提示用户输入的内容,而设计库中高级组件T ...
- Android Material Design 兼容库的使用
Android Material Design 兼容库的使用 mecury 前言:近来学习了Android Material Design 兼容库,为了把这个弄懂,才有了这篇博客,这里先推荐两篇博客: ...
- Android Material Design(一)史上最全的材料设计控件大全
主要内容: 本文将要介绍Material design和Support library控件,主要包括TextInputLayout.SwitchCompat.SnackBar.FloatingActi ...
- 再不迁移到Material Design Components 就out啦
翻译自国外文档加自己理解 原文 我们最近宣布了 Material Design Components(MDC)1.1.0 ,这是一个库更新,为您的 Android 应用程序带来了 Material T ...
随机推荐
- jQuery文字特效制作文字鼠标滑过多彩色变色显示
<!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/ht ...
- 添加office权限时找不到ofice,com组件的方法
1.执行 mmc.exe,文件->添加/删除管理单元->可用的管理单元,中选择组件服务->添加->所选单元格 2. 执行dcomcnfg.exe -32,用于64的操作系统
- 从出租车司机到大BOSS的转型之路
来深圳之前,曾有人这样告诉我:在深圳千万不能以貌取人,打扮不起眼,也许他转身开的座驾就是宝马.奔驰;不管一个人多么邋遢俗气,也别瞧不起人家,也许他的手提袋里就是成捆的人民币现金;不管一个人打扮的多么土 ...
- FRM-40831 出现截断
此问题还有一种情况: 在form搜索界面使用时间范围搜索时遇到的 当在PRE-QUERY中调用如下查询时,如果CUX_SUM.PERIOD_NAME的字段长度要设置的长一些,个人建议是前面2个字段的2 ...
- vs extension
优先级高低
- swift 实现复制粘贴功能。
let past = UIPasteboard.generalPasteboard() past.string = pasteboardStr // pasteboardStr就是你要复制的字符串 S ...
- Less 使用指南
简而言之 Less是为了简化css http://less.bootcss.com/features/ 以上链接是Less中文网站,里面有对Less的详细介绍. 一下写在使用中遇到的问题: 1.下载L ...
- 在Tomat7上使用Redis保存Session
源博客http://my.oschina.net/gccr/blog/321083 当用户量大.应用服务器使用集群来布署时,使用Tomcat默认自带的Session就不能满足需求了.当然解决方法有很多 ...
- c语言头文件中定义全局变量的问题
c语言头文件中定义全局变量的问题 (转http://www.cnblogs.com/Sorean/) 先说一下,全局变量只能定义在 函数里面,任意函数,其他函数在使用的时候用extern声明.千万不要 ...
- ACID
ACID:数据库事务正确执行的四个基本要素的缩写. ACID,指数据库事务正确执行的四个基本要素的缩写. 包含:原子性(Atomicity) 一致性(Consistency) 隔离性(Isolatio ...