这应该是最够用的TextInputLayout了

2017-08-10 本文已影响0人 X_Meteor

国际惯例先放图

效果展示图

（有点丑，凑合着看吧）

写在开头

对于MD风格相信大家都不陌生了，也有很多的介绍MD的文章，那为什么我还要写类似的文章呢？

一方面是为了学习源码，学习大牛们的代码风格；

另一方面是为了复习以前的知识（因为发现以前记得再清楚，用的时候还是会忘的。。。忘的。。。的。。。所以还是记录一下，忘的时候能翻一翻。）

其实主要目的是为了装X

装B.jpg

（咳咳。。。开玩笑了，我是一个正经的人。。。）

不留码的司机不是老司机

属性名	对应方法	作用
app:hint	setHint(CharSequence)	设置浮动提示语
app:hintEnabled	setHintEnabled(boolean)	设置是否开启浮动功能
app:hintAnimationEnabled	setHintAnimationEnabled(boolean)	设置是否开启浮动提示动画
null	setError	设置错误提示
app:errorEnabled	setErrorEnabled(boolean)	设置是否开启错误提示
app:counterEnabled	setCounterEnabled(boolean)	设置是否开启计数器
app:counterMaxLength	setCounterMaxLength(int)	设置计数器的最大长度（超过并不影响输入）
app:passwordToggleEnabled	setPasswordVisibilityToggleEnabled(boolean)	设置是否开启密码可见开关(EditText必须为password类型才起作用)
app:passwordToggleDrawable	setPasswordVisibilityToggleDrawable(Drawable)	设置密码可见开关的图标

效果展示

常用功能效果图

进阶用法

自定义hint样式

当我们通过setHint（）之后，TextInputLayout会给浮标设置一个默认的样式，默认颜色是 color 中的 colorAccent 如图所示：

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#3F51B5</color>
   <color name="colorPrimaryDark">#303F9F</color>
   <color name="colorAccent">#FF4081</color>
</resources>

默认样式

那我们要想改个样式该怎么整呢？
“直接去color中改变colorAccent的颜色啊！”有同学该说了
那样确实可以做到改变颜色，但是这样会影响所有控件的默认颜色，就造成了牵一发而动全身的效果。很明显这不是一个逼格高的程序员解决问题的思路。我们作为一个高逼格的程序员，我们首先想到的肯定是自定义啊。

逼格要高

有了思路去找方法，TextInputLayout中恰好给我们提供了设置浮标样式的方法： setHintTextAppearance（int RexId）
里面让我们传一个资源文件的ID，
这里我们在style.xml下自定义一个：

 <!-- 设置提示文字样式 -->
    <style name="hintAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">24sp</item>
        <item name="android:textColor">#08ff00</item>
    </style>

然后我们把这个资源文件id传入刚才的方法中，就能实现自定义浮标样式了，惊不惊喜、意不意外。

自定义浮标样式

自定义error样式

有了自定义浮标样式的经验，相信自定义error样式也难不到我们。
同样的我们在style.xml下自定义error样式：

 <!-- 设置错误提示文字样式 -->
    <style name="errorAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#001aff</item>
    </style>

然后通过setErrorTextAppearance（int ResId）进行设置即可。

自定义错误样式

自定义超出长度样式

又是自定义样式，那我们还按照以上步骤，继续走一遍。
先自定义xml样式

<!-- 设置超出长度提示文字样式 -->
    <style name="overAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#001aff</item>
    </style>

然后再通过set方法设置，那么问题来了，我们找不到设置 ‘超出长度提示文字样式’ 的方法了，那我们要怎么设置啊！

别着急，通过翻阅源码，我找到了这个东西

 mCounterTextAppearance = a.getResourceId(
                R.styleable.TextInputLayout_counterTextAppearance, 0);
       
 mCounterOverflowTextAppearance = a.getResourceId(
                R.styleable.TextInputLayout_counterOverflowTextAppearance, 0);

再点进去我看到了这个

很明显这不就是TextInputLayout的所有xml属性吗
那我们就可以通过xml去设置 ‘计数文字’ 和 ‘超出长度’ 的样式了

        app:counterTextAppearance="@style/overAppearance"
        app:counterOverflowTextAppearance="@style/errorAppearance"

自定义提示样式

自定义密码图标

有了上面的自定义样式经验，相信这个也难不倒我们，先撸一个xml，因为是图标，所以我们要写一个select

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/pwd_close" android:state_checked="false" android:state_pressed="false" />
    <item android:drawable="@drawable/pwd_open" android:state_checked="false" android:state_pressed="true" />
    <item android:drawable="@drawable/pwd_open" android:state_checked="true" android:state_pressed="false" />
    <item android:drawable="@drawable/pwd_close" android:state_checked="true" android:state_pressed="true" />
</selector>

然后我们通过setPasswordVisibilityToggleDrawable（int ResId）来设置
就能达到换图标的效果了。

自定义图标

小结

属性名	对应方法	作用
app:hintTextAppearance	setHintTextAppearance(int ResId)	设置浮标样式
app:errorTextAppearance	setErrorTextAppearance(int ResId)	设置错误样式
app:counterTextAppearance	null	设置计数样式
app:counterTextAppearance	null	设置超出计数样式
app:passwordToggleDrawable	setPasswordVisibilityToggleDrawable(int ResId)	设置自定义图标

不留码的司机不是老司机

总结

TextInputLayout的讲解到此结束，相信这些知识足以应付开发中的大部分需求了，大家也可以根据这些东西自己写个登录页面什么的练练手。
我后续也会继续整理MD别的控件的文章，希望大家继续关注。

这应该是最够用的TextInputLayout了

国际惯例先放图

写在开头

目录

简单用法

常用属性和对应方法