android 圆形进度条的简单实现

最新推荐文章于 2024-08-13 17:44:23 发布

zhoushenxian

最新推荐文章于 2024-08-13 17:44:23 发布

阅读量3.4k

点赞数 3

分类专栏： android进度条系列 android

本文链接：https://blog.csdn.net/coderinchina/article/details/51829117

版权

本文将介绍如何在Android中实现圆形进度条效果，包括动态改变弧度、显示进度值以及双色弧度效果。通过Canvas绘图原理，逐步解析代码实现过程，适合有一定Android图形绘制基础的开发者阅读。

摘要由CSDN通过智能技术生成

在网上看了些进度条效果,于是就想写关于这方面博客,先看下今天要实现一些进度条的效果图：

当然要实现这些效果是基于你对canvas类绘制一些图形是了解的,否则估计也不好看懂,我尽量讲的详细点,

先从简单的画圆开始一步步把这个效果实现出来,这样几乎每个人都能看的懂,

画圆的代码：

package com.example.pbdemo;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
/**
 * Created by admin on 2016/7/5.
 */
public class MyProgressView extends View {
    private Paint mPaint;
    public MyProgressView(Context context) {
        this(context,null);
    }
    public MyProgressView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }
    public MyProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mPaint.setColor(Color.BLUE);//设置画笔的颜色
        mPaint.setStrokeWidth(8);//设置画笔的宽度
        mPaint.setAntiAlias(true);//设置看锯齿
        mPaint.setStyle(Paint.Style.STROKE);//设置成空心
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(100,100,80,mPaint);
    }
}

效果：

现在画个弧,示意图：

public class MyProgressView extends View {
    private Paint mPaint;
    public MyProgressView(Context context) {
        this(context,null);
    }
    public MyProgressView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }
    public MyProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mPaint.setColor(Color.BLUE);//设置画笔的颜色
        mPaint.setStrokeWidth(8);//设置画笔的宽度
        mPaint.setAntiAlias(true);//设置看锯齿
        mPaint.setStyle(Paint.Style.STROKE);//设置成空心
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(100,100,80,mPaint);
        RectF rectF = new RectF(20,20,180,180);
        mPaint.setColor(Color.YELLOW);
        canvas.drawArc(rectF,0,30,false,mPaint);
    }
}

效果图：

ok,现在就差让弧度进行动态的改变,这样就达到黄色所表示的弧度是动态的,这就有个简单的计算,比如进度条最大值是100,刚开始是0,每过1秒后+1,同时去刷新界面,那么弧度怎么算呢,你看当进度条最大值为100时,刚好弧度走一圈,一圈是360度,假如当前进度为10,那么它所表示弧度=10/100*360,那么现在就可以写代码了,根据这个思路

package com.example.pbdemo;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
/**
 * Created by admin on 2016/7/5.
 */
public class MyProgressView extends View {
    private static final String TAG ="MyProgressView" ;
    private Paint mPaint;//这是画圆所用的画笔
    private Paint anglePaint;//这是画弧的画笔
    private int startingDegree = 0;//开始弧度
    private int max = 100;
    private int progress;
    public MyProgressView(Context context) {
        this(context,null);
    }
    public MyProgressView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }
    public MyProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        anglePaint = new Paint();
        anglePaint.setStrokeWidth(8);
        anglePaint.setColor(Color.YELLOW);
        mPaint.setColor(Color.BLUE);//设置画笔的颜色
        mPaint.setStrokeWidth(8);//设置画笔的宽度
        mPaint.setAntiAlias(true);//设置看锯齿
        mPaint.setStyle(Paint.Style.STROKE);//设置成空心
        anglePaint.setStyle(Paint.Style.STROKE);//设置成空心
        anglePaint.setAntiAlias(true);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(100,100,80,mPaint);
        RectF rectF = new RectF(20,20,180,180);
        canvas.drawArc(rectF,getStartingDegree(),getProgressAngle(),false,anglePaint);