123.gif

提要

首先我们分析效果图 达成的效果 输入框有数值的时候，绘制hint的文字在顶部，当输入框没有数值的时候将绘制的文字去掉，并且过程中插入一个向下/向上的一个移动动画。

准备工作

首先定义需要的量

public static final float TEXT_SIZE = Utils.dpTopx(12);//绘制的hint的文字大小
public static final float TEXT_MARGIN = Utils.dpTopx(8);//绘制的hint文本的缩进距离
public static final int TEXT_VERTICAL_OFFSET = (int) Utils.dpTopx(22);//绘制的hint文字水平偏移
public static final int TEXT_HORIZONTAL_OFFSET = (int) Utils.dpTopx(5);//绘制的hint文字垂直方向偏移
public static final int TEXT_ANIMATION_OFFSET = (int) Utils.dpTopx(16);//动画的移动幅度
boolean floatingLableShow;//当前状态：是否显示上部的hint文字

Rect boundPading;//用于获取pading
float floatingLableFraction = 0;//动画执行的进度
private boolean useFloatingLabel = true;//是否使用MD效果
ObjectAnimator animator;//动画对象
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);//绘制文字的画笔

初始化

{
      paint.setTextSize(TEXT_SIZE);
}
public MaterialEditText(Context context, AttributeSet attrs) {
    super(context, attrs);
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MaterialEditText);
    useFloatingLabel = typedArray.getBoolean(R.styleable.MaterialEditText_useFloatingLabel, true);//获取attr中声明的值，如果不需要在xml中设置属性，可以跳过此步骤
    typedArray.recycle(); // 回收
  }

Hint文字的绘制

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    paint.setAlpha((int) (0xff * floatingLableFraction));//根据动画执行的进度设置画笔的透明度
    float extraOffset = TEXT_ANIMATION_OFFSET * (1 - floatingLableFraction);//根据动画的执行进度获取水平方向上的偏移量

    if (useFloatingLabel) {
      canvas.drawText(
          (String) getHint(), TEXT_HORIZONTAL_OFFSET, TEXT_VERTICAL_OFFSET + extraOffset, paint);//绘制文字，绘制时候根据动画进度可以变化水平位置
    }
  }

动画

private ObjectAnimator getAninator() {
    if (animator == null) {
      animator = ObjectAnimator.ofFloat(MaterialEditText.this, "floatingLableFraction", 0, 1);
    }
    return animator;
  }

布局重新测量

private void onUseFloatLableChanged() {

    if (useFloatingLabel) {
      setPadding(
          getPaddingLeft(),
          (int) (boundPading.top + TEXT_SIZE + TEXT_MARGIN),//显示的时候，将布局向上排
          getPaddingRight(),
          getPaddingBottom());

    } else {
      setPadding(getPaddingLeft(), (boundPading.top), getPaddingRight(), getPaddingBottom());//不使用时候则将padding恢复原始状态
    }
  }

  public void setUseFloatingLabel(boolean useFloatingLabel) {

    if (this.useFloatingLabel != useFloatingLabel) {
      this.useFloatingLabel = useFloatingLabel;//当状态改变时候
      onUseFloatLableChanged();//应用变化
    }
    requestLayout(); // 重新测量
  }

设置监听器

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

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

            if (useFloatingLabel) {

              if (floatingLableShow && TextUtils.isEmpty(s)) {
                floatingLableShow = !floatingLableShow;
                getAninator().reverse();//逆向执行动画

              } else if (!floatingLableShow && !TextUtils.isEmpty(s)) {
                floatingLableShow = !floatingLableShow;
                getAninator().start();
              }
            }
          }

          @Override
          public void afterTextChanged(Editable s) {}
        });

Tips

• 为什么获取paddingTop使用boundPading.top而不会使用getPaddingTop?
  因为此View中，Padding并不是一个定值，每次setPadding的时候，都会进行改变,所以要将Padding恢复的时候，要涉及到一个累减的一个问题，而从background中获取的bounds是一个定值，所以可以有效避免复杂的计算。

• getAninator().start();和getAninator().reverse();啥玩意还能这样子操作？？？
  使用getAninator()可以避免重复构造动画对象避免性能损失，start表示的是动画的正方向执行，reverse表示倒叙执行

完整代码

public class MaterialEditText extends AppCompatEditText {
  private static final String TAG = "MaterialEditText";

  public static final float TEXT_SIZE = Utils.dpTopx(12);

  public static final float TEXT_MARGIN = Utils.dpTopx(8);
  public static final int TEXT_VERTICAL_OFFSET = (int) Utils.dpTopx(22);
  public static final int TEXT_HORIZONTAL_OFFSET = (int) Utils.dpTopx(5);
  public static final int TEXT_ANIMATION_OFFSET = (int) Utils.dpTopx(16);

  Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

  boolean floatingLableShow;

  ObjectAnimator animator;

  Rect boundPading;
  float floatingLableFraction = 0;
  private boolean useFloatingLabel = true;

  {
    paint.setTextSize(TEXT_SIZE);
    boundPading = getBackground().getBounds();

    setPadding(
        getPaddingLeft(),
        (int) (boundPading.top + TEXT_SIZE + TEXT_MARGIN),
        getPaddingRight(),
        getPaddingBottom());

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

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

            if (useFloatingLabel) {

              if (floatingLableShow && TextUtils.isEmpty(s)) {
                floatingLableShow = !floatingLableShow;
                getAninator().reverse();

              } else if (!floatingLableShow && !TextUtils.isEmpty(s)) {
                floatingLableShow = !floatingLableShow;
                getAninator().start();
              }
            }
          }

          @Override
          public void afterTextChanged(Editable s) {}
        });
  }

  public MaterialEditText(Context context, AttributeSet attrs) {
    super(context, attrs);
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MaterialEditText);
    useFloatingLabel = typedArray.getBoolean(R.styleable.MaterialEditText_useFloatingLabel, true);
    typedArray.recycle(); // 回收
  }

  public float getFloatingLableFraction() {
    return floatingLableFraction;
  }

  public void setFloatingLableFraction(float floatingLableFraction) {
    this.floatingLableFraction = floatingLableFraction;
    invalidate();
  }

  private void onUseFloatLableChanged() {

    if (useFloatingLabel) {
      setPadding(
          getPaddingLeft(),
          (int) (boundPading.top + TEXT_SIZE + TEXT_MARGIN),
          getPaddingRight(),
          getPaddingBottom());

    } else {
      setPadding(getPaddingLeft(), (boundPading.top), getPaddingRight(), getPaddingBottom());
    }
  }

  public void setUseFloatingLabel(boolean useFloatingLabel) {

    if (this.useFloatingLabel != useFloatingLabel) {
      this.useFloatingLabel = useFloatingLabel;
      onUseFloatLableChanged();
    }
    requestLayout(); // 重新测量
  }

  private ObjectAnimator getAninator() {
    if (animator == null) {
      animator = ObjectAnimator.ofFloat(MaterialEditText.this, "floatingLableFraction", 0, 1);
    }
    return animator;
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    paint.setAlpha((int) (0xff * floatingLableFraction));
    float extraOffset = TEXT_ANIMATION_OFFSET * (1 - floatingLableFraction);

    if (useFloatingLabel) {
      canvas.drawText(
          (String) getHint(), TEXT_HORIZONTAL_OFFSET, TEXT_VERTICAL_OFFSET + extraOffset, paint);
    }
  }
}