TextInputLayout 的使用以及如何阅读源码

699 阅读5分钟

能学到什么?

1.TextInputLayout 的使用
2.TextInputLayout 的所有属性
3.如何阅读 TextInputLayout 源码来实现自己想要的效果,遇到这类控件再也不用去百度了~~


老规矩,先上图。


TextInputLayout.gif

如何用?

在创建项目的时候选择Login Activity即可得到上图的效果


TextInputLayout.png

xml 结构如下


xml 结构.png

就是在 EditText 外包裹了一个 TextInputLayout 布局,就像穿了一件衣服一样。百度随便一搜,就能搜到很多 TextInputLayout 的使用方法。
等等,刚刚说什么?百度一搜,作为程序员,要使用一个系统控件去搜百度会不会有点 low?可能有朋友会说,这还不简单,我 Google 不就行了么。不不不,我不是这个意思,其实我们可以通过看通过源码来学习怎样使用这个控件呀。
好了,不闲聊了,滴滴滴~~~


滴滴滴.png

首先,我们是知道这个控件大致有哪些功能的,那么我们就先去找它的 attrs 属性,然后再对比TextInputLayout的方法。TextInputLayout的源码差不多有1500,有点多,作为一个比较会偷懒的程序员,肯定是不想一行一行代码去捋逻辑,但是我们又想知道 TextInputLayout 的所有可定制的功能,怎么办?看过设计模式的童鞋们都知道,一共有23种设计模式,而这23种设计模式都遵循了面向对象的六大原则(有些说法是七大原则,我不 care 这个),其中有一条原则叫:“开闭原则 OCP”。

开闭原则(OCP:Open Closed Principle)
核心思想:对扩展开放,对修改关闭。即在设计一个模块的时候,应当使这个模块可以在不被修改的前提下被扩展。
根据开闭原则,在设计一个软件系统模块(类,方法)的时候,应该可以在不修改原有的模块(修改关闭)的基础上,能扩展其功能(扩展开放)。

TextInputLayout在 design 包下,是 Google 发布的,代码规范性自然不用说,所以我们只需要关心 public 方法即可。

attrs 属性

我们在 design 包的 res> value 文件里面搜索一下 TextInputLayout 可以找到以下代码

<declare-styleable name="TextInputLayout">
 <attr format="reference" name="hintTextAppearance"/>
 <attr name="android:hint"/>
 <attr format="boolean" name="hintEnabled"/>
 <attr format="boolean" name="errorEnabled"/>
 <attr format="reference" name="errorTextAppearance"/>
 <attr format="boolean" name="counterEnabled"/>
 <attr format="integer" name="counterMaxLength"/>
 <attr format="reference" name="counterTextAppearance"/>
 <attr format="reference" name="counterOverflowTextAppearance"/>
 <attr name="android:textColorHint"/>
 <attr format="boolean" name="hintAnimationEnabled"/>
 <attr format="boolean" name="passwordToggleEnabled"/>
 <attr format="reference" name="passwordToggleDrawable"/>
 <attr format="string" name="passwordToggleContentDescription"/>
 <attr format="color" name="passwordToggleTint"/>
 <attr name="passwordToggleTintMode">
        <enum name="src_over" value="3"/>
        <enum name="src_in" value="5"/> 
        <enum name="src_atop" value="9"/> 
        <enum name="multiply" value="14"/>
        <enum name="screen" value="15"/>
    </attr>
</declare-styleable>

好了,其实光看名字,就能猜出这个属性是干嘛的了,为了避免有些同学写错,我这里一张图让你看明白。好烦呀,又要去 ps 图片~~~~


attrs.png

TextInputLayout 的 public 方法

直接看类结构图,不知道类结构图在哪的请看下图绿色箭头


TextInputLayout Structure.png

TextInputLayout 暴露出来的public 方法基本和 attrs 的属性对的上。

  • typeface
    • setTypeface(Typeface)设置 hint 等字体
    • getTypeface(Typeface)获取 hint 等字体
  • editText
    • getEditText() 获取子控件 EditText
  • hint
    • setHint(CharSequence)设置 hint 文字
    • getHint()获取 hint 文字
  • hintEnable
    • setHintEnable(boolean)设置是否显示 hint
    • isHintEnable() 获取是否显示 hint
  • hintTextAppearance
    • setHintTextAppearance() 设置 hint 文本颜色
  • errorEnable
    • setErrorEnable()设置是否显示错误提示
    • isErrorEnable();获取是否显示错误提示
  • ErrorTextAppearance
    • setErrortextAppearance(int) 设置错误提示样式
  • error
    • setError(charSequence)设置错误提示文本 不可以通过 attrs 属性设置
    • getError();获取错误提示文本
  • counterEnable
    • setCounterEnable(boolean)设置计数器开关
    • isCounterEnable() 获取是否打开计数器
  • counterMaxLength
    • setCounterMaxLength(int)设置计数器最大文本长度
    • getCounterMaxLength(); 获取计数器设置的最大文本长度
  • hintAnimationEnable
    • setHintAnimationEnable(boolean) 设置是否显示 hint 动画
    • isHintAnimationEnable() 获取 hint 动画是否打开
  • passwordVisiblityToggleDrawable系列
    • setPasswordVisiblityToggleDrawable(Drawable)设置密码可见开关图片
    • getPasswordVisiblityToggleDrawable()虎丘密码可见开关图片
    • setPasswordVisiblityToggleEnable(boolean)设置密码可见开关是否可用
    • isPasswordVisiblityToggleEnable()获取密码可见开关是否可用
    • setPasswordVisiblityToggleTintList(ColorStateList)设置密码可见开关颜色

这里的方法和上面的 attr 属性名基本上对的上,如果不能通过名字推测功能的话,可以点进源码看方法注释,都有详细说明的。如果看不懂英文文档的,请复制粘贴到这里fanyi.baidu.com/

好了,TextInputLayout 就到这里了,没有源码分析,其实也不需要去分析源码,因为我们自己去手撸一个TextInputLayout,其实也是可以撸出来的,就是一个自定义 View,继承 LinearLayout,然后获取里面的 Edittext,设置 hint 动画,然后添加一些关于密码的自定义属性,再加上一个对 EditText 的输入监听显示字数。把上面所有的设置方法暴露出来,最后让这个 View 看起来美观一点。。。。。

结束语

很早以前就知道 TextInputLayout 这个控件,中间也看过几次相关的 blog,自己也用过几次,就是每次用的时候,碰到任何问题都需要去搜 blog,然后搜到的东西还不一定是你想要的,导致效率特别低下。其实关于这些系统控件,直接去看源码才是最便捷的选择。