这应该是最够用的TextInputLayout了

国际惯例先放图
效果展示图

(有点丑,凑合着看吧)

写在开头

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

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

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

其实主要目的是为了装X
装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) 设置密码可见开关的图标
效果展示
常用功能效果图

进阶用法

自定义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别的控件的文章,希望大家继续关注。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,907评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,987评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,298评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,586评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,633评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,488评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,275评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,176评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,619评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,819评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,932评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,655评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,265评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,871评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,994评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,095评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,884评论 2 354

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,656评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,127评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,103评论 4 62
  • 上午结束一门考试 很轻松 提前半小时交卷 从大二以来 期末考试对于我来说就是一件得心应手的事情 不是我多聪明 只...
    云端的小马阅读 394评论 0 0
  • the night is cold but clear the mind is blown by the wind...
    吴说创业阅读 163评论 2 1