仿QQ图片高亮效果HaloProgressView

在社交软件中，经常看到图片的显示带有进度条或圆形光晕效果，不仅美观大方，还能有效反馈图片加载状态。今天，我们将探讨如何实现类似QQ的图片高亮效果，打造用户体验更佳的应用。

一、绘制圆角矩形

首先，我们需要创建一个圆角矩形，作为图片显示和进度条的范围。使用Canvas.clipPath()方法，我们可以轻松实现这一目标。

canvas.save();
canvas.clipPath(path); // path为圆角矩形的路径

二、绘制圆形光晕进度条

圆形光晕进度条由两个部分组成：一个实心圆圈和一个逐渐扩散的环形进度条。

// 绘制实心圆圈
canvas.drawCircle(centerX, centerY, radius, paint);

// 绘制环形进度条
RectF rectF = new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(strokeWidth);
canvas.drawArc(rectF, startAngle, sweepAngle, false, paint);

三、图片逐步显示的动画效果

接下来，我们需要实现图片逐步显示的动画效果。可以使用ValueAnimator来控制圆环的扩散进度。

ValueAnimator animator = ValueAnimator.ofFloat(0, 360);
animator.setDuration(duration);
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        sweepAngle = (float) animation.getAnimatedValue();
        invalidate(); // 刷新视图，触发onDraw()方法
    }
});
animator.start();

四、完整代码

以下为完整实现代码：

public class HaloProgressView extends View {

    // 圆形光晕进度条相关参数
    private float centerX, centerY, radius, startAngle = 0, sweepAngle = 0;
    private int strokeWidth;
    private Paint paint;

    // 图片相关参数
    private Bitmap bitmap;

    public HaloProgressView(Context context) {
        super(context);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.WHITE);
        strokeWidth = 20;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 绘制圆角矩形
        Path path = new Path();
        path.addRoundRect(new RectF(0, 0, getWidth(), getHeight()), radius, radius, Path.Direction.CW);
        canvas.save();
        canvas.clipPath(path);

        // 绘制圆形光晕进度条
        paint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(centerX, centerY, radius, paint);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(strokeWidth);
        RectF rectF = new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
        canvas.drawArc(rectF, startAngle, sweepAngle, false, paint);

        // 绘制图片
        if (bitmap != null) {
            canvas.drawBitmap(bitmap, null, new Rect(0, 0, getWidth(), getHeight()), null);
        }

        canvas.restore();
    }

    // 设置图片
    public void setBitmap(Bitmap bitmap) {
        this.bitmap = bitmap;
        invalidate(); // 刷新视图
    }
}

五、使用指南

使用HaloProgressView非常简单，只需将其添加到布局文件中，然后调用setBitmap()方法设置要显示的图片即可。

<com.example.haloprogressview.HaloProgressView
    android:id="@+id/haloProgressView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

HaloProgressView haloProgressView = findViewById(R.id.haloProgressView);
haloProgressView.setBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.image));

结语

通过以上步骤，我们成功实现了仿QQ的图片高亮效果。这种效果不仅美观大方，而且可以有效反馈图片加载状态，提升用户体验。在实际项目中，你可以根据自己的需要对该效果进行定制和扩展，打造更加个性化的交互体验。