前言
前两次,我们学习了
今天我们继续MD控件的学习和使用。在学习之前,我们先来看一下酷市场的登录效果。
实现这种效果的正是我们今天的主角——TextInputLayout。
学习
不管学习什么,首先看它的官方文档。这是最权威,最高效的学习途径。
文档地址:http://developer.android.com/reference/android/support/design/widget/TextInputLayout.html
可以看到,TextInputLayout继承自LinearLayout。一般将EditText和它的子类包含在内,以便用户在输入文本时,且当提示文本被隐藏时显示一个浮动的标签。
也支持通过setErrorEnabled(boolean)和setError(CharSequence)方法来显示错误提示。
用法
TextInputLayout使用起来非常简单,两部搞定
- 1.编写XML布局文件,将EditText包含在内即可。
<android.support.design.widget.TextInputLayout
android:id="@+id/textInputLayoutName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="30dp">
<EditText
android:id="@+id/editTextName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hint_name"
android:textColorHint="@color/colorGray"
/>
</android.support.design.widget.TextInputLayout>
- 2.编写逻辑代码
本来不需要这一步的,因为这控件存在一个bug,当清空之前输错的内容后,提示错误的红色文字并不会消失。
我在Google和*上找了很久,这貌似是Google的bug。可参考 https://code.google.com/p/android/issues/detail?id=190355
为了解决这个bug,就需要我们监听EditText的输入变化了,具体处理看代码。
mEditTextName.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}
@Override
public void afterTextChanged(Editable s) {
checkName(s.toString(),false);
}
});
/**
*若用户名为空且用户是想登录,提示错误,返回false。不为空,错误设为null
*/
private boolean checkName(CharSequence name,boolean isLogin) {
if(TextUtils.isEmpty(name)) {
if(isLogin) {
mTextInputLayoutName.setError(getString(R.string.error_login_empty));
return false;
}
}else{
mTextInputLayoutName.setError(null);
}
return true;
}
实现效果:
具体代码我上传到Github了,https://github.com/JohnTsaiAndroid/CoolMarket
欢迎star&fork
Android Material Design控件学习(三)——使用TextInputLayout实现酷市场登录效果的更多相关文章
-
Android Material Design控件学习(一)——TabLayout的用法
前言 Google官方在14年Google I/O上推出了全新的设计语言--Material Design.一并推出了一系列实现Material Design效果的控件库--Android Desig ...
-
Android Material Design控件学习(二)——NavigationView的学习和使用
前言 上次我们学习了TabLayout的用法,今天我们继续学习MaterialDesign(简称MD)控件--NavigationView. 正如其名,NavigationView,导航View.一般 ...
-
Android Material Design控件使用(一)——ConstraintLayout 约束布局
参考文章: 约束布局ConstraintLayout看这一篇就够了 ConstraintLayout - 属性篇 介绍 Android ConstraintLayout是谷歌推出替代PrecentLa ...
-
Android Material Design控件使用(四)——下拉刷新 SwipeRefreshLayout
使用下拉刷新SwipeRefreshLayout 说明 SwipeRefreshLayout是Android官方的一个下拉刷新控件,一般我们使用此布局和一个RecyclerView嵌套使用 使用 xm ...
-
Android Material Design控件使用(二)——FloatButton TextInputEditText TextInputLayout 按钮和输入框
FloatingActionButton 1. 使用FloatingActionButton的情形 FAB代表一个App或一个页面中最主要的操作,如果一个App的每个页面都有FAB,则通常表示该App ...
-
Android Material Design控件使用(三)——CardView 卡片布局和SnackBar使用
cardview 预览图 常用属性 属性名 说明 cardBackgroundColor 设置背景颜色 cardCornerRadius 设置圆角大小 cardElevation 设置z轴的阴影 ca ...
-
Android&#160;Material&#160;Design&#160;控件常用的属性
android:fitsSystemWindows="true" 是一个boolean值的内部属性,让view可以根据系统窗口(如status bar)来调整自己的布局,如果值为t ...
-
【转】Android M新控件之FloatingActionButton,TextInputLayout,Snackbar,TabLayout的使用
Android M新控件之FloatingActionButton,TextInputLayout,Snackbar,TabLayout的使用 分类: Android UI2015-06-15 16: ...
-
Android自己定义控件系列五:自己定义绚丽水波纹效果
尊重原创!转载请注明出处:http://blog.csdn.net/cyp331203/article/details/41114551 今天我们来利用Android自己定义控件实现一个比較有趣的效果 ...
随机推荐
-
yourphp读取不到hits
源代码 <YP:list name="Article" order="id desc" catid="37" limit=" ...
-
Struts2 Convention插件的使用
转自:http://chenjumin.iteye.com/blog/668389 1.常量说明 struts.convention.result.path="/WEB-INF/conten ...
-
asp.net(c#)中如何在前端用js写条件查询,且不用调用存储过程
前端页面(源): <dx:ASPxButton ID="ASPxButton_Select" runat="server" Text="查询&q ...
-
error proc
/*************************************************************************\ * Copyright (C) Michael ...
-
Ajax属性和函数以及 返回值之XML格式和文本格式(二)
(一) client请求文本之json格式:接收到json格式,再有js解析(详细先eval成对象,然后.就可以) var text = this.responseText; var book = e ...
-
jsp中的request.setAttribute的使用
1.第一个jsp页面 <form id="form1" method="post" action="first.jsp"> &l ...
-
Error: Can&#39;t find Python executable, you can set the PYTHON env variable.
该错误解决方案. NodeJS安装Npm包时出现错误: npm WARN prefer global node-gyp@3.4.0 should be installed with -g > s ...
-
总结一下关于mysql 5.6 新特性
一直断断续续的看一些mysql特性,今天总结一下,以下是列表,网址 http://mariadb.org/ (也是类似的特性), http://mysql.com/ 最近在看关于mysql新特性的一些 ...
-
JavaScript函数及作用域
知识内容: 1.JavaScript函数 2.JavaScript全局函数及特殊函数 3.JavaScript作用域 4.本节练习 参考资料:<JavaScript高级程序设计> 一.Ja ...
-
Storm-源码分析-Stats (backtype.storm.stats)
会发现, 现在storm里面有两套metrics系统, metrics framework和stats framework 并且在所有地方都是同时注册两套, 貌似准备用metrics来替代stats, ...