![]()
由于上周五的科技快讯向大家汇报了一下《第二行代码》目前的进度，结果漏掉了当天一条非常有意思的新闻，那么今天就在这里补上了。
就在上周五，阿里巴巴集团决定，将旗下的阿里旅行产品正式更名为“飞猪”，一个让人笑喷的名字。不过阿里的这一决定应该已经酝酿很久了，因为就在当天公布改名之后，各大应用商店渠道上的阿里旅行都立即更名成了飞猪。虽说这个名字非常搞笑，但是我们隐约可以看出阿里对产品起名的一个特色，天猫、闲鱼、蚂蚁、菜鸟、飞猪，还真是蛮有意思的。
大家上午好，又是新的一周！本篇是 李牧羊 的第二篇投稿，是他自己的学习笔记，有关 Android Design Support Library 里的 TextInputLayout，希望能够帮助到大家。
李牧羊 的博客地址：
http://blog.csdn.net/wei_smile
Google在2015的IO大会上，给我们带来了更加详细的 Material Design 设计规范，同时，也给我们带来了全新的 Android Design Support Library，Android Design Support Library 的兼容性更广，直接可以向下兼容到Android 2.2，我准备从最简单的控件开始，逐渐延伸，把新控件都给熟悉一遍。
先从看起来最简单的控件开始，也就是 TextInputLayout，说实话 TextInputLayout 我所见到的平常用的并不多，它的大体作用是在我们正常的 EditText 左上角显示出一个浮动标签，这个标签的内容就是我们设置的 android:hint 属性的值。
先来看一下它的继承结构：
![]()
可以很清晰的看到我们的 TextInputLayout 继承于 LinearLayout ，那么很明显这是一个布局，需要配合它的子控件来显示出想要的效果，这里谷歌把它专门设计用来包裹 EditText(或者EditText的子类)，然后当用户进行输入动作的时候我们设置的android:hint 提示就会以动画的形式运动到左上角，谷歌官方提供的最简单的使用示例如下：
![]()
有些人可能会奇怪，之前说好的 TextInputLayout 是用来包裹 EditText 的，为什么这里出现了 TextInputEditText ，先别急，我们看一下谷歌官方对这个控件的描述：
A special sub-class of EditText designed for use as a child of TextInputLayout.
Using this class allows us to display a hint in the IME when in 'extract' mode.
大意是说，这只是一种特殊的 EditText 的子类，用来在 'extract' mode 下在输入法编辑器中显示我们的 hint 提示信息，这里的 'extract' mode 其实就是 全屏模式，谷歌官方对它的解释是有时候你的输入框的UI界面很大，大的不能与你自己的应用程序的UI结合起来，这时候就可以切换到全屏模式来输入，这么说可能不太明白，上图：
比如说，下面这种情况使用的是 EditText：
![]()
我们看到下面那里输入框已经很大了，然后你点击输入框进行输入，会发现这个现象：
![]()
你进入到了全屏模式输入，但是界面上空空如也，对比一下使用 TextInputEditText 的情况：
![]()
看到左上角的文字了嘛，这是我们在之前设置的 android:hint 属性的值，这么一看这两者的区别的就一目了然了，但是说实话 TextInputEditText 用到的地方还是很有限的，所以日常开发我们还是使用 TextInputLayout 去包裹 EditText 来实现浮动标签的功能。
以上图片 感谢万能的stackoverflow
因为它是继承自 LinearLayout 的所以理论上 LinearLayout 有的属性它全都有，这里我们只看有关它本身的属性：
![]()
这里我们通过一个简单的Demo来了解以上这些属性，简单起见我们就做一个登录界面，这个界面长这样：
![]()
先上布局文件：
![]()
![]()
代码如下：
![]()
![]()
![]()
先来看一下最终的实现效果：
![]()
可以很明显的看到，当我们同时设置了 app:counterEnabled 和app:counterMaxLength 属性时，我们输入的 EditText 右下角会出现一个计数器还有一个最大输入字符数的数字显示，我们在输入名字这一栏设置最大输入为5个字符，所以当超过了5个字符的时候，EditText 的整个样式的颜色都会改变以示警告，如果我们只设置了app:counterEnabled 属性的话 EditText 右下角一开始会出现一个0，随着输入字符的增多而逐步进行计数，注意如果设置了整个属性我们 EditText 布局的高度会有一定的增大，具体的可以自己实践一下。
另外，我们在代码中设置了不同的输入类型，如果输入类型错误，我们就可以通过设置 app:errorEnabled 来开启错误显示，此时需要通过在代码中调用 setError(string) 方法来设置显示的错误提示文字，当不需要的时候记得设置 app:errorEnabled(false) 来取消错误提示，不然错误提示会一直存在。
注意： 当我们使用 app:counterMaxLength 这个属性的时候，一定要设置 app:counterOverflowTextAppearance 属性，不然的话程序运行会报错，这个属性是设置当我们输入字符超过限定的个数时候 EditText控件 整体显示的样式，需要在 style.xml 文件里面定义一个 自己的style，注意我们自定义的 style 的 parent 是 TextAppearance.AppCompat.Small ，拿我上面的程序举例：
style name="MyOverflowText" parent="TextAppearance.AppCompat.Small">
item name="android:textColor">#f3672bitem>
style>
这样定义好后再在 app:counterOverflowTextAppearance 里面设置这个style就行。
有些人可能不喜欢官方提供的默认样式想要自己定义，下面说一下自定义几种样式的方法：
![]()
更改里面的 colorAccent 属性就行了。
style name="MyErrorStyle">
item name="android:textColor">#ec4722item>
style>
然后在xml文件 TextInputLayout 控件里面这么设置一下就行了：
app:errorTextAppearance="@style/MyErrorStyle"
包括前面提到的设置当输入字符大于我们限定个数字符时的样式，基本上我们可以很好地自定义出自己想要的style了，以上两种不提供演示，都很简单，可以自己去尝试。
很多东西说简单也简单，说不简单也不简单，就像做这个Demo我之前光看官方文档根本没有告诉有 app:counterOverflowTextAppearance 这个属性的存在，也是一直查资料，还是要亲自去尝试一下才好，下面上源码(注意是AS文件)：
Demo地址：
http://download.csdn.net/detail/wei_smile/9506991
项目GitHub地址：
https://github.com/GiitSmile/TextInputLayoutDemo/tree/master
参考 Android Material Design Floating Labels for EditText：
http://www.androidhive.info/2015/09/android-material-design-floating-labels-for-edittext
最后来个小提示，当我们在 Android Studio 中导入 support design 开发包的时候，版本号最好和 v7包 的版本号一致，不然有些时候会出现莫名其妙的错误：
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.android.support:design:23.0.1'
每天学习累了，看些搞笑的段子放松一下吧。关注最具娱乐精神的公众号，每天都会有好心情。
![]()
如果你有好的技术文章想和大家分享，欢迎向我的公众号投稿，投稿具体细节请在公众号主页点击“投稿”菜单查看。
欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号：
![]()
