Question

布局文件里 TextInputLayout 里包含了 EditText，现在从加载 EditText 开始研究，TextInputLayout 里面重写了 addView，初始化的时候调用 updateEditTextMargin 设置上面需要预留的空间，用于 hint 做动画，再 setEditText 把 EditText 设置进去：

  @Override
  public void addView(View child, int index, ViewGroup.LayoutParams params) {
    if (child instanceof EditText) {
      setEditText((EditText) child);//初始化 EditText
      super.addView(child, 0, updateEditTextMargin(params));//
    } else {
      // Carry on adding the View...
      super.addView(child, index, params);
    }
  }

updateEditTextMargin 里面所做的操作，由于上面显示的内容不是 view，所以距离需要通过文字的高度计算，上面预留的位置为动画画笔的 ascent 高度，所以这里有点坑，这个高度没办法定制，而且外部没办法拿到，如果需要用到的话只能自己修改代码了。

  private LayoutParams updateEditTextMargin(ViewGroup.LayoutParams lp) {
    // Create/update the LayoutParams so that we can add enough top margin
    // to the EditText so make room for the label
    LayoutParams llp = lp instanceof LayoutParams ? (LayoutParams) lp : new LayoutParams(lp);

    if (mHintEnabled) {
      if (mTmpPaint == null) {
        mTmpPaint = new Paint();
      }
      mTmpPaint.setTypeface(mCollapsingTextHelper.getCollapsedTypeface());
      mTmpPaint.setTextSize(mCollapsingTextHelper.getCollapsedTextSize());
      llp.topMargin = (int) -mTmpPaint.ascent();//这里是上面提示文字的区域的高度 llp.topMargin
    } else {
      llp.topMargin = 0;
    }

    return llp;
  }

在 setEditText 里面初始化 EditText 相关的东西，以及 mCollapsingTextHelper 动画相关的参数，字体，字体大小等等。而且设置了一个 TextWatcher，用于监听字数的变化。

private void setEditText(EditText editText) {
    // If we already have an EditText, throw an exception
    if (mEditText != null) {
      throw new IllegalArgumentException("We already have an EditText, can only have one");
    }

    if (!(editText instanceof TextInputEditText)) {//建议使用 TextInputEditText
      Log.i(LOG_TAG, "EditText added is not a TextInputEditText. Please switch to using that"
          + " class instead.");
    }

    mEditText = editText;

    // Use the EditText's typeface, and it's text size for our expanded text
    mCollapsingTextHelper.setTypefaces(mEditText.getTypeface());
    mCollapsingTextHelper.setExpandedTextSize(mEditText.getTextSize());

    final int editTextGravity = mEditText.getGravity();
    mCollapsingTextHelper.setCollapsedTextGravity(
        Gravity.TOP | (editTextGravity & GravityCompat.RELATIVE_HORIZONTAL_GRAVITY_MASK));
    mCollapsingTextHelper.setExpandedTextGravity(editTextGravity);

    // Add a TextWatcher so that we know when the text input has changed
    mEditText.addTextChangedListener(new TextWatcher() {
      @Override
      public void afterTextChanged(Editable s) {
        updateLabelState(true);
        if (mCounterEnabled) {
          updateCounter(s.length());//监听内容数量
        }
      }

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

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

    // Use the EditText's hint colors if we don't have one set
    if (mDefaultTextColor == null) {//如果没有初始颜色，就是用 hint 的文字颜色
      mDefaultTextColor = mEditText.getHintTextColors();
    }

    // If we do not have a valid hint, try and retrieve it from the EditText, if enabled
    if (mHintEnabled && TextUtils.isEmpty(mHint)) {//初始化 hint
      setHint(mEditText.getHint());
      // Clear the EditText's hint as we will display it ourselves
      mEditText.setHint(null);
    }

    if (mCounterView != null) {//更新计数器
      updateCounter(mEditText.getText().length());
    }

    if (mIndicatorArea != null) {//下面错误提示的 view
      adjustIndicatorPadding();
    }

    // Update the label visibility with no animation
    updateLabelState(false);//更新上面提示
  }

addView 结束后再看看 onLayout 里面做了些啥，之前说过动画是在 CollapsingTextHelper 里面完成的，这里 onLayout 初始化 mCollapsingTextHelper 里面做动画的两个状态区域的大小，一个是展开的，一个是收起的，因为做动画是一般都使用文字生成 bitmap 后再进行缩放的，为什么是一般呢，因为特殊情况是不使用 bitmap 的后面介绍。

  @Override
  protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    super.onLayout(changed, left, top, right, bottom);

    if (mHintEnabled && mEditText != null) {
      final int l = mEditText.getLeft() + mEditText.getCompoundPaddingLeft();
      final int r = mEditText.getRight() - mEditText.getCompoundPaddingRight();
      
      //初始化 mCollapsingTextHelper 里展开时的矩形区域 ExpandedBounds
      mCollapsingTextHelper.setExpandedBounds(l,
          mEditText.getTop() + mEditText.getCompoundPaddingTop(),
          r, mEditText.getBottom() - mEditText.getCompoundPaddingBottom());

      // Set the collapsed bounds to be the the full height (minus padding) to match the
      // EditText's editable area
      //初始化 mCollapsingTextHelper 里收起时的矩形区域 CollapsedBounds
      mCollapsingTextHelper.setCollapsedBounds(l, getPaddingTop(),
          r, bottom - top - getPaddingBottom());

      mCollapsingTextHelper.recalculate();
    }
  }

onLayout 后，基本上就完成了初始化的工作了，显示的时候都是比较正常的，就是一个 EditTExt，来看看焦点改变的时候动画是怎么完成的，点击的时候 hint 文字会向上移动的动画，触发是在 refreshDrawableState 里面的 updateLabelState：

  @Override
  public void refreshDrawableState() {
    super.refreshDrawableState();
    // Drawable state has changed so see if we need to update the label
    updateLabelState(ViewCompat.isLaidOut(this));
  }

updateLabelState 是更新上面提示文本的状态，animate 参数是否有动画过渡，通过获取背景 drawable 的 statelist 判断当前的 focus 状态，再通过这个状态判断是否做动画。

  private void updateLabelState(boolean animate) {
    final boolean hasText = mEditText != null && !TextUtils.isEmpty(mEditText.getText());
    final boolean isFocused = arrayContains(getDrawableState(), android.R.attr.state_focused);
    final boolean isErrorShowing = !TextUtils.isEmpty(getError());

    if (mDefaultTextColor != null) {
      mCollapsingTextHelper.setExpandedTextColor(mDefaultTextColor.getDefaultColor());
    }

    if (mCounterOverflowed && mCounterView != null) {
      mCollapsingTextHelper.setCollapsedTextColor(mCounterView.getCurrentTextColor());
    } else if (isFocused && mFocusedTextColor != null) {
      mCollapsingTextHelper.setCollapsedTextColor(mFocusedTextColor.getDefaultColor());
    } else if (mDefaultTextColor != null) {
      mCollapsingTextHelper.setCollapsedTextColor(mDefaultTextColor.getDefaultColor());
    }

    if (hasText || isFocused || isErrorShowing) {
      // We should be showing the label so do so if it isn't already
      collapseHint(animate);//收起动画
    } else {
      // We should not be showing the label so hide it
      expandHint(animate);//展开动画
    }
  }

动画实现的流程如下图：

collapseHint 和 expandHint 基本上是一样的，只是最终的状态不一样，如果没有动画就直接调用 mCollapsingTextHelper.setExpansionFraction() 方法设置好最终状态；如果有动画，也是通过这个方法设置，只是在 UpdateListener 里面通过获取动画进行的百分比再设置对应的位置。

  private void collapseHint(boolean animate) {
    if (mAnimator != null && mAnimator.isRunning()) {
      mAnimator.cancel();
    }
    if (animate && mHintAnimationEnabled) {
      animateToExpansionFraction(1f);
    } else {
      mCollapsingTextHelper.setExpansionFraction(1f);
    }
  }

  private void expandHint(boolean animate) {
    if (mAnimator != null && mAnimator.isRunning()) {
      mAnimator.cancel();
    }
    if (animate && mHintAnimationEnabled) {
      animateToExpansionFraction(0f);
    } else {
      mCollapsingTextHelper.setExpansionFraction(0f);
    }
  }

  private void animateToExpansionFraction(final float target) {
    if (mCollapsingTextHelper.getExpansionFraction() == target) {
      return;
    }
    if (mAnimator == null) {
      mAnimator = ViewUtils.createAnimator();
      mAnimator.setInterpolator(AnimationUtils.LINEAR_INTERPOLATOR);
      mAnimator.setDuration(ANIMATION_DURATION);
      mAnimator.setUpdateListener(new ValueAnimatorCompat.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimatorCompat animator) {
          mCollapsingTextHelper.setExpansionFraction(animator.getAnimatedFloatValue());//动画过程调用相同的方法
        }
      });
    }
    mAnimator.setFloatValues(mCollapsingTextHelper.getExpansionFraction(), target);
    mAnimator.start();
  }

setExpansionFraction 比较简单的，设置了当前动画的百分比。

  /**
   * Set the value indicating the current scroll value. This decides how much of the
   * background will be displayed, as well as the title metrics/positioning.
   *
   * A value of {@code 0.0} indicates that the layout is fully expanded.
   * A value of {@code 1.0} indicates that the layout is fully collapsed.
   */
  void setExpansionFraction(float fraction) {
    fraction = MathUtils.constrain(fraction, 0f, 1f);//防止越界处理

    if (fraction != mExpandedFraction) {
      mExpandedFraction = fraction;
      calculateCurrentOffsets();
    }
  }

从上面 setExpansionFraction 一步步的调用过程： setExpansionFraction->calculateCurrentOffsets->calculateOffsets； 函数 calculateOffsets 通过传入的 fraction 计算当前画笔的 textsize，color，ShadowLayer 等参数。然后调用 postInvalidateOnAnimation 刷新界面。

private void calculateOffsets(final float fraction) {
    interpolateBounds(fraction);
    mCurrentDrawX = lerp(mExpandedDrawX, mCollapsedDrawX, fraction,
        mPositionInterpolator);
    mCurrentDrawY = lerp(mExpandedDrawY, mCollapsedDrawY, fraction,
        mPositionInterpolator);

    setInterpolatedTextSize(lerp(mExpandedTextSize, mCollapsedTextSize,
        fraction, mTextSizeInterpolator));

    if (mCollapsedTextColor != mExpandedTextColor) {
      // If the collapsed and expanded text colors are different, blend them based on the
      // fraction
      mTextPaint.setColor(blendColors(mExpandedTextColor, mCollapsedTextColor, fraction));
    } else {
      mTextPaint.setColor(mCollapsedTextColor);
    }

    mTextPaint.setShadowLayer(
        lerp(mExpandedShadowRadius, mCollapsedShadowRadius, fraction, null),
        lerp(mExpandedShadowDx, mCollapsedShadowDx, fraction, null),
        lerp(mExpandedShadowDy, mCollapsedShadowDy, fraction, null),
        blendColors(mExpandedShadowColor, mCollapsedShadowColor, fraction));

    ViewCompat.postInvalidateOnAnimation(mView);//更新界面
  }

补充一下，上面计算颜色使用的是这个函数，可以用来做两个颜色之间的渐变，对 A,R,G,B 分别做处理，原生系统也有这个 ArgbEvaluator，实现基本是一样的。

  private static int blendColors(int color1, int color2, float ratio) {
    final float inverseRatio = 1f - ratio;
    float a = (Color.alpha(color1) * inverseRatio) + (Color.alpha(color2) * ratio);
    float r = (Color.red(color1) * inverseRatio) + (Color.red(color2) * ratio);
    float g = (Color.green(color1) * inverseRatio) + (Color.green(color2) * ratio);
    float b = (Color.blue(color1) * inverseRatio) + (Color.blue(color2) * ratio);
    return Color.argb((int) a, (int) r, (int) g, (int) b);
  }

上面刷新界面就是会触发 draw 绘制，动画的最终实现是在 draw 里面，绘制分两种情况 ：

1、hint 文字收起和展开的文字大小差不多，即缩放比例为 1，使用 mTextPaint 绘制文字即可。

2、缩放的比例不为 1，则需要把 hint 文字生成 bitmap 再通过改变 bitmap 的区域大小进行缩放。：

public void draw(Canvas canvas) {
    final int saveCount = canvas.save();

    if (mTextToDraw != null && mDrawTitle) {
      float x = mCurrentDrawX;
      float y = mCurrentDrawY;
      //是否使用 Texture，其实是使用 bitmap
      final boolean drawTexture = mUseTexture && mExpandedTitleTexture != null;

      final float ascent;
      final float descent;
      if (drawTexture) {
        ascent = mTextureAscent * mScale;
        descent = mTextureDescent * mScale;
      } else {
        ascent = mTextPaint.ascent() * mScale;
        descent = mTextPaint.descent() * mScale;
      }

      if (DEBUG_DRAW) {//debug 打开后可以很明显地看到绘制的区域
        // Just a debug tool, which drawn a Magneta rect in the text bounds
        canvas.drawRect(mCurrentBounds.left, y + ascent, mCurrentBounds.right, y + descent,
            DEBUG_DRAW_PAINT);
      }

      if (drawTexture) {
        y += ascent;
      }

      if (mScale != 1f) {
        canvas.scale(mScale, mScale, x, y);
      }

      if (drawTexture) {
        // If we should use a texture, draw it instead of text
        canvas.drawBitmap(mExpandedTitleTexture, x, y, mTexturePaint);
      } else {
        canvas.drawText(mTextToDraw, 0, mTextToDraw.length(), x, y, mTextPaint);
      }
    }

    canvas.restoreToCount(saveCount);
  }

到这里动画的部分就介绍完了。接着介绍错误提示框是怎么加载进去的，通过 setErrorEnabled 可以设置是否显示错误提示，但是如果直接调用 setError(@Nullable final CharSequence error)，会默认调用 setErrorEnabled(true) 打开错误提示。

当设置为 true 的时候会先 new 一个 TextView 再把 textView 添加到底栏的 LinearLayout 里面。如果为 false 的话，会把 ErrorView 移除，移除。。所以如果 true 和 false 来回切，会导致布局跳动..这真是个大坑，视觉 UI 绝对不会允许这种跳跃：

public void setErrorEnabled(boolean enabled) {
    if (mErrorEnabled != enabled) {
      if (mErrorView != null) {
        ViewCompat.animate(mErrorView).cancel();
      }

      if (enabled) {
        mErrorView = new TextView(getContext());//new 一个 textview 显示错误内容
        try {
          mErrorView.setTextAppearance(getContext(), mErrorTextAppearance);
        } catch (Exception e) {
          // Probably caused by our theme not extending from Theme.Design*. Instead
          // we manually set something appropriate
          mErrorView.setTextAppearance(getContext(),
              R.style.TextAppearance_AppCompat_Caption);
          mErrorView.setTextColor(ContextCompat.getColor(
              getContext(), R.color.design_textinput_error_color_light));
        }
        mErrorView.setVisibility(INVISIBLE);
        ViewCompat.setAccessibilityLiveRegion(mErrorView,
            ViewCompat.ACCESSIBILITY_LIVE_REGION_POLITE);
        addIndicator(mErrorView, 0);//通过 addIndicator 添加 ErrorView
      } else {
        mErrorShown = false;
        updateEditTextBackground();
        removeIndicator(mErrorView);//移除 ErrorView
        mErrorView = null;
      }
      mErrorEnabled = enabled;
    }

addIndicator 里面用添加 view，index 为位置，如果为错误提示 View 的话就加到前面，如果为计数器的话就加到后面。这里也是简单的 LinearLayout 加载 View，不过如果设置了 margin 就会出现 error 文字偏移的问题，就像上面演示的图那种情况。所以这里可以改进，我这边的修改是 TextView 的 layoutParams 通过获取 EditText 的 layoutParams 来设置，让布局对齐。

  private void addIndicator(TextView indicator, int index) {
    if (mIndicatorArea == null) {
      mIndicatorArea = new LinearLayout(getContext());
      mIndicatorArea.setOrientation(LinearLayout.HORIZONTAL);
      addView(mIndicatorArea, LayoutParams.MATCH_PARENT,
          LayoutParams.WRAP_CONTENT);

      // Add a flexible spacer in the middle so that the left/right views stay pinned
      final Space spacer = new Space(getContext());
      final LayoutParams spacerLp = new LayoutParams(0, 0, 1f);
      //这里是添加下面错误提示 view，在这里需要把 edittext 的 layout_marginLeft 或者 layout_marginRight 计算进去
      //希望之后的版本能够改进
      mIndicatorArea.addView(spacer, spacerLp);

      if (mEditText != null) {
        adjustIndicatorPadding();
      }
    }
    mIndicatorArea.setVisibility(View.VISIBLE);
    mIndicatorArea.addView(indicator, index);
    mIndicatorsAdded++;
  }

setCounterEnabled 和上面 setErrorEnable 是一样的，这里就不再赘述了。至此，TextInputLayout 大部分相关的东西基本都介绍完了。