Material Design (二),TextInputLayout的使用
2016-03-16 20:11
525 查看
前言
一般登录注册界面都需要EditText这个控件来让用户输入信息,同时我们一般会设置一个标签(使用TextView)和EditText的hint属性来提示用户输入的内容,而设计库中高级组件TextInputLayout则专门为EditText设计的,即通过使用TextInputLayout包裹EditText实现当用户开始输入时hint属性值将显示在EditText上面作为一个提示标签,这个过程还带有动画效果,这样就避免了用户输入时输入提示消失的情况,同时,还可以更好地向用户提示错误输入信息。
TextInputLayout的两个功能:
给EditText添加一个带有动画效果的提示标签(利用EditText的hint属性的值作为提示标签内容);
处理错误输入,将错误输入提示信息显示在EditText附近,便于提示用户更好地完成输入。
1. 实现浮动标签提示效果
TextInputLayout和FrameLayout一样都是一个ViewGroup,而TextInputLayout包裹的是EditText,并且会将EditText的android:hint属性值作为提示标签,所以,使用非常简单,如下:
用TextInputLayout包裹EditText并给EditText设置了hint属性后,这个EditText就带有了浮动提示标签的效果了,为了更好地看到效果,丰富一下这个xml布局文件:
2. 显示错误输入信息
TextInputLayout使得我们在验证输入数据是可以更加方便地显示错误输入提示,这样可以使得输入更加友好。
对于处理错误信息,TextInputLayout提供了两个方法:
setError(String message):设置错误提示信息,这个信息将会显示在EditText附近。
setErrorEnabled(boolean enabled):设置错误信息不可以用,也就是移除setError(String message)添加的错误提示信息。
代码例子:
这里只是对用户名和密码是否为空进行了判断,如果要指定格式可以结合正则表达式验证数据格式。对于EditText可以给它添加文本改变监听addTextChangedListener,当用户改变输入的文本后进行数据格式的验证,然后更加情况显示输入提示。
运行效果:
![](http://img.blog.csdn.net/20160316201554771)
可以看到,当我们开始在EditText中输入信息的时候,EditText的hint属性值将会显示在EditText上面,并且带有一个动画效果,显示为一个浮动标签。而且,当输入的数据格式不对时,还会显示错误提示在EditText下面。
一般登录注册界面都需要EditText这个控件来让用户输入信息,同时我们一般会设置一个标签(使用TextView)和EditText的hint属性来提示用户输入的内容,而设计库中高级组件TextInputLayout则专门为EditText设计的,即通过使用TextInputLayout包裹EditText实现当用户开始输入时hint属性值将显示在EditText上面作为一个提示标签,这个过程还带有动画效果,这样就避免了用户输入时输入提示消失的情况,同时,还可以更好地向用户提示错误输入信息。
TextInputLayout的两个功能:
给EditText添加一个带有动画效果的提示标签(利用EditText的hint属性的值作为提示标签内容);
处理错误输入,将错误输入提示信息显示在EditText附近,便于提示用户更好地完成输入。
1. 实现浮动标签提示效果
TextInputLayout和FrameLayout一样都是一个ViewGroup,而TextInputLayout包裹的是EditText,并且会将EditText的android:hint属性值作为提示标签,所以,使用非常简单,如下:
[code]<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布局文件:
[code]<?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)添加的错误提示信息。
代码例子:
[code]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); } } }
这里只是对用户名和密码是否为空进行了判断,如果要指定格式可以结合正则表达式验证数据格式。对于EditText可以给它添加文本改变监听addTextChangedListener,当用户改变输入的文本后进行数据格式的验证,然后更加情况显示输入提示。
运行效果:
可以看到,当我们开始在EditText中输入信息的时候,EditText的hint属性值将会显示在EditText上面,并且带有一个动画效果,显示为一个浮动标签。而且,当输入的数据格式不对时,还会显示错误提示在EditText下面。
相关文章推荐
- 函数(-)
- 今年第一次面试
- Ubuntu系统使用光盘作为apt-get源
- Android APP安装后不在桌面显示图标的应用场景
- PSP(3.13——3.15)以及周记录
- lintcode:寻找旋转排序数组中的最小值 II
- reachability ios网络连接判断
- 本地下载的软件包制作成本地repo源并使用apache发布
- 原生javascript 简易实现放大镜效果
- RPC
- 无法打开包括文件: “extensions/ExtensionExport.h”: No such file or directory
- android:finishOnTaskLaunch="true" //虽然这样设置了,但是Back键与Home键还是不同
- 实用的插件:跨浏览器复制jQuery-zclip
- 软件测试第二次作业
- 【2016.3.16】作业 VS2015安装&单元测试(1)
- 超链接
- ubuntu 环境变量配置
- 复利计算3
- Linux笔记(49)——正则表达式与字符命令
- 获取镜像源来搭建本地Ubuntu14.04源