自定义View实现环形进度,可自动循环及开始暂停

话不多说先上效果图

代码很简单,在这里奉上代码
以下是自定义的环形View
public class RoundRingView extends View {
    /*圆弧线宽*/
    private float circleBorderWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics());
    /*内边距*/
    private float circlePadding = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics());
    /*字体大小*/
    private float textSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 50, getResources().getDisplayMetrics());
    /*绘制圆周的画笔*/
    private Paint backCirclePaint;
    /*绘制圆周白色分割线的画笔*/
    private Paint linePaint;
    /*绘制文字的画笔*/
    private Paint textPaint;
    /*百分比*/
    public static int percent = 0;
    /*渐变圆周颜色数组*/
    private int[] gradientColorArray = new int[]{Color.GREEN, Color.parseColor("#fe751a"), Color.parseColor("#13be23"), Color.GREEN};
    private Paint gradientCirclePaint;
    public static boolean aotu=true;
    public static int current = 1;
    public static int pause=1;
    public RoundRingView(Context context) {
        super(context);
        init();
    }
    public RoundRingView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    public RoundRingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    private void init() {
        backCirclePaint = new Paint();
        backCirclePaint.setStyle(Paint.Style.STROKE);
        backCirclePaint.setAntiAlias(true);
        backCirclePaint.setColor(Color.LTGRAY);
        backCirclePaint.setStrokeWidth(circleBorderWidth);
//        backCirclePaint.setMaskFilter(new BlurMaskFilter(20, BlurMaskFilter.Blur.OUTER));
        gradientCirclePaint = new Paint();
        gradientCirclePaint.setStyle(Paint.Style.STROKE);
        gradientCirclePaint.setAntiAlias(true);
        gradientCirclePaint.setColor(Color.LTGRAY);
        gradientCirclePaint.setStrokeWidth(circleBorderWidth);
        linePaint = new Paint();
        linePaint.setColor(Color.WHITE);
        linePaint.setStrokeWidth(5);
        textPaint = new Paint();
        textPaint.setAntiAlias(true);
        textPaint.setTextSize(textSize);
        textPaint.setColor(Color.BLACK);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
        int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
        setMeasuredDimension(Math.min(measureWidth, measureHeight), Math.min(measureWidth, measureHeight));
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //1.绘制灰色背景圆环
        canvas.drawArc(
                new RectF(circlePadding * 2, circlePadding * 2,
                        getMeasuredWidth() - circlePadding * 2, getMeasuredHeight() - circlePadding * 2), -90, 360, false, backCirclePaint);
        //2.绘制颜色渐变圆环
        LinearGradient linearGradient = new LinearGradient(circlePadding, circlePadding,
                getMeasuredWidth() - circlePadding,
                getMeasuredHeight() - circlePadding,
                gradientColorArray, null, Shader.TileMode.MIRROR);
        gradientCirclePaint.setShader(linearGradient);
        gradientCirclePaint.setShadowLayer(10, 10, 10, Color.RED);
        canvas.drawArc(
                new RectF(circlePadding * 2, circlePadding * 2,
                        getMeasuredWidth() - circlePadding * 2, getMeasuredHeight() - circlePadding * 2), -90, (float) (percent / 100.0) * 360, false, gradientCirclePaint);
        //半径
        float radius = (getMeasuredWidth() - circlePadding * 3) / 2;
        //X轴中点坐标
        int centerX = getMeasuredWidth() / 2;
        //3.绘制100份线段,切分空心圆弧
        for (float i = 0; i < 360; i += 3.6) {
            double rad = i * Math.PI / 180;
            float startX = (float) (centerX + (radius - circleBorderWidth) * Math.sin(rad));
            float startY = (float) (centerX + (radius - circleBorderWidth) * Math.cos(rad));
            float stopX = (float) (centerX + radius * Math.sin(rad) + 1);
            float stopY = (float) (centerX + radius * Math.cos(rad) + 1);
            canvas.drawLine(startX, startY, stopX, stopY, linePaint);
        }
        //4.绘制文字
        float textWidth = textPaint.measureText(percent + "%");
        int textHeight = (int) (Math.ceil(textPaint.getFontMetrics().descent - textPaint.getFontMetrics().ascent) + 2);
        canvas.drawText(percent + "%", centerX - textWidth / 2, centerX + textHeight / 4, textPaint);
        setPercent(percent,aotu,current,pause);
    }
    /**
     * 设置百分比
     *
     * @param percent
     */
    public void setPercent(int percent,boolean aotuPlay,int currentPlay, int pausePlay) {
        if (pausePlay == 1){
            if (currentPlay == 1){
                percent++;
                if (percent < 0) {
                    percent = 0;
                } else if (percent > 100) {
                    percent = 100;
                }
                this.percent = percent;
                invalidate();
            }else{
                if (aotuPlay){
                    percent--;
                    if (percent < 0) {
                        percent = 0;
                    } else if (percent > 100) {
                        percent = 100;
                    } else if (percent == 0){
                        aotu=false;
                    }
                    this.percent = percent;
                    invalidate();
                }else if (!aotuPlay){
                    percent++;
                    if (percent < 0) {
                        percent = 0;
                    } else if (percent > 100) {
                        percent = 100;
                    } else if (percent == 100){
                        aotu=true;
                    }
                    this.percent = percent;
                    invalidate();
                }
            }
        }else {
            if (percent < 0) {
                percent = 0;
            } else if (percent > 100) {
                percent = 100;
            } else if (percent == 100){
                aotu=true;
            }
            this.percent = percent;
            invalidate();
        }
    }
}

