仿饿了么加入购物车旋转控件 - 自带闪转腾挪动画的按钮

, mWidth - mCircleWidth, mHeight - mCircleWidth);

canvas.drawRoundRect(rectF, mHintBgRoundValue, mHintBgRoundValue, mHintPaint);

//前景文字

mHintPaint.setColor(mHintFgColor);

// 计算Baseline绘制的起点X轴坐标

int baseX = (int) (mWidth / 2 - mHintPaint.measureText(mHintText) / 2);

// 计算Baseline绘制的Y坐标

int baseY = (int) ((mHeight / 2) - ((mHintPaint.descent() + mHintPaint.ascent()) / 2));

canvas.drawText(mHintText, baseX, baseY, mHintPaint);

} else {

//左边

//背景圆

if (mCount > 0) {

mDelPaint.setColor(mDelEnableBgColor);

} else {

mDelPaint.setColor(mDelDisableBgColor);

}

mDelPaint.setStrokeWidth(mCircleWidth);

mDelPath.reset();

mDelPath.addCircle(mLeft + mRadius, mTop + mRadius, mRadius, Path.Direction.CW);

mDelRegion.setPath(mDelPath, new Region(mLeft, mTop, mWidth - getPaddingRight(), mHeight - getPaddingBottom()));

canvas.drawPath(mDelPath, mDelPaint);

//前景 -

if (mCount > 0) {

mDelPaint.setColor(mDelEnableFgColor);

} else {

mDelPaint.setColor(mDelDisableFgColor);

}

mDelPaint.setStrokeWidth(mLineWidth);

canvas.drawLine(-mRadius / 2, 0,

+mRadius / 2, 0,

mDelPaint);

//数量

//是没有动画的普通写法,x left, y baseLine

canvas.drawText(mCount + “”, mLeft + mRadius * 2, mTop + mRadius - (mFontMetrics.top + mFontMetrics.bottom) / 2, mTextPaint);

//右边

//背景圆

if (mCount < mMaxCount) {

mAddPaint.setColor(mAddEnableBgColor);

} else {

mAddPaint.setColor(mAddDisableBgColor);

}

mAddPaint.setStrokeWidth(mCircleWidth);

float left = mLeft + mRadius * 2 + mGapBetweenCircle;

mAddPath.reset();

mAddPath.addCircle(left + mRadius, mTop + mRadius, mRadius, Path.Direction.CW);

mAddRegion.setPath(mAddPath, new Region(mLeft, mTop, mWidth - getPaddingRight(), mHeight - getPaddingBottom()));

canvas.drawPath(mAddPath, mAddPaint);

//前景 +

if (mCount < mMaxCount) {

mAddPaint.setColor(mAddEnableFgColor);

} else {

mAddPaint.setColor(mAddDisableFgColor);

}

mAddPaint.setStrokeWidth(mLineWidth);

canvas.drawLine(left + mRadius / 2, mTop + mRadius, left + mRadius / 2 + mRadius, mTop + mRadius, mAddPaint);

canvas.drawLine(left + mRadius, mTop + mRadius / 2, left + mRadius, mTop + mRadius / 2 + mRadius, mAddPaint);

}

根据isHintMode 布尔值变量，区分是绘制第二层(Hint层)或者第一层(加减按钮层)。

绘制第二层时没啥好说的，就是利用canvas.drawRoundRect，绘制圆角矩形，然后canvas.drawText绘制hint。

（如果圆角的值足够大，矩形的宽度足够小，就变成了圆形。）

绘制第一层时，要根据当前的数量选择不同的颜色，注意在绘制加减按钮的圆圈时，我们是用Path绘制的，这是因为我们还需要用Path构建Region类，这个类就是我们监听点击区域的重点。

点击事件的监听

在讲解动画之前，我们先说说如何监听点击的区域，因为本控件的动画是和加减数量息息相关的，而数量的加减是由点击相应”+ - 按钮”区域触发的。

所以我们的监听按钮的点击事件，其实就是监听相应的”+ - 按钮”区域。

上一节中，我们在绘制”+ - 按钮”区域时，通过Path，构建了两个Region类，Region类有个contains（int x, int y）方法如下，通过传入对应触摸的x、y坐标，就可知道知否点击了相应区域。

/**

Return true if the region contains the specified point

public native boolean contains(int x, int y);

知道了这一点，再写这部分代码就相当简单了：

@Override

public boolean onTouchEvent(MotionEvent event) {

int action = event.getAction();

switch (action) {

case MotionEvent.ACTION_DOWN:

//hint模式

if (isHintMode) {

onAddClick();

return true;

} else {

if (mAddRegion.contains((int) event.getX(), (int) event.getY())) {

onAddClick();

return true;

} else if (mDelRegion.contains((int) event.getX(), (int) event.getY())) {

onDelClick();

return true;

}

break;

case MotionEvent.ACTION_MOVE:

break;

case MotionEvent.ACTION_UP:

case MotionEvent.ACTION_CANCEL:

break;

}

return super.onTouchEvent(event);

}

hint模式时，我们可以认为控件所有范围都是“+”的有效区域。

而在非hint模式时，根据上一节构建的mAddRegion和mDelRegion去判断。

判断确认点击后，具体的操作，要根据业务的不同来编写了，设计到实际的购物车可能还有写数据库操作，或者请求接口等，要操作成功后才执行动画、或者修改count，这一块代码每个人写法可能不同。

使用时，可以重写onDelClick()和onAddClick()方法，并在合适的时机回调onCountAddSuccess()和onCountDelSuccess()以执行动画。

本文如下编写：

protected void onDelClick() {

if (mCount > 0) {

mCount–;

onCountDelSuccess();

}

protected void onAddClick() {

if (mCount < mMaxCount) {

mCount++;

onCountAddSuccess();

} else {

}

/**

数量增加成功后，使用者回调

public void onCountAddSuccess() {

if (mCount == 1) {

cancelAllAnim();

mAnimReduceHint.start();

} else {

mAnimFraction = 0;

invalidate();

}

/**

数量减少成功后，使用者回调

public void onCountDelSuccess() {

if (mCount == 0) {

cancelAllAnim();

mAniDel.start();

} else {

mAnimFraction = 0;

invalidate();

}

动画的实现

这里会用到两个变量：

//动画的基准值动画：减 0~1, 加 1~0

// 普通状态下是0

protected float mAnimFraction;

//提示语收缩动画 0-1 展开1-0

//普通模式时，应该是1，只在 isHintMode true 才有效

protected float mAnimExpandHintFraction;

依次分析有哪些动画：

Hint动画

主要是圆角矩形的展开、收缩。

固定right、bottom，当展开时，不断减少矩形的左起点left坐标值，则整个矩形宽度变大，呈现展开。收缩时相反。

代码：

//背景

mHintPaint.setColor(mHintBgColor);

RectF rectF = new RectF(mLeft + (mWidth - mRadius * 2) * mAnimExpandHintFraction, mTop

, mWidth - mCircleWidth, mHeight - mCircleWidth);

canvas.drawRoundRect(rectF, mHintBgRoundValue, mHintBgRoundValue, mHintPaint);

减按钮动画

看起来是旋转、位移、透明度。

那么对于背景的圆圈来说，我们只需要位移、透明度。因为它本身是个圆，就不要旋转了。

代码：

//动画 mAnimFraction ：减 0~1, 加 1~0 ,

//动画位移Max,

float animOffsetMax = (mRadius * 2 +mGapBetweenCircle);

//透明度动画的基准

int animAlphaMax = 255;

int animRotateMax = 360;

//左边

//背景圆

mDelPaint.setAlpha((int) (animAlphaMax * (1 - mAnimFraction)));

mDelPath.reset();

//改变圆心的X坐标，实现位移

mDelPath.addCircle(animOffsetMax * mAnimFraction + mLe
ft + mRadius, mTop + mRadius, mRadius, Path.Direction.CW);

canvas.drawPath(mDelPath, mDelPaint);

对于前景的“-”号来说，旋转、位移、透明度都需要做。

这里我们利用canvas.translate() canvas.rotate 做旋转和位移动画，别忘了 canvas.save()和 canvas.restore()恢复画布的状态。（透明度在上面已经设置过了。）

//前景 -

//旋转动画

canvas.save();

canvas.translate(animOffsetMax * mAnimFraction + mLeft + mRadius, mTop + mRadius);

canvas.rotate((int) (animRotateMax * (1 - mAnimFraction)));

canvas.drawLine(-mRadius / 2, 0,

+mRadius / 2, 0,

mDelPaint);

canvas.restore();

数量的动画

看起来也是旋转、位移、透明度。同样是利用canvas.translate() canvas.rotate 做旋转和位移动画。

//数量

canvas.save();

//平移动画

canvas.translate(mAnimFraction * (mGapBetweenCircle / 2 - mTextPaint.measureText(mCount + “”) / 2 + mRadius), 0);

//旋转动画,旋转中心点，x 是绘图中心,y 是控件中心

canvas.rotate(360 * mAnimFraction,

mGapBetweenCircle / 2 + mLeft + mRadius * 2 ,

mTop + mRadius);

//透明度动画

mTextPaint.setAlpha((int) (255 * (1 - mAnimFraction)));

//是没有动画的普通写法,x left, y baseLine

canvas.drawText(mCount + “”, mGapBetweenCircle / 2 - mTextPaint.measureText(mCount + “”) / 2 + mLeft + mRadius * 2, mTop + mRadius - (mFontMetrics.top + mFontMetrics.bottom) / 2, mTextPaint);

canvas.restore();

动画的定义：

动画是在View初始化时就定义好的，执行顺序：

数量增加，0-1时，先收缩Hint（第二层）mAnimReduceHint执行，完毕后执行减按钮（第一层）进入的动画mAnimAdd。
数量减少，1-0时，先执行减按钮退出的动画mAniDel，再伸展Hint动画mAnimExpandHint，完毕后，显示hint文字。

代码如下：

//动画 +

mAnimAdd = ValueAnimator.ofFloat(1, 0);

mAnimAdd.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

mAnimFraction = (float) animation.getAnimatedValue();

invalidate();

}

});

mAnimAdd.setDuration(350);

//提示语收缩动画 0-1

mAnimReduceHint = ValueAnimator.ofFloat(0, 1);

mAnimReduceHint.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

mAnimExpandHintFraction = (float) animation.getAnimatedValue();

invalidate();

}

});

mAnimReduceHint.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationEnd(Animator animation) {

if (mCount == 1) {

//然后底色也不显示了

isHintMode = false;

}

if (mCount == 1) {

Log.d(TAG, “现在还是1 开始收缩动画”);

if (mAnimAdd != null && !mAnimAdd.isRunning()) {

mAnimAdd.start();

}

@Override

public void onAnimationStart(Animator animation) {

if (mCount == 1) {

//先不显示文字了

isShowHintText = false;

}

});

mAnimReduceHint.setDuration(350);

//动画 -

mAniDel = ValueAnimator.ofFloat(0, 1);

mAniDel.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

mAnimFraction = (float) animation.getAnimatedValue();

invalidate();

}

});

//1-0的动画

mAniDel.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationEnd(Animator animation) {

if (mCount == 0) {

Log.d(TAG, “现在还是0onAnimationEnd() called with: animation = [” + animation + “]”);

if (mAnimExpandHint != null && !mAnimExpandHint.isRunning()) {

mAnimExpandHint.start();

}

});

mAniDel.setDuration(350);

//提示语展开动画

//分析这个动画，最初是个圆。就是left 不断减小

mAnimExpandHint = ValueAnimator.ofFloat(1, 0);

mAnimExpandHint.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

mAnimExpandHintFraction = (float) animation.getAnimatedValue();

invalidate();

}

});

mAnimExpandHint.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationEnd(Animator animation) {

if (mCount == 0) {

isShowHintText = true;

}

@Override

public void onAnimationStart(Animator animation) {

if (mCount == 0) {

isHintMode = true;

}

});

mAnimExpandHint.setDuration(350);

针对复用机制的处理

因为我们的购物车控件肯定会用在列表中，不管你用ListView还是RecyclerView，都会涉及到复用的问题。

复用给我们带来一个麻烦的地方就是，我们要处理好一些属性状态值，否则UI上会有问题。

可以从两处下手处理：

onMeasure

列表复用时，依然会回调onMeasure()方法，所以在这里初始化一些UI显示的参数。

这里顺带将适配wrap_content 的代码也一同贴上：

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

int wMode = MeasureSpec.getMode(widthMeasureSpec);

int wSize = MeasureSpec.getSize(widthMeasureSpec);

int hMode = MeasureSpec.getMode(heightMeasureSpec);

int hSize = MeasureSpec.getSize(heightMeasureSpec);

switch (wMode) {

case MeasureSpec.EXACTLY:

break;

case MeasureSpec.AT_MOST:

//不超过父控件给的范围内，自由发挥

int computeSize = (int) (getPaddingLeft() + mRadius * 2 +mGapBetweenCircle + mRadius * 2 + getPaddingRight() + mCircleWidth * 2);

wSize = computeSize < wSize ? computeSize : wSize;

break;

case MeasureSpec.UNSPECIFIED:

//自由发挥

computeSize = (int) (getPaddingLeft() + mRadius * 2 + mGapBetweenCircle + mRadius * 2 + getPaddingRight() + mCircleWidth * 2);

wSize = computeSize;

break;

}

switch (hMode) {

case MeasureSpec.EXACTLY:

break;

case MeasureSpec.AT_MOST:

int computeSize = (int) (getPaddingTop() + mRadius * 2 + getPaddingBottom() + mCircleWidth * 2);

hSize = computeSize < hSize ? computeSize : hSize;

break;

case MeasureSpec.UNSPECIFIED:

computeSize = (int) (getPaddingTop() + mRadius * 2 + getPaddingBottom() + mCircleWidth * 2);

hSize = computeSize;

break;

}

setMeasuredDimension(wSize, hSize);

//复用时会走这里，所以初始化一些UI显示的参数

mAnimFraction = 0;

initHintSettings();

}

/**

根据当前count数量初始化 hint提示语相关变量

private void initHintSettings() {

if (mCount == 0) {

isHintMode = true;

isShowHintText = true;

mAnimExpandHintFraction = 0;

} else {

isHintMode = false;

isShowHintText = false;

mAnimExpandHintFraction = 1;

}

在改变count时

一般在onBindViewHolder()或者getView()时，都会对本控件重新设置count值，count改变时，当然也是需要根据count进行属性值的调整。

且此时如果View正在做动画，应该停止这些动画。

/**

设置当前数量
@param count
@return

public AnimShopButton setCount(int count) {

mCount = count;

//先暂停所有动画

if (mAnimAdd != null && mAnimAdd.isRunning()) {

mAnimAdd.cancel();

}

if (mAniDel != null && mAniDel.isRunning()) {

mAniDel.cancel();

}

//复用机制的处理

if (mCount == 0) {

// 0 不显示数字和-号

mAnimFraction = 1;

} else {

mAnimFraction = 0;

}

initHintSettings();

return this;

}

总结

–

代码传送门：喜欢的话，随手点个star。多谢

https://github.com/mcxtzhang/AnimShopButton

想经济上支持我 or 想通过视频看我是怎么实现的:

http://edu.csdn.net/course/detail/3898

我在实现这个控件时，觉得难度相对大的地方在于做动画时，“-”按钮和数量的旋转动画，如何确定正确的坐标值。因为将text绘制的居中本身就有一些注意事项在里面，再涉及到动画，难免蒙圈。需要多计算，多试验。

还有就是观察饿了么的效果，将hint区域的动画利用改变RoundRect的宽度去实现。起初没有想到，也是思考了一会如何去做。这是属于分析、拆解动画遇到的问题。

除了绘制以外的重点是：

利用Region监听区域点击事件。
复用的列表，如何正确显示UI。
动画次序以及考虑到复用时，在合适的地方取消动画。

最后

小编这些年深知大多数初中级Android工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

资料⬅专栏获取
imFraction = 0;

}

initHintSettings();

return this;

}

总结

–

代码传送门：喜欢的话，随手点个star。多谢

https://github.com/mcxtzhang/AnimShopButton

想经济上支持我 or 想通过视频看我是怎么实现的:

http://edu.csdn.net/course/detail/3898

除了绘制以外的重点是：

利用Region监听区域点击事件。
复用的列表，如何正确显示UI。
动画次序以及考虑到复用时，在合适的地方取消动画。

最后

小编这些年深知大多数初中级Android工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

[外链图片转存中…(img-RbTcTwdo-1719097483595)]一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

资料⬅专栏获取