Android环形进度条

分享一个环形进度条供大家参考，项目地址

https://download.csdn.net/download/weixin_40998254/10595267

效果如图

下面是该自定义进度条的代码，目前属于简陋版本，不过注释很详细，方便扩展。

首先是自定View的代码

/** * 作者：GJP on 2018/7/26 15:12 * 邮箱：xiaoxiao9575@126.com * 描述： */public class CircularProgressView extends View {    private Context mContext;    private Paint mPaint;    private int mProgress = 0;    private static int MAX_PROGRESS = 100;    /** * 弧度 */    private int mAngle;    /** * 中间的文字 */    private String mText;    /** * 外圆颜色 */    private int outRoundColor;    /** * 内圆的颜色 */    private int inRoundColor;    /** * 线的宽度 */    private int roundWidth;    private int style;    /*** 字体颜色*/    private int textColor;    /** * 字体大小 */    private float textSize;    /** * 字体是否加粗 */    private boolean isBold;    /** * 进度条颜色 */    private int progressBarColor;    public CircularProgressView(Context context) {        this(context, null);    }    public CircularProgressView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public CircularProgressView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr);        mContext = context;        init(attrs);    }    @TargetApi(21)    public CircularProgressView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {        super(context, attrs, defStyleAttr, defStyleRes);        mContext = context;        init(attrs);    }    /**     * 解析自定义属性     * @param attrs     */    public void init(AttributeSet attrs) {        mPaint = new Paint();        TypedArray typedArray = mContext.obtainStyledAttributes(attrs, R.styleable.CircleProgressBar);        outRoundColor = typedArray.getColor(R.styleable.CircleProgressBar_outCircleColor, getResources().getColor(R.color.colorPrimary));        inRoundColor = typedArray.getColor(R.styleable.CircleProgressBar_inCircleColor, getResources().getColor(R.color.colorPrimaryDark));        progressBarColor = typedArray.getColor(R.styleable.CircleProgressBar_progressColor, getResources().getColor(R.color.colorAccent));        isBold = typedArray.getBoolean(R.styleable.CircleProgressBar_textBold, false);        textColor = typedArray.getColor(R.styleable.CircleProgressBar_textColor, Color.BLACK);        roundWidth = typedArray.getDimensionPixelOffset(R.styleable.CircleProgressBar_lineWidth, 20);        typedArray.recycle();    }    @Override    protected void onDraw(Canvas canvas) { /** * 画外圆 */        super.onDraw(canvas);        int center = getWidth() / 2;//圆心        int radius = (center - roundWidth / 2);// 半径        mPaint.setColor(outRoundColor); //外圆颜色        mPaint.setStrokeWidth(roundWidth); //线的宽度        mPaint.setStyle(Paint.Style.STROKE); //空心圆        mPaint.setAntiAlias(true); //消除锯齿        canvas.drawCircle(center, center, radius, mPaint); //内圆        mPaint.setColor(inRoundColor);        radius = radius - roundWidth;        canvas.drawCircle(center, center, radius, mPaint); //画进度是一个弧线        mPaint.setColor(progressBarColor);        RectF rectF = new RectF(center - radius, center - radius, center + radius, center + radius);//圆弧范围的外接矩形        canvas.drawArc(rectF, -90, mAngle, false, mPaint);        canvas.save(); //平移画布之前保存之前画的        // 画进度终点的小球,旋转画布的方式实现        mPaint.setStyle(Paint.Style.FILL);        // 将画布坐标原点移动至圆心        canvas.translate(center, center);        // 旋转和进度相同的角度,因为进度是从-90度开始的所以-90度        canvas.rotate(mAngle - 90);        // 同理从圆心出发直接将原点平移至要画小球的位置        canvas.translate(radius, 0);        canvas.drawCircle(0, 0, roundWidth, mPaint);        // 画完之后恢复画布坐标        canvas.restore();        // 画文字将坐标平移至圆心        canvas.translate(center, center);        mPaint.setStrokeWidth(0);        mPaint.setColor(textColor);        if (isBold) { //字体加粗            mPaint.setTypeface(Typeface.DEFAULT_BOLD);        } if (!TextUtils.isEmpty(mText)) {            // 动态设置文字长为圆半径,计算字体大小            float textLength = mText.length();            textSize = radius / textLength;            mPaint.setTextSize(textSize);            // 将文字画到中间            float textWidth = mPaint.measureText(mText);            canvas.drawText(mText, -textWidth / 2, textSize / 2, mPaint);        }    }    public int getProgress() {        return mProgress;    }    /**     * 设置进度     * @return     */    public void setProgress(int p) {        if (p > MAX_PROGRESS) {            mProgress = MAX_PROGRESS;            mAngle = 360;        } else {            mProgress = p;            mAngle = 360 * p / MAX_PROGRESS;        }        //更新画布        invalidate();    }    public String getText() {        return mText;    }    /**     * 设置文本     * @param mText     */    public void setText(String mText) {        this.mText = mText;        invalidate();    }}

styles.xml中需要添加

再布局文件中引用的示例代码

Activity中具体控制进度

public class MainActivity extends AppCompatActivity {    private CircularProgressView progress_bar;    @SuppressLint("HandlerLeak")    private Handler handler = new Handler(){        @Override        public void handleMessage(Message msg) {            super.handleMessage(msg);            progress_bar.setProgress(msg.what);            progress_bar.setText(progress_bar.getProgress()+"%");            addProgress(msg.what);        }    };    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();    }    private void initView() {        progress_bar = (CircularProgressView) findViewById(R.id.progress_bar);        progress_bar.setProgress(0);        progress_bar.setText(progress_bar.getProgress()+"%");        addProgress(0);    }    private void addProgress(int i) {        if (i>=100){            i = 0;        }else {            ++i;        }        handler.sendEmptyMessageDelayed(i, 100);    }}

关于这个自定义的环形进度条没什么说的，代码注释很详细，使用方法都粘贴出来了，因为扩展起来很方便所以粘贴出来供大家参考和自己留作记录，如果有时间后续会发一个完善些的圆形进度条到GitHub上。

首先是自定View的代码

styles.xml中需要添加

再布局文件中引用的示例代码

Activity中具体控制进度

更多相关文章

随机推荐