然后在用到的Activity中直接用就行,例如

public class MainActivity extends AppCompatActivity {
    private int count = 1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
    private void initView() {
        findViewById(R.id.btnAotuPlay).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                RoundRingView.current = 2;
            }
        });
        findViewById(R.id.btnPause).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                count++;
                if (count % 2 == 0){
                    RoundRingView.pause = 2;
                }else{
                    RoundRingView.pause = 1;
                }
            }
        });
    }
}

布局文件也在这里贴出来,方便大家查看

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <com.example.jiatao.customroundringview.RoundRingView
        android:id="@+id/myView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="120dp"
        android:text="学习进度"
        android:textSize="30sp"/>
    <LinearLayout
        android:layout_marginTop="450dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <Button
            android:id="@+id/btnAotuPlay"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="自动循环"/>
        <Button
            android:id="@+id/btnPause"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="暂停"/>
    </LinearLayout>
</RelativeLayout>

这是以前参阅别人的代码写的,感觉不错,所以分享给大家,希望能帮助到大家

有不好的地方希望大家不要建议,也可以与我交流qq:931532656

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现倒计时圆形进度,你可以创建一个自定义View,使用 Canvas 和 Paint 来绘制圆形和进度条。以下是一个示例代码: ```java public class CountdownCircleView extends View { private int maxProgress = 100; // 总进度 private int progress = 100; // 当前进度 private int circleColor = Color.GRAY; // 圆形颜色 private int progressColor = Color.BLUE; // 进度条颜色 private Paint circlePaint; private Paint progressPaint; public CountdownCircleView(Context context) { super(context); init(); } public CountdownCircleView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); init(); } public CountdownCircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { circlePaint = new Paint(); circlePaint.setAntiAlias(true); circlePaint.setColor(circleColor); progressPaint = new Paint(); progressPaint.setAntiAlias(true); progressPaint.setColor(progressColor); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int viewWidth = getWidth(); int viewHeight = getHeight(); // 绘制圆形 int diameter = Math.min(viewWidth, viewHeight); int radius = diameter / 2; int centerX = viewWidth / 2; int centerY = viewHeight / 2; canvas.drawCircle(centerX, centerY, radius, circlePaint); // 绘制进度条 RectF rectF = new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius); float sweepAngle = 360f * progress / maxProgress; canvas.drawArc(rectF, -90, sweepAngle, true, progressPaint); } public void setMaxProgress(int maxProgress) { this.maxProgress = maxProgress; } public void setProgress(int progress) { this.progress = progress; invalidate(); // 重新绘制 } } ``` 你可以将上述代码放入你的 Android 项目中,并在布局文件中使用 `CountdownCircleView`。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值