制作个人网页教程/seo实战培训

LZ-Says：心丢了东西，枕边少个人。前者心空了，后者床大了。

前言

Material Design可谓是谷歌良心之作，其包含范围之广，以及各种高大上的酷炫效果，让人爱不释手。

Today，我们一起玩转Material Design中TextInputLayout，以及简要分析其源码，进一步拓展知识面。让你涨姿势~！

老规矩 - 放图

个人觉得，如果是说明或者举例，来个图比较直观些~

本文目标

if you 耐心阅读完本文，你会get如下技能：

• 熟练掌握TextInputLayout使用；

• 继续分析源码，从源码角度分析问题，get技能

TextInputLayout 简述以及使用

首先，大家一定会想，TextInputLayout是个什么鬼？

从字面意思上来看，输入文本的一个布局，具体显示的效果便是上面放图中密码那块。原谅LZ语言描述的苍白无力~

默认时候，和普通的EditText毫无区别，获取焦点时，hint上移，可以对其定制化操作，比如动态显示用户输入字数长度，或者输入是否合法等等，操作还是比较骚气的~

话说这里需要注明一点：

• 必须设置hint啊，亲么(原谅我多此一举)

=====================这是一条分界线，下面要正式撸码了======================

1. 引入依赖

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

2. 布局溜一眼

<android.support.design.widget.TextInputLayoutandroid:id="@+id/id_text_input"android:layout_width="match_parent"android:layout_height="wrap_content"app:counterTextAppearance="@color/blue"app:errorEnabled="true"app:hintAnimationEnabled="true"><EditTextandroid:layout_width="match_parent"android:layout_height="wrap_content"android:hint="请输入密码" /></android.support.design.widget.TextInputLayout>

简要说明下：

• app:hintAnimationEnabled=”true”： hint动画，默认开启，可设置关闭
  
  
• app:errorEnabled=”true”： 是否开启错误提示
  
  
• app:counterTextAppearance=”@color/blue”： 出现异常时hint颜色

那么布局中设置完毕后，怎么玩呢？继续瞅瞅~

3. 初始化 使用

        mTextInputLayout = (TextInputLayout) findViewById(R.id.id_text_input);// 开启计数mTextInputLayout.setCounterEnabled(true);// 设置合法最大输入mTextInputLayout.setCounterMaxLength(6);

现在一起来看下效果：

嗯哼，目前的效果是不是还不错？

这时候，有的小伙伴说了，当用户输入超出限制，我想给它一个提示，怎么搞？

俩步骚操作带你继续玩转

1. 定义TextWatcher监听类

    class MinLengthTextWatcher implements TextWatcher {private String mErrorMsg;private TextInputLayout mTextInputLayout;public MinLengthTextWatcher(TextInputLayout textInputLayout, String errorMsg) {this.mTextInputLayout = textInputLayout;this.mErrorMsg = errorMsg;}@Overridepublic void beforeTextChanged(CharSequence s, int start, int count, int after) {}@Overridepublic void onTextChanged(CharSequence s, int start, int before, int count) {}@Overridepublic void afterTextChanged(Editable s) {if (mTextInputLayout.getEditText().getText().toString().length() <= 6) {mTextInputLayout.setErrorEnabled(false);} else {mTextInputLayout.setErrorEnabled(true);mTextInputLayout.setError(mErrorMsg);}}}

1. 开启监听

        mTextInputLayout.getEditText().addTextChangedListener(new MinLengthTextWatcher(mTextInputLayout, "密码只能6位数"));

当然关于校验这块，可以直接采用上述骚操作，也可以在onclick提交时进行设置，并通过校验规则去动态设置errMsg即可。

好了，关于TextInputLayout使用暂时告一段落，下面开始分析源码操作。

TextInputLayout 源码分析

首先，我们先来了解下其内部继承关系：

public class TextInputLayout extends LinearLayout

这也算一个自定义View了，那么自定义View首先要做的就是继承并重写构造，那么接下来看下构造。

    public TextInputLayout(Context context) {this(context, null);}public TextInputLayout(Context context, AttributeSet attrs) {this(context, attrs, 0);}public TextInputLayout(Context context, AttributeSet attrs, int defStyleAttr) {// Can't call through to super(Context, AttributeSet, int) since it doesn't exist on API 10super(context, attrs);}

在这里，大家可以清晰的看到，三个构造。关于这里，LZ想说明一点，也是之前一个小哥儿们问的，为什么构造里前俩个都要写this？可能表述不是很清晰，下面单独摘出来，大家看下。

    this(context, null); this(context, attrs, 0);super(context, attrs);

这样做的好处便是，只要用户调用其中一个，都能将事件传递下去，So，清晰get到自定义View一点小技能~

我们接下来瞧瞧最终进行事件处理的家伙如何进行处理

    ThemeUtils.checkAppCompatTheme(context);static void checkAppCompatTheme(Context context) {TypedArray a = context.obtainStyledAttributes(APPCOMPAT_CHECK_ATTRS);final boolean failed = !a.hasValue(0);if (a != null) {a.recycle();}if (failed) {throw new IllegalArgumentException("You need to use a Theme.AppCompat theme "+ "(or descendant) with the design library.");}}

很明显，上来检测是否引用Theme或者Design包。接下来往下看

    setOrientation(VERTICAL); // 设置显示方向public void setOrientation(@OrientationMode int orientation) {if (mOrientation != orientation) {mOrientation = orientation;requestLayout(); // 自定义View中很有意思的一点}}

这里大家可以看到，设置显示方向后，随即调用requestLayout()去进行重新测量绘制自身View

setWillNotDraw(false);

而继续深入，便能看到官方对其进行简要说明：

    /*** If this view doesn't do any drawing on its own, set this flag to* allow further optimizations. By default, this flag is not set on* View, but could be set on some View subclasses such as ViewGroup.*/

LZ英文比较弱鸡，大致可翻译为：

如果当前View不在自身上进行绘制操作，那么就设置此flag可被优化。默认情况下，这个flag是不会被设置到View中，但是可以在一些子视图好比ViewGroup中进行相关设置。

当然了，这块简单理解下，也就是当我设置false之后，也就不在自身上进行绘制操作。

    setAddStatesFromChildren(true);

而这个却代表着将为子控件(children)添加状态。

而在接下来，new了帧布局并添加到当前容器中：

    mInputFrame = new FrameLayout(context);mInputFrame.setAddStatesFromChildren(true);addView(mInputFrame);

添加到View中后，便通过一个Helper进行设置相关属性，类如文本字体大小、位置以及文本对齐方式，源码如下：

    mCollapsingTextHelper.setTextSizeInterpolator(AnimationUtils.FAST_OUT_SLOW_IN_INTERPOLATOR);mCollapsingTextHelper.setPositionInterpolator(new AccelerateInterpolator());mCollapsingTextHelper.setCollapsedTextGravity(Gravity.TOP | GravityCompat.START);

而下面的代码就比较easy了，就是简单设置一些属性以及TextInputLayout特有的属性，也可以理解为属性默认值，关键代码如下：

    setErrorEnabled(errorEnabled);setCounterEnabled(counterEnabled);applyPasswordToggleTint(); // 应用密码根据不同状态显示对应颜色

关于setErrorEnabled，这里面需要说明一点，关键代码如上：

    ...if (Build.VERSION.SDK_INT >= 23&& mErrorView.getTextColors().getDefaultColor() == Color.MAGENTA) {// Caused by our theme not extending from Theme.Design*. On API 23 and// above, unresolved theme attrs result in MAGENTA rather than an exception.// Flag so that we use a decent defaultuseDefaultColor = true;}...

大致翻译为：

由于我们的主题不是引用自Theme.Design包中，在API23以及之上，未解决的主题attrs结果是红色而不是一个异常。

最终通过调用setAccessibilityDelegate()辅助功能类进行相关操作，例如查找节点或者事件相应等等。

那么到这里，我们再次回过头去看一下上面遇到的Helper是个什么鬼？

    static {DEBUG_DRAW_PAINT = DEBUG_DRAW ? new Paint() : null;if (DEBUG_DRAW_PAINT != null) {DEBUG_DRAW_PAINT.setAntiAlias(true);DEBUG_DRAW_PAINT.setColor(Color.MAGENTA);}}

static静态代码块会优先执行，方便之中还是要少使用为妙。

这里我们看到了Paint画笔，这个神器的东西，不等于null的时候，开启抗锯齿以及设置画笔颜色。

在Helpter构造中，初始化了如下参数：

    public CollapsingTextHelper(View view) {mView = view;mTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG | Paint.SUBPIXEL_TEXT_FLAG);mCollapsedBounds = new Rect();mExpandedBounds = new Rect();mCurrentBounds = new RectF();}

实例化了一个TextPaint以及实例化了3个矩形区域，那么这时候，有的小伙伴会问了，3个矩形是什么啊？

大家可以想一下，简洁明了的看，分为如下模块：

• 获取焦点时，hint往上动画移动；

• 开启长度校验后，文本右下角显示当前输入长度；

• 开启异常提醒后，文本左侧下方当用户输入不合法时，提示用户。

三个矩形所代表的含义如上，简单说明了。

其实到这里，本文也该差不多了，因为接下来的东西属于自定义View相关了，例如如何计算左上右下，以及动画，计算绘制以及真正开始draw，这些东西将在后续自定义View模块进行具体说明，有兴趣的可以了解下。

GitHub查看地址

https://github.com/HLQ-Struggle/MaterialDesignStudy

参考资料

1. 谷歌API：https://developer.android.google.cn/reference/android/support/design/widget/TextInputLayout.html；

后记

接下来，依然会继续学习有关Material Design部分，感谢大家查阅~

愿你我可以在Android路上走得更远。。。

赞赏

如果觉得LZ写的对你有所帮助 不妨赞助LZ喝点东西 多少LZ都不嫌弃 哇咔咔

border="0" width="330" height="86" src="//music.163.com/outchain/player?type=2&id=439915614&auto=1&height=66"></center></p>