使用TextInputLayout创建登陆界面
翻译自: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即可。