TextInputLayout是为EditText提供了一种新的实现和交互方式。在传统的EditText中存在一个hint属性,是说在editext中没有内容时,默认的提示信息。当想edittext中输入信息的时候会自动消失。而在TextInputLayout中当想edittext中输入信息的时候,这些提示信息会通过动画的方式,移动到控件顶部继续存在,同时还会提示错误的信息,实现了一个更好的交互效果。实现的效果如下图:

  1、实现方式

   TextInputLayout和一般的layout一样,是一个容器,只要把想实现效果的edittext放在容器中就可以了,但是同时TextInputLayout和scrollview一样,其中只能放一个控件作为其子控件。实现代码如下:

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="@+id/username_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="用户名"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/pwd_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/pwd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="密码"/>
</android.support.design.widget.TextInputLayout>
<Button
android:id="@+id/btn_b"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

  从上面可以看出,要想让多个edittext实现效果,就要使用多个TextInputLayout进行嵌套。

  要想让结果实现,光是在xml布局文件中实现还是不够的,同时还需要在Activity中实现相应的设置:

 text1= (TextInputLayout) findViewById(R.id.username_layout);
text2= (TextInputLayout) findViewById(R.id.pwd_layout);
btn= (Button) findViewById(R.id.btn_b);
text1.setHint("用户名");
text2.setHint("密码");

  同时要是想要实现错误提示信息的话,就要设置相应的setErrorEnabled方法和setErrror方法:

 text1.setErrorEnabled(true);
text1.setError("密码错误");

  2、自定义样式  

  你可能还想做最后一件事,改变TextInputLayout控件的颜色。默认AppCompact会把它设置成绿色的,但是很有可能这个颜色会和你的颜色主题(color palette)冲突。

谷歌把Design Support Library写的很好。每一个控件的颜色都是直接通过主题颜色绘制的,在 style.xml 中指定。打开它添加colorAccent 到主题以改变表单的颜色。

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorAccent">#3498db</item>
</style>

Material Design学习-----TextInputLayout的更多相关文章

  1. Material Design之TextInputLayout使用示例

    Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个supp ...

  2. Material Design学习之 Button(具体分析,传说中的水滴动画)

    转载请注明出处:王亟亟的大牛之路 上一篇大致介绍了Material Design的一些基本概念传送门:http://blog.csdn.net/ddwhan0123/article/details/5 ...

  3. Material Design学习笔记

    Wiki->移动开发->Android->Material Design-原质化设计 (友情链接:http://wiki.jikexueyuan.com/project/materi ...

  4. Material Design学习

    前言: 最为一个用习惯了bootstrap的前端小菜,今天偶然听闻material design 这个从未听闻的前端框架,带着好奇开始了新的尝试,并将bootstrap跟material design ...

  5. Android Material Design 学习笔记 - Matrial Theme

    google在2014年 I/O大会上推出了一种新的设计设计语言—Material design,这种设计语言语言旨在为手机.平板电脑.台式机和“其他平台”提供更一致.更广泛的“外观和感觉”(附上官方 ...

  6. Material Design之TextInputLayout、Snackbar的使用

    这两个控件也是Google在2015 I/O大会上公布的Design Library包下的控件,使用比較简单,就放在一起讲了,但有的地方也是须要特别注意一下. TextInputLayout Text ...

  7. Material Design学习之 ProgreesBar

    转载奇怪注明出处:王亟亟的大牛之路 继续我们Material Design的内容,这一篇讲的是进度条,上一篇是Switch地址例如以下:http://blog.csdn.net/ddwhan0123/ ...

  8. Material Design学习之 Camera

    转载请注明出处:王亟亟的大牛之路 年后第一篇,自从来了某司产量骤减,这里批评下自己,这一篇的素材来源于老牌Material Design控件写手afollestad的 https://github.c ...

  9. Material Design学习之 Bottom navigation

    转载请注明出处:王亟亟的大牛之路 礼拜4一天由于事假没有去单位然后礼拜3由于生日也没写文章,今天一早上班就补一篇MD的内容.这一篇是关于颇有争议的Bottom navigation相关内容(主要是翻译 ...

随机推荐

  1. 环信 之 iOS 客户端集成三:基础功能

    SDK中,大部分与网络有关的操作,都有三种方法: 同步方法 通过delegate回调的异步方法.要想能收到回调,必须要注册为:[[EaseMob sharedInstance].chatManager ...

  2. Grunt构建工具能做哪些事?

    Grunt到底有什么作用?一般用来干嘛? 很多前端的工作,包括Less编译.javascript压缩.Css压缩等零零碎碎的工作, 都可以让Grunt来做. 实际上在项目开发中,一般是前端代码 与 后 ...

  3. iOS 错误 之 Potential leak of an object stored into 'cs'

    存储到 “cs”的对象存在潜在的泄露

  4. webx学习

    webx框架学习指南 http://openwebx.org/docs/Webx3_Guide_Book.html webx学习(一)——初识webx webx学习(二)——Webx Framewor ...

  5. C++中lower_bound函数和upper_bound函数

    STL中关于二分查找的函数有三个lower_bound .upper_bound .binary_search .这三个函数都运用于有序区间(当然这也是运用二分查找的前提),下面记录一下这两个函数. ...

  6. svg defs 进行定义 引用

    svg defs 进行定义 引用: <%@ page language="java" contentType="text/html; charset=UTF-8&q ...

  7. 二维动态规划——Interleaving String

    97. Interleaving String Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2 ...

  8. Canvas贝塞尔二级曲线

    当前点到控制点,控制点到末尾点的两个连线,与这两个连线相切:<!DOCTYPE html> <html lang="en"> <head> &l ...

  9. MyBatis浅尝笔记

    MyBatis应属于一种轻量级的java持久层技术,它通过简单的SQL xml或注解,将数据库数据映射到接口与POJO.最近项目要用到mybatis,所以学习之后在这里做个总结,文中的示例以xml配置 ...

  10. css3 2d转换3d转换以及动画的知识点汇总

    css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...