Material Design (二),TextInputLayout的使用
前言
一般登录注冊界面都须要EditText这个控件来让用户输入信息,同一时候我们通常会设置一个标签(使用TextView)和EditText的hint属性来提示用户输入的内容,而设计库中高级组件TextInputLayout则专门为EditText设计的。即通过使用TextInputLayout包裹EditText实现当用户開始输入时hint属性值将显示在EditText上面作为一个提示标签,这个过程还带有动画效果,这样就避免了用户输入时输入提示消失的情况,同一时候。还能够更好地向用户提示错误输入信息。
TextInputLayout的两个功能:
- 给EditText加入一个带有动画效果的提示标签(利用EditText的hint属性的值作为提示标签内容);
- 处理错误输入。将错误输入提示信息显示在EditText附近。便于提示用户更好地完毕输入。
1. 实现浮动标签提示效果
TextInputLayout和FrameLayout一样都是一个ViewGroup,而TextInputLayout包裹的是EditText,而且会将EditText的android:hint属性值作为提示标签,所以。使用很easy,例如以下:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_margin="20dp"
android:id="@+id/usernameWraper"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:hint="请输入用户名"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>
用TextInputLayout包裹EditText并给EditText设置了hint属性后。这个EditText就带有了浮动提示标签的效果了,为了更好地看到效果。丰富一下这个xml布局文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:background="#ff9900"
android:layout_height="200dp">
<TextView
android:text="用户登录"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:textColor="#fff"
android:textSize="30sp"
android:layout_height="wrap_content"/>
</RelativeLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_margin="20dp"
android:id="@+id/usernameWraper"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:hint="请输入用户名"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_margin="20dp"
android:id="@+id/passwordWraper"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:hint="请输入密码"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>
<Button
android:layout_width="match_parent"
android:layout_margin="20dp"
android:text="登录"
android:id="@+id/btn_login"
android:layout_height="wrap_content"/>
</LinearLayout>
2. 显示错误输入信息
TextInputLayout使得我们在验证输入数据是能够更加方便地显示错误输入提示,这样能够使得输入更加友好。
对于处理错误信息,TextInputLayout提供了两个方法:
- setError(String message):设置错误提示信息。这个信息将会显示在EditText附近。
- setErrorEnabled(boolean enabled):设置错误信息不能够用,也就是移除setError(String message)加入的错误提示信息。
代码样例:
package com.example.lt.meterialdesign;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.widget.Button;
public class LoginActivity extends AppCompatActivity implements View.OnClickListener {
private TextInputLayout mUsernameWraper;
private TextInputLayout mPasswordWraper;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
mUsernameWraper = (TextInputLayout) findViewById(R.id.usernameWraper);
mPasswordWraper = (TextInputLayout) findViewById(R.id.passwordWraper);
Button btn_login = (Button) findViewById(R.id.btn_login);
btn_login.setOnClickListener(this);
}
@Override
public void onClick(View v) {
// TextInputLayout能够取得包裹的EditText
String username = mUsernameWraper.getEditText().getText().toString().trim();
String password = mPasswordWraper.getEditText().getText().toString().trim();
if(TextUtils.isEmpty(username)){
mUsernameWraper.setError("用户名不能为空");
return;
}else{
// 移除错误提示信息
mUsernameWraper.setErrorEnabled(false);
}
if(TextUtils.isEmpty(password)){
mPasswordWraper.setError("密码不能为空");
return;
}else{
// 移除错误提示信息
mPasswordWraper.setErrorEnabled(false);
}
}
}
这里仅仅是对username与password是否为空进行了推断。假设要指定格式能够结合正則表達式验证数据格式。对于EditText能够给它加入文本改变监听addTextChangedListener,当用户改变输入的文本后进行数据格式的验证。然后更加情况显示输入提示。
执行效果:
能够看到,当我们開始在EditText中输入信息的时候,EditText的hint属性值将会显示在EditText上面,而且带有一个动画效果,显示为一个浮动标签。而且,当输入的数据格式不正确时,还会显示错误提示在EditText以下。
Material Design (二),TextInputLayout的使用的更多相关文章
- Android(Lollipop/5.0) Material Design(二) 入门指南
Material Design系列 Android(Lollipop/5.0)Material Design(一) 简介 Android(Lollipop/5.0)Material Design(二) ...
- Material Design之TextInputLayout使用示例
Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个supp ...
- Material Design之TextInputLayout、Snackbar的使用
这两个控件也是Google在2015 I/O大会上公布的Design Library包下的控件,使用比較简单,就放在一起讲了,但有的地方也是须要特别注意一下. TextInputLayout Text ...
- Material Design学习-----TextInputLayout
TextInputLayout是为EditText提供了一种新的实现和交互方式.在传统的EditText中存在一个hint属性,是说在editext中没有内容时,默认的提示信息.当想edittext中 ...
- Android(Lollipop/5.0) Material Design(六) 使用图像
Material Design列 Android(Lollipop/5.0)Material Design(一) 简单介绍 Android(Lollipop/5.0)Material Design(二 ...
- 用户登录(Material Design + Data-Binding + MVP架构模式)实现
转载请注明出处: http://www.cnblogs.com/cnwutianhao/p/6772759.html MVP架构模式 大家都不陌生,Google 也给出过相应的参考 Sample, 但 ...
- Android(Lollipop/5.0) Material Design(一) 简单介绍
Material Design系列 Android(Lollipop/5.0)Material Design(一) 简单介绍 Android(Lollipop/5.0)Material Design( ...
- Android(Lollipop/5.0) Material Design(四) 创建列表和卡片
Material Design系列 Android(Lollipop/5.0)Material Design(一) 简单介绍 Android(Lollipop/5.0)Material Design( ...
- Android Material Design控件使用(二)——FloatButton TextInputEditText TextInputLayout 按钮和输入框
FloatingActionButton 1. 使用FloatingActionButton的情形 FAB代表一个App或一个页面中最主要的操作,如果一个App的每个页面都有FAB,则通常表示该App ...
随机推荐
- 我对webform的整改。
对于webfom,一种写法,将所有业务单元封装在一个pagebase里面,所有的页面继承自pagebase这个service外观,这样的结果就是,所有的页面单元上代码量会非常少.最大程度减少耦合,而最 ...
- centos 7 安装配置mod_security
1.旧版本安装过程: http://blog.secaserver.com/2011/10/install-mod_security-apache2-easiest/ http://www.cnblo ...
- android hook 框架 libinject 如何实现so注入
前面两篇 android hook 框架 libinject2 简介.编译.运行 android hook 框架 libinject2 如何实现so注入 实际运行并分析了 Android中的so注入( ...
- 【计算机网络】简单网络管理协议 SNMP
计算机网络 6.7节学习笔记 SNMP: 管理网络上的对象时,必然会给该对象添加一些软件或硬件,但这种添加必须对原有对象的影响尽量小. SNMP中的管理程序和代理程序按客户-服务器方式工作.管理程序 ...
- 【C语言】指针增减
int *pa = NULL; ; printf("%x\n", pb); char *pca = NULL; ; printf("%x\n", pcb); s ...
- Starting MySQL... ERROR! The server quit without updating PID file 问题解决
今天遇到一个mysql起不来,不知为啥挂了,启动是下面的报错 Starting MySQL... ERROR! The server quit without updating PID file 后来 ...
- tf一些理解(根据资料)
首先看了开源操作机器人系统-ros这本书(张建伟)第五章slam导航 5.1使用tf配置机器人 还有ros navigation 教程 http://wiki.ros.org/navigation/T ...
- PHP源码加密- php-beast
php-beast 详细介绍 使用案例: http://www.beastcoder.com/ PHP Beast是一个源码加密模块,使用这个模块可以把PHP源码加密并在此模块下运行. 为什么要用PH ...
- maven 在 mac中的配置
思前想后,还是在mac中把maven配置一下吧. 1.下载安装包,由于公司用的版本比较低,考虑到兼容性,建议用低版本的.我用3.0.5 下载地址:http://archive.apache.org/d ...
- 获取父窗口iframe方法
在页面中,有个iframe,基于这个iframe,弹出了个窗口,这个窗口在关闭的时候需要操作iframe里的元素. 做法是 window.top.document.getElementById(&qu ...