Android Study Material Design 六之：TextInputLayout学习及分析部分源码

程序员文章站 2022-03-11 11:06:19

...

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

前言

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

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

老规矩 - 放图

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

Android Study 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.TextInputLayout
    android: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">

    <EditText
        android: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);

现在一起来看下效果：

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

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

俩步骚操作带你继续玩转

定义TextWatcher监听类

    class MinLengthTextWatcher implements TextWatcher {

        private String mErrorMsg;
        private TextInputLayout mTextInputLayout;

        public MinLengthTextWatcher(TextInputLayout textInputLayout, String errorMsg) {
            this.mTextInputLayout = textInputLayout;
            this.mErrorMsg = errorMsg;
        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {

        }

        @Override
        public void afterTextChanged(Editable s) {
            if (mTextInputLayout.getEditText().getText().toString().length() <= 6) {
                mTextInputLayout.setErrorEnabled(false);
            } else {
                mTextInputLayout.setErrorEnabled(true);
                mTextInputLayout.setError(mErrorMsg);
            }
        }
    }

开启监听

        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 10
        super(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 default
        useDefaultColor = 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

参考资料

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

后记

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

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

赞赏

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

相关标签： material-design TextInput

上一篇：微信小程序----自定义组件

下一篇： JSP自定义标签

Android Study Material Design 六 之：TextInputLayout学习及分析部分源码

前言