Android学习笔记

使用TextInputLayout创建登陆界面

2016-08-13  本文已影响169人  Viking_Den

翻译自:Creating a Login Screen Using TextInputLayout,用来实践练习TextInputLayout。

源码地址

介绍

在AppCompat包中没有体现的一个功能就是在EditText上显示浮动的Label标签,如下的栗子:

在Google IO 2015,Android团队释放了新的support包-Design Support Library。它解决了上述的问题,这篇文章将为你展示怎样使用新的TextInputLayout控件。

实现TextInputLayout

步骤一:新建一新项目

步骤二:导入Support包

为了能使用TextInputLayout空间,必须引入两个包。第一个为appcompat-v7,这个是为了使用material的样式兼容性。第二个为Design Support Library。

在项目的build.gradle文件中,添加下列到项目的依赖中:

步骤三:设计UI

主要是一个TextView显示欢迎,两个EditText分别用来填写邮箱地址和密码,还有一个Button,用来响应登录操作,具体的代码如下:

步骤四:使用TextInputLayout

TextInputLayout就像LinearLayout一样,只是一个容器。只是TextInputLayout只接受一个子元素,就像ScrollView。子元素需要是EditText控件:

如上图的代码所示,EditText设置了hint属性,也就是只要用户开始输入,hint的内容就会消失的。但是如果用了TextInputLayout,这个就将不是了,当EditText接受用户的输入时,TextInputLayout将会变成在EditText之上展示一浮动的Label,同时也是伴随着一Material的动画。

如果你现在运行程序,那就跟之前的没有设置TextInputLayout一样。为甚呢?因为还要加上以下代码段:

处理错误

另一个TextInputLayout的特性就是显示错误内容。对用户的输入进行判断,比如鉴别错误的email地址以及密码的长度限制。

实现onClick事件监听

判断email和password的输入

展示错误信息,其实就在判断输入非法后使用TextInputLayout的setError即可。

上一篇下一篇

猜你喜欢

热点阅读