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. localStorage eval script

    var globalEval =function(data) { (window.execScript || function(data){ window.eval.call(window,data) ...

  2. IOS web app一些实用的属性设置

    IOS对safari私有的属性很多,虽然很多不为人知但是却很实用.掌握好这些属性对web app和混合app的开发会很有帮助. 1.format-detection[telephone=no] 是否自 ...

  3. Zepto swipe 无效(坑)

    Zepto 滑动插件 bug Zepto 的 'swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown' 触摸事件在安卓4.4系统中除chro ...

  4. C++第一天学习

    代码1 #include<iostream> int main(){ int a; std::cout << "hello c++" << st ...

  5. OBJECT和EMBED标签

    一.介绍: 我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标 签.也就是OBJECT和EMBED标签.OBJECT标签是用于windows平台的IE浏览器的,而EMBED ...

  6. js实时显示系统时间

    刚刚在做后台页面最上面要动态显示时间刚写了这个代码 将这段代码加入<head></head> <!--时间显示代码 --><script>functio ...

  7. HDU-4371-Alice and Bob

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=4371 这题在比赛的时候看错了题意,卡了很久都没做出来,也没有再回头仔细去看题,所以没做出来,之后再看别 ...

  8. 【转载】doxygen+graphviz生成代码文档

    一.工具 doxygen:http://www.stack.nl/~dimitri/doxygen/download.html graphviz:http://www.graphviz.org/ 二. ...

  9. WCF服务发布到IIS中去 在WCF调试

    第一个WCF程序 1. 新建立空白解决方案,并在解决方案中新建项目,项目类型为:WCF服务应用程序.建立完成后如下图所示: 2.删除系统生成的两个文件IService1.cs与Service1.svc ...

  10. JS插件库

    http://www.cnblogs.com/xiaoyao2011/category/327551.html