簡單的圓形下載進度條

  1. 上截圖
  2. 代碼片段
    package org.zhx.rounprogress;
    
    
    import android.content.Context;
    import android.content.res.TypedArray;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.Path;
    import android.graphics.PathMeasure;
    import android.graphics.RectF;
    import android.graphics.Typeface;
    import android.util.AttributeSet;
    import android.util.Log;
    import android.view.View;
    
    /*
     * -----------------------------------------------------------------
     * Copyright (C) 2018-2020, by vogtec, All rights reserved.
     * -----------------------------------------------------------------
     * File: RoundProgress.java
     * Author: zhouxue
     * Version: 1.0
     * Create: 2018/5/25 14:23
     * Changes (from 2018/5/25)
     * -----------------------------------------------------------------
     * 2018/5/25 : Create RoundProgress.java (zhouxue);
     * -----------------------------------------------------------------
     */
    public class RoundProgress extends View {
        private String TAG=RoundProgress.class.getSimpleName();
        /**
         * 畫筆對象的引用
         */
        private Paint paint;
    
        /**
         * 圓環的顏色
         */
        private int roundColor;
    
        /**
         * 圓環進度的顏色
         */
        private int roundProgressColor;
    
        /**
         * 中間進度百分比的字符串的顏色
         */
        private int textColor;
    
        /**
         * 中間進度百分比的字符串的字體
         */
        private float textSize;
    
        /**
         * 圓環的寬度
         */
        private float roundWidth;
    
        /**
         * 最大進度
         */
        private int max;
    
        /**
         * 當前進度
         */
        private int progress;
        /**
         * 是否顯示中間的進度
         */
        private boolean textIsDisplayable;
    
        /**
         * 進度的風格,實心或者空心
         */
        private int style;
    
        public static final int STROKE = 0;
        public static final int FILL = 1;
    
        public RoundProgress(Context context) {
            this(context, null);
        }
    
        public RoundProgress(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public RoundProgress(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
    
            paint = new Paint();
    
    
            TypedArray mTypedArray = context.obtainStyledAttributes(attrs,
                    R.styleable.RoundProgressBar);
    
            //獲取自定義屬性和默認值 (可以在xml 文件裏 進行配置)
            roundColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.RED);
            roundProgressColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundProgressColor, Color.GREEN);
            textColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundtextColor, Color.GREEN);
            textSize = mTypedArray.getDimension(R.styleable.RoundProgressBar_roundtextSize, 15);
            roundWidth = mTypedArray.getDimension(R.styleable.RoundProgressBar_roundWidth, 5);
            max = mTypedArray.getInteger(R.styleable.RoundProgressBar_max, 100);
            textIsDisplayable = mTypedArray.getBoolean(R.styleable.RoundProgressBar_textIsDisplayable, true);
            style = mTypedArray.getInt(R.styleable.RoundProgressBar_style, 0);
    
            mTypedArray.recycle();
        }
    
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
    
            /**
             * 畫最外層的大圓環
             */
            int centre = getWidth()/2; //獲取圓心的x座標
            float dotWidth=4+roundWidth;// 圓弧上小圓點的半徑
            int radius = (int) (centre - roundWidth/2-dotWidth); //圓環的半徑
            paint.setColor(roundColor); //設置圓環的顏色
            paint.setStyle(Paint.Style.STROKE); //設置空心
            paint.setStrokeWidth(roundWidth); //設置圓環的寬度
            paint.setAntiAlias(true);  //消除鋸齒
            canvas.drawCircle(centre, centre, radius, paint); //畫出圓環
            /**
             * 畫進度百分比
             */
            paint.setStrokeWidth(0);
            paint.setColor(textColor);
            paint.setTextSize(textSize);
            paint.setTypeface(Typeface.DEFAULT_BOLD); //設置字體
    
    
            int percent = (int)(((float)progress / (float)max) * 100);  //中間的進度百分比,先轉換成float在進行除法運算,不然都爲0
            float textWidth = paint.measureText(percent + "%");   //測量字體寬度,我們需要根據字體的寬度設置在圓環中間
    //        Log.e("log", centre + "@@"+percent+"!!!"+(textIsDisplayable +"!"+(percent != 0) +(style == STROKE)));
            if(textIsDisplayable && percent != 0 && style == STROKE){
                canvas.drawText(percent + "%", centre - textWidth / 2, centre + textSize/2, paint); //畫出進度百分比
            }
    
    
            /**
             * 畫圓弧 ,畫圓環的進度
             */
    
            //設置進度是實心還是空心
            paint.setStrokeWidth(roundWidth); //設置圓環的寬度
            paint.setColor(roundProgressColor);  //設置進度的顏色
            RectF oval = new RectF(centre - radius, centre - radius, centre
                    + radius, centre + radius);  //用於定義的圓弧的形狀和大小的界限
    
            switch (style) {
                case STROKE:{
                    paint.setStyle(Paint.Style.STROKE);
                    canvas.drawArc(oval, 0, 360 * progress / max, false, paint);  //根據進度畫圓弧
                    break;
                }
                case FILL:{
                    paint.setStyle(Paint.Style.FILL_AND_STROKE);
                    if(progress !=0)
                        canvas.drawArc(oval, 0, 360 * progress / max, true, paint);  //根據進度畫圓弧
                    break;
                }
            }
            // 圓弧上的小圓點
            if(progress<max) {
                paint.setStyle(Paint.Style.FILL);
                //計算當前進度 在圓弧上的位置
                Path path = new Path();
                path.addArc(oval, 0, 360 * progress / max);
                PathMeasure measure = new PathMeasure(path, false);
                float[] floats = new float[2];
                measure.getPosTan(measure.getLength(), floats, null);
    
                //在當前進度末端 加上一個小圓點
    //            Log.e("!!!!!!!", floats[0] + "@@" + floats[1]);
                canvas.drawCircle(floats[0], floats[1], dotWidth,
                        paint);
            }
        }
    
    
        public synchronized int getMax() {
            return max;
        }
    
        /**
         * 設置進度的最大值
         * @param max
         */
        public synchronized void setMax(int max) {
            if(max < 0){
                throw new IllegalArgumentException("max not less than 0");
            }
            this.max = max;
        }
    
        /**
         * 獲取進度.需要同步
         * @return
         */
        public synchronized int getProgress() {
            return progress;
        }
    
        /**
         * 設置進度,此爲線程安全控件,由於考慮多線的問題,需要同步
         * 刷新界面調用postInvalidate()能在非UI線程刷新
         * @param progress
         */
        public synchronized void setProgress(int progress) {
            if(progress < 0){
                progress=0;
            }
            if(progress > max){
                progress = max;
            }
            if(progress <= max){
                this.progress = progress;
                Log.e(TAG, progress + "");
                postInvalidate();
            }
    
        }
    
    
        public int getCricleColor() {
            return roundColor;
        }
    
        public void setCricleColor(int cricleColor) {
            this.roundColor = cricleColor;
        }
    
        public int getCricleProgressColor() {
            return roundProgressColor;
        }
    
        public void setCricleProgressColor(int cricleProgressColor) {
            this.roundProgressColor = cricleProgressColor;
        }
    
        public int getTextColor() {
            return textColor;
        }
    
        public void setTextColor(int textColor) {
            this.textColor = textColor;
        }
    
        public float getTextSize() {
            return textSize;
        }
    
        public void setTextSize(float textSize) {
            this.textSize = textSize;
        }
    
        public float getRoundWidth() {
            return roundWidth;
        }
    
        public void setRoundWidth(float roundWidth) {
            this.roundWidth = roundWidth;
        }
    
    
    
    }
    

    4、下載demo 地址 https://github.com/zhoulinxue/RounProgress.git

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章