Android实现仿iOS图标下载View动画效果

2401_85112655

于 2024-05-18 22:35:38 发布

阅读量722

点赞数 30

分类专栏：程序员文章标签： android 学习经验分享

本文链接：https://blog.csdn.net/2401_85112655/article/details/139032723

版权

程序员专栏收录该内容

28 篇文章

订阅专栏

完整的代码请看：

https://github.com/xiaweizi/DownloadLoadingView

功能分析

面对这样的需要应该怎么实现呢？其实实现的方式可能不止我想的这种，我就讲述一下我是如何处理的。

预览图

首先，可以分成三部分：

半透明的背景
全透明的环
实心全透明的弧

那怎么实现背景半透明，而圆环和弧又是全透明的。顿时有个想法，要是两张图片重叠的部分能被抠出掉，也就是变成全透明，那岂不是非常容易就实现了。

圆环和弧既然是盖在了背景上，理当直接变成透明。那 Android 有对应处理的 API吗？答案是肯定的。 setXfermode() 用于设置图像的过度模式，其中 PorterDuff.Mode.CLEAR 为清除模式则可以实现上述的效果。

具体实现

一系列的初始化

public DownloadLoadingView(Context context, AttributeSet attrs) {

super(context, attrs);

TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.DownloadLoadingView);

mRadius = typedArray.getDimension(R.styleable.DownloadLoadingView_radius, RADIUS_DEFAULT);

mStrokeWidth = typedArray.getDimension(R.styleable.DownloadLoadingView_strokeWidth, STROKE_WIDTH_DEFAULT);

mMaxProgress = typedArray.getInteger(R.styleable.DownloadLoadingView_maxProgress, MAX_PROGRESS_DEFAULT);

mRoundRadius = typedArray.getDimension(R.styleable.DownloadLoadingView_roundRadius, ROUND_RADIUS_DEFAULT);

mBackgroundColor = typedArray.getColor(R.styleable.DownloadLoadingView_backgroundColor, getResources().getColor(R.color.bg_default));

Log.i(TAG, “radius:” + mRadius);

typedArray.recycle();

setLayerType(View.LAYER_TYPE_SOFTWARE, null);//关闭硬件加速

paint = new Paint(Paint.ANTI_ALIAS_FLAG);

}

记得需要关闭硬件加速，不然会没有效果。

绘制背景

paint.setColor(mBackgroundColor);

paint.setStyle(Paint.Style.FILL);

RectF round = new RectF(0, 0, getWidth(), getHeight());

canvas.drawRoundRect(round, mRoundRadius, mRoundRadius, paint);

设置背景颜色，样式为填充，绘制圆角矩形

设置背景颜色，样式为填充，绘制圆角矩形

绘制圆环

paint.setColor(Color.RED);

paint.setStrokeWidth(mStrokeWidth);

// 采用 clear 的方式

paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

paint.setStyle(Paint.Style.STROKE);

canvas.drawCircle(getWidth() / 2, getHeight() / 2, mRadius, paint);

圆环的颜色可以随意设置，毕竟最后会被抠除掉，

设置 PorterDuff.Mode.CLEAR 类型模式绘制圆环

绘制圆

paint.setStyle(Paint.Style.FILL);float sweepAngle = 360 * mProgress / mMaxProgress;RectF rectF = new RectF(getWidth() / 2 - mRadius, getHeight() / 2 - mRadius, getWidth() / 2 + mRadius, getHeight() / 2 + mRadius);canvas.drawArc(rectF, -90, sweepAngle, true, paint);// 记得设置为 null 不然会没有效果paint.setXfermode(null);