需要输入框?试试TextInputLayout

版权声明:

本账号发布文章均来自公众号,承香墨影(cxmyDev),版权归承香墨影所有。

未经允许,不得转载。

一、前言

Design Support Library 是 Google 发布的一个全新的兼容函数库,它可以在 Android 2.1 (Api level 7)及以上的设备中,实现 Material Design 的效果,这个函数库同时也提供了一系列控件。今天介绍的 TextInputLayout(以下简称 TIL) 就是其中之一。

在使用 Design Support Library 之前,需要在 build.gradle 文件中,添加依赖,这里使用的是 25.3.0。

compile 'com.android.support:design:25.3.0'

二、什么是TextInputLayout?

TIL 继承自 LinearLayout ,可以用它实现 Material Design 效果的一个表单输入框。

类似如下效果:

til-demo.gif

从实现的功能可以看到,它在原本的 EditText 的基础之上,添加了一些表单录入必要的功能:

  1. 输入提示,不同于原有 EditText 的 hint 属性,它可以在输入的时候,将提示的字符,通过一个动态的效果,显示在 EditText 的上面。
  2. 错误提示,在有错误的信息录入的时候,可以通过一个友善的方式,将错误提示给用户。
  3. 密码是否可见标志,这个常见于密码输入的时候,输入内容是否可用。
  4. 输入的字符数量和最大输入限制并且显示。

TIL 其实就是我们对表单录入的一个基本要求,例如实现一个简单的登录页面,完全是可以满足我们的需求的,并且它还属于 Material Design 的效果规范。

这些效果,我们只需要使用 TIL 的属性和方法,即可完成这些功能,而在之前我们都需要开发者对其单独开发。

三、使用TextInputLayout

TIL 从名字上看也能猜到,它是一个 Layout ,并且是继承自 LinearLayout ,但是它只能容纳一个 EditText,而实际上从它设计的角度来看,也不推荐再在其内包含其它的 View 了,因为这样会破坏 TIL 原本的设计。

til-layout.png

在使用过程中,是可以不用为 TIL 中的 EditText 单独设定 id 进行操作的,大部分操作都是可以通过 TIL 自身的 API 进行操作的,如果是在需要操作 EditText 对象,TIL 也提供了对应的 getEditText() 方法,来获取其内的 EditView 对象。

这样就完成了 TIL 最基本的功能,接下来让我们把 TIL 的特性拆分出来,来看看实现个别功能需要使用到的属性。

1、使用 hint 效果

TIL 中,可以通过使用 hint 对输入的内容进行提示,当其内部的 EditText 获取到焦点的时候,将 hint 的内容上移。

在 TIL 中,使用 hint 效果,相关的属性和方法:

  • android:hint :设置 hint。
  • app:hintEnabled:设置 hint 是否可见,默认为 true。
  • app:hintAnimationEnabled:设置 hint 上移的时候是否有动画,默认为 true。
  • app:hintTextAppearance:设置 hint 的样式。
  • setHint():设置 hint 。
  • setHintAnimationEnabled():设置 hint 是否可见。
  • isHintAnimationEnabled():判断当前 hint 的可见状态。

最简单的用法,就是只使用 android:hint 属性设置一次 hint 即可,但是也需要了解一下如何修改它的其他属性。

2、使用错误提示

TIL 中,错误一般都是在逻辑代码里,通过对输入数据的校验,来进行提示,但是同时也可以使用属性设置错误提示的样式。

在 TIL 中,使用错误提示的相关属性和方法:

  • app:errorEnabled:是否显示错误提示。
  • app:errorTextAppearance:设置错误提示的样式。
  • setErrorEnabled():设置错误是否可见。
  • setErrorTextAppearance():设置错误提示的样式。
  • isErrorEnabled():判断当前是否显示错误提示。
  • setError():设置错误提示的错误信息。

3、使用密码开关

TIL 在内部 EditText 的 android:inputType 为 xxxPassword 的时候,可以在 TIL 配置一个图标按钮,用于开启和关闭是否显示密码内容。

使用密码开关功能,使用到的相关属性和方法:

  • app:passwordToggleEnabled:设置 password 开关是否可用。
  • app:passwordToggleTint:设置 password 开关图标的 tint 着色。
  • app:passwordToggleTintMode:设置 password tint 的模式。
  • app:passwordToggleDrawable:设置 password 开关图标。
  • setPasswordVisibilityToggleDrawable:设置 password 开关图标。
  • isPasswordVisibilityToggleEnabled:设置 password 开关图标 是否可见。
  • setPasswordVisibilityToggleTintList:设置 password 开关图标的 tint。
  • setPasswordVisibilityToggleTintMode:设置 password 开关图标的 tint 模式。
  • getPasswordVisibilityToggleDrawable:设置 password 开关图标。

一般来说,我们使用默认的眼睛样式的图标即可。如果一定需要修改,可以参见 Widget.Design.TextInputLayout 中的设定进行修改。

4、使用输入限制长度提示

TIL 也可以设定当前输入的字符长度,以及限定的字符长度。

相关属性和方法:

  • app:counterEnabled:设置输入限制长度是否显示。
  • app:counterMaxLength:设置最大输入字符长度。
  • app:counterEnabled:设置输入字符提示是否显示。
  • app:counterTextAppearance:设置输入字符长度提示的样式。
  • setCounterEnabled():设置长度显示是否显示。

可以单独使用 counterEnabled ,也可以配合 counterMaxLength 使用。

TIL 对输入支付长度的限制提示,如果超过 counterMaxLength 的限制,只是会变色提示,但是并不会让阻止用户继续输入。

5、修改样式

默认的样式其实已经够我们使用了,除了使用对应属性的 xxxTextAppearance 对其最终使用的 TextView 进行设定样式外。还可以在style 中,统一设定,具体每个属性的格式,可以参考Widget.Design.TextInputLayout 中的设定。

til-style.png

四、TextInputLayout细节探究

之前就说过,虽然 MD 的设计很酷炫,但是实际上,我们在学习它的使用过程中,有一些它设计上的优点,值得我们学习,这才是精髓部分。

看看上面介绍的 TIL 的一些特性的设置来看看他们具体是如何实现的。

首先先让我们看看最终显示出来的布局结构。

til-layout1.png

可以看到,虽然在我们设定的布局中,看着 EditText 是 TextInputLayot 的直接子 View ,但是从源码上看,在 TIL 中,会使用一个 FrameLayout 类型的 mInputFrame,将其添加到 TIL 中。

til-create.png

而真正遇到 EditText 的时候,却将其拦截下来,再添加到这个 mInputFrame 布局中。

til-addview.png

那么接下来看看 hint 属性的效果是如何实现的。

从布局结构上看,hint 的文字,是直接 draw 到 TIL 上的,所以它并不是和其他效果一样是用 TextView 堆起来的。

继续源码中找蛛丝马迹。

til-draw.png

可以看到,如果 hint 需要被显示,将会把具体的实现,托管给 mCollapsingTextHelper 来处理 hint 效果的逻辑,这里就不继续跟下去了,有兴趣的可以找出来看看。

从上面布局结构可以看到,除了 mInputFrame 之外,还有一个 LinearLayout 的布局,它用于承载 mErrorView(错误提示) 和 mCounterView(输入计数)。

til-a.png

这个 LinearLayout 就是 mIndicatorArea。当 mErrorView 被使用完之后,也有对应的代码逻辑将其从 mIndicatorArea 中移除掉。

到这里,TIL 的关键设计点就已经清楚了,它不像外部看到的布局那样,直接使用 EditText ,而是对其进行多个布局的包装,让不同的功能单独拆分出来去实现。

五、结语

到这里就结束了,之后再继续介绍 Support Design 里的其它控件。

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

推荐阅读更多精彩内容