横向水波纹进度条的实现

2024-02-17 18:54:47

横向水波纹进度条的实现

背景
在构建用户界面时，进度条是一个常见且重要的元素。它可以直观地显示加载或进度的状态，使用户对当前任务的进展有清晰的了解。目前，网上有很多垂直的水波纹进度条的实现，但横向的相对较少。因此，我决定分享一个自定义View实现横向水波纹进度条的方法。

技术要点

自定义View：自定义View是一个安卓中重要的概念，它允许你创建自己的View组件。通过继承View类，你可以创建具有自定义外观和行为的组件。
Canvas：Canvas是一个绘图表面，允许你绘制各种形状和文本。在自定义View中，你可以使用Canvas来绘制水波纹进度条。
Paint：Paint是一个用于定义绘制属性的类。你可以使用Paint来设置线条颜色、粗细、填充颜色等属性。
Path：Path是一个用于定义绘制路径的类。你可以使用Path来创建波浪形路径。
PorterDuffXfermode：PorterDuffXfermode是一个用于定义混合模式的类。你可以使用PorterDuffXfermode来将两个绘制结果混合在一起。

实现步骤

创建一个自定义View类。
在自定义View类的构造函数中，初始化成员变量。
在自定义View类的onDraw()方法中，使用Canvas、Paint和Path来绘制水波纹进度条。
使用ValueAnimator来实现水波纹的动画效果。

示例代码

public class WaveSideView extends View {

    private Paint mPaint;
    private Path mPath;
    private PorterDuffXfermode mPorterDuffXfermode;
    private ValueAnimator mValueAnimator;

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

    public WaveSideView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public WaveSideView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.BLUE);

        mPath = new Path();

        mPorterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP);

        mValueAnimator = ValueAnimator.ofFloat(0, 1);
        mValueAnimator.setDuration(1000);
        mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        mValueAnimator.setRepeatMode(ValueAnimator.RESTART);
        mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                invalidate();
            }
        });
        mValueAnimator.start();
    }

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

        int width = getWidth();
        int height = getHeight();

        // 绘制背景
        canvas.drawRect(0, 0, width, height, mPaint);

        // 绘制水波纹
        float progress = mValueAnimator.getAnimatedFraction();
        float waveWidth = width * 0.1f;
        float waveHeight = height * 0.1f;
        float waveOffset = width * progress;

        mPath.reset();
        mPath.moveTo(0, height / 2);
        for (int i = 0; i < width; i++) {
            float x = i - waveOffset;
            float y = (float) (height / 2 + waveHeight * Math.sin(x / waveWidth * Math.PI * 2));
            mPath.lineTo(x, y);
        }
        mPath.lineTo(width, height);
        mPath.lineTo(0, height);
        mPath.close();

        int saveLayer = canvas.saveLayer(0, 0, width, height, null, Canvas.ALL_SAVE_FLAG);
        canvas.drawPath(mPath, mPaint);
        mPaint.setXfermode(mPorterDuffXfermode);
        canvas.drawRect(0, 0, width, height, mPaint);
        mPaint.setXfermode(null);
        canvas.restoreToCount(saveLayer);
    }
}