可以手动拖动的扇形进度条

最新推荐文章于 2023-06-09 14:35:00 发布

bb3413830

最新推荐文章于 2023-06-09 14:35:00 发布

阅读量965

点赞数

分类专栏：自定义文章标签：自定义view 扇形进度条可拖动

本文链接：https://blog.csdn.net/bb3413830/article/details/69396615

版权

自定义专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近公司需要做一个扇形可拖动进度条，如图：

在自定义view中有drawArc方法，可以进行画扇形，然后其中startAngle参数为设置起点，所以我们将起点设置到我们想要的角度，我设置到左下角。

sweepAngle为划过的角度，这个根据我们需要设置成我们想要的角度，

canvas.drawArc(this.mArcRectF, minRadian, mSeekBarDegree, false, mSeekbarProgressPaint);

从图中我们可以看到最外层大圈，我们需要画一个背景扇形，划过的一个扇形，和可拖动的Drawable，我们通过计算拖动的Drawable的宽高和当前扇形的弧度得出Drawable的位置。

private void setThumbPosition(double radian) {
        if(DEBUG) Log.v(TAG, "setThumbPosition radian = " + radian);


        double x = mSeekBarCenterX + mSeekBarRadius * Math.cos(radian);
        double y = mSeekBarCenterY + mSeekBarRadius * Math.sin(radian);
//        if(DEBUG) Log.v(TAG, "setThumbPosition radian = " + x + "$$$" + y);
        mThumbLeft = (float) (x - mThumbWidth / 2);
        mThumbTop = (float) (y - mThumbHeight / 2);
    }

其次就是我们需要在此view上加入手势：

@Override
    public boolean onTouchEvent(MotionEvent event) {
        float eventX = event.getX();
        float eventY = event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                seekTo(eventX, eventY, false);
                break ;

            case MotionEvent.ACTION_MOVE:
                seekTo(eventX, eventY, false);
                break ;

            case MotionEvent.ACTION_UP:
                seekTo(eventX, eventY, true);
                break ;
        }
        return true;
    }

根据手势中的x，y计算得出我们的弧度，大致思路是这个样子，文末会有demo地址，一定要注意弧度和角度的问题。

demo地址：

https://github.com/HeinzLip/EllipseSeekbar

大家多多star，谢谢