这应该是最够用的TextInputLayout了

国际惯例先放图
这应该是最够用的TextInputLayout了_第1张图片
效果展示图

(有点丑,凑合着看吧)

写在开头

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

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

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

其实主要目的是为了装X
这应该是最够用的TextInputLayout了_第2张图片
装B.jpg

(咳咳。。。开玩笑了,我是一个正经的人。。。)

不留码的司机不是老司机

目录

  • 简单用法
    1.常用属性和对应方法
    2.效果展示

  • 进阶用法
    1.自定义hint样式
    2.自定义error样式
    3.自定义超出长度样式
    4.自定义密码图标
    5.效果展示

简单用法

常用属性和对应方法
属性名 对应方法 作用
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) 设置密码可见开关的图标
效果展示
这应该是最够用的TextInputLayout了_第3张图片
常用功能效果图

进阶用法

自定义hint样式

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



   #3F51B5
   #303F9F
   #FF4081

默认样式

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

这应该是最够用的TextInputLayout了_第4张图片
逼格要高

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

 
    

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

这应该是最够用的TextInputLayout了_第5张图片
自定义浮标样式
自定义error样式

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

 
    

然后通过setErrorTextAppearance(int ResId)进行设置即可。

这应该是最够用的TextInputLayout了_第6张图片
自定义错误样式
自定义超出长度样式

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


    

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

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

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

再点进去我看到了这个

这应该是最够用的TextInputLayout了_第7张图片

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

        app:counterTextAppearance="@style/overAppearance"
        app:counterOverflowTextAppearance="@style/errorAppearance"
这应该是最够用的TextInputLayout了_第8张图片
自定义提示样式
自定义密码图标

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



    
    
    
    

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

这应该是最够用的TextInputLayout了_第9张图片
自定义图标
小结
属性名 对应方法 作用
app:hintTextAppearance setHintTextAppearance(int ResId) 设置浮标样式
app:errorTextAppearance setErrorTextAppearance(int ResId) 设置错误样式
app:counterTextAppearance null 设置计数样式
app:counterTextAppearance null 设置超出计数样式
app:passwordToggleDrawable setPasswordVisibilityToggleDrawable(int ResId) 设置自定义图标

不留码的司机不是老司机

总结

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

这应该是最够用的TextInputLayout了_第10张图片

你可能感兴趣的:(这应该是最够用的TextInputLayout了)