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);
}
}
}
