Android 自定义加载进度框

最新推荐文章于 2023-07-06 16:28:01 发布

飞曼巴

最新推荐文章于 2023-07-06 16:28:01 发布

阅读量724

点赞数

分类专栏： Android 文章标签： android canvas

本文链接：https://blog.youkuaiyun.com/silencezmz/article/details/78827249

版权

Android 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种自定义的圆形进度条控件实现方法，通过继承View并重写onLayout和onDraw方法来绘制不同样式的圆环。支持配置圆环的宽度、颜色、断点数量等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：

自定义控件继承View 实现onLayout(),onDraw()方法获取控件的大小Canvas类绘制样式传入参数改变进度框的样式状态

//实现三个方法默认调用最多参数的一个
public SuperCircleView(Context context) {
    this(context, null);
}

public SuperCircleView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public SuperCircleView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

//配置传入的参数 初始化画笔
public SuperCircleView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.SuperCircleView);
    mMinRadio = a.getInteger(R.styleable.SuperCircleView_min_circle_radio, 400);
    mRingWidth = a.getFloat(R.styleable.SuperCircleView_ring_width, 40);
    mSelect = a.getInteger(R.styleable.SuperCircleView_select, 7);
    mSelectAngle = a.getInteger(R.styleable.SuperCircleView_selec_angle, 3);

    mMinCircleColor = a.getColor(R.styleable.SuperCircleView_circle_color, Color.WHITE);
    mMaxCircleColor = a.getColor(R.styleable.SuperCircleView_max_circle_color, context.getResources().getColor(R.color.huise2));
    mRingNormalColor = a.getColor(R.styleable.SuperCircleView_ring_normal_color, context.getResources().getColor(R.color.huise));

    isShowSelect = a.getBoolean(R.styleable.SuperCircleView_is_show_select, false);
    mSelectRing = a.getInt(R.styleable.SuperCircleView_ring_color_select, 0);
    a.recycle();

    mMinRadio = ConvertDpAndPx.Dp2Px(context, mMinRadio);
    mRingWidth = ConvertDpAndPx.Dp2Px(context, mRingWidth);
    mSelect = ConvertDpAndPx.Dp2Px(context, mSelect);
    mSelectAngle = ConvertDpAndPx.Dp2Px(context, mSelectAngle);

    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setAntiAlias(true);

    this.setWillNotDraw(false);

    this.color[0] = Color.parseColor("#4D993B");
    this.color[2] = Color.parseColor("#4D993B");
    this.color[1] = Color.parseColor("#4D993B");
}

获取自定义控件的宽高、设置画笔

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    super.onLayout(changed, left, top, right, bottom);
    mViewWidth = getMeasuredWidth();
    mViewHeight = getMeasuredHeight();
    mViewCenterX = mViewWidth / 2;
    mViewCenterY = mViewHeight / 2;

    mRectF = new RectF(mViewCenterX - mMinRadio - mRingWidth / 2, mViewCenterY - mMinRadio - mRingWidth / 2,
            mViewCenterX + mMinRadio + mRingWidth / 2, mViewCenterY + mMinRadio + mRingWidth / 2);

    mRingAngleWidth = (360 - mSelect * mSelectAngle) / mSelect;

    mRectF1 = new RectF(mViewCenterX - mMinRadio, mViewCenterY - mMinRadio,
            mViewCenterX + mMinRadio, mViewCenterY + mMinRadio);

}

绘制图像

    @Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    /**
     * 显示彩色断大于总共的段数是错误的
     */
    if (isShowSelect && mSelectRing > mSelect) {
        return;
    }

    mPaint.setColor(mMinCircleColor);
    //        canvas.drawCircle(mViewCenterX, mViewCenterY, mMinRadio, mPaint);
    //画默认圆环
    drawNormalRing(canvas);
    //        //画灰色描边圆环
    //        drawNormalStrokeRing(canvas);
    //画彩色圆环
    drawColorRing(canvas);
}



    import android.content.Context;
    import android.content.res.TypedArray;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.RectF;
    import android.graphics.SweepGradient;
    import android.util.AttributeSet;
    import android.util.Log;
    import android.view.View;

    import com.growing.train.R;
    import com.growing.train.common.utils.ConvertDpAndPx;


    public class SuperCircleView extends View {

        private final String TAG = "SuperCircleView";

        private int mViewWidth; //view的宽
        private int mViewHeight;    //view的高
        private int mViewCenterX;   //view宽的中心点
        private int mViewCenterY;   //view高的中心点
        private int mMinRadio; //最里面白色圆的半径
        private float mRingWidth; //圆环的宽度
        private int mSelect;    //分成多少段
        private int mSelectAngle;   //每个圆环之间的间隔
        private int mMinCircleColor;    //最里面圆的颜色
        private int mMaxCircleColor;    //最外面圆的颜色
        private int mRingNormalColor;    //默认圆环的颜色
        private Paint mPaint;
        private int color[] = new int[3];   //渐变颜色
        private float mRingAngleWidth;  //每一段的角度
        private RectF mRectF; //圆环的矩形区域
        private RectF mRectF1; //圆环描边矩形区域
        private int mSelectRing = 100;        //要显示几段彩色
        private boolean isShowSelect = false;   //是否显示断

        public SuperCircleView(Context context) {
            this(context, null);
        }

        public SuperCircleView(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }

        public SuperCircleView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.SuperCircleView);
            mMinRadio = a.getInteger(R.styleable.SuperCircleView_min_circle_radio, 400);
            mRingWidth = a.getFloat(R.styleable.SuperCircleView_ring_width, 40);
            mSelect = a.getInteger(R.styleable.SuperCircleView_select, 7);
            mSelectAngle = a.getInteger(R.styleable.SuperCircleView_selec_angle, 3);

            mMinCircleColor = a.getColor(R.styleable.SuperCircleView_circle_color, Color.WHITE);
            mMaxCircleColor = a.getColor(R.styleable.SuperCircleView_max_circle_color, context.getResources().getColor(R.color.huise2));
            mRingNormalColor = a.getColor(R.styleable.SuperCircleView_ring_normal_color, context.getResources().getColor(R.color.huise));

            isShowSelect = a.getBoolean(R.styleable.SuperCircleView_is_show_select, false);
            mSelectRing = a.getInt(R.styleable.SuperCircleView_ring_color_select, 0);
            a.recycle();

            mMinRadio = ConvertDpAndPx.Dp2Px(context, mMinRadio);
            mRingWidth = ConvertDpAndPx.Dp2Px(context, mRingWidth);
            mSelect = ConvertDpAndPx.Dp2Px(context, mSelect);
            mSelectAngle = ConvertDpAndPx.Dp2Px(context, mSelectAngle);

            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mPaint.setAntiAlias(true);

            this.setWillNotDraw(false);

            this.color[0] = Color.parseColor("#4D993B");
            this.color[2] = Color.parseColor("#4D993B");
            this.color[1] = Color.parseColor("#4D993B");
        }


        @Override
        protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
            super.onLayout(changed, left, top, right, bottom);
            mViewWidth = getMeasuredWidth();
            mViewHeight = getMeasuredHeight();
            mViewCenterX = mViewWidth / 2;
            mViewCenterY = mViewHeight / 2;

            mRectF = new RectF(mViewCenterX - mMinRadio - mRingWidth / 2, mViewCenterY - mMinRadio - mRingWidth / 2,
                    mViewCenterX + mMinRadio + mRingWidth / 2, mViewCenterY + mMinRadio + mRingWidth / 2);

            mRingAngleWidth = (360 - mSelect * mSelectAngle) / mSelect;

            mRectF1 = new RectF(mViewCenterX - mMinRadio, mViewCenterY - mMinRadio,
                    mViewCenterX + mMinRadio, mViewCenterY + mMinRadio);

        }

        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            /**
             * 显示彩色断大于总共的段数是错误的
             */
            if (isShowSelect && mSelectRing > mSelect) {
                return;
            }

            mPaint.setColor(mMinCircleColor);
    //        canvas.drawCircle(mViewCenterX, mViewCenterY, mMinRadio, mPaint);
            //画默认圆环
            drawNormalRing(canvas);
    //        //画灰色描边圆环
    //        drawNormalStrokeRing(canvas);
            //画彩色圆环
            drawColorRing(canvas);
        }

        /**
         * 画彩色圆环
         *
         * @param canvas
         */
        private void drawColorRing(Canvas canvas) {
            Paint ringColorPaint = new Paint(mPaint);
            ringColorPaint.setStyle(Paint.Style.STROKE);
            ringColorPaint.setStrokeWidth(mRingWidth);
            ringColorPaint.setAntiAlias(true);
            ringColorPaint.setStrokeJoin(Paint.Join.ROUND);
            ringColorPaint.setStrokeCap(Paint.Cap.ROUND);
            ringColorPaint.setShader(new SweepGradient(mViewCenterX, mViewCenterX, color, null));

            if (!isShowSelect) {
                canvas.drawArc(mRectF, 270, mSelectRing, false, ringColorPaint);
                return;
            }

            if (mSelect == mSelectRing && mSelectRing != 0 && mSelect != 0) {
                canvas.drawArc(mRectF, 270, 360, false, ringColorPaint);
            } else {
                Log.d(TAG, (mRingAngleWidth * mSelectRing + mSelectAngle + mSelectRing) + "");
                canvas.drawArc(mRectF, 270, mRingAngleWidth * mSelectRing + mSelectAngle * mSelectRing, false, ringColorPaint);
            }

            ringColorPaint.setShader(null);
            ringColorPaint.setColor(mMaxCircleColor);
            for (int i = 0; i < mSelectRing; i++) {
                canvas.drawArc(mRectF, 270 + (i * mRingAngleWidth + (i) * mSelectAngle), mSelectAngle, false, ringColorPaint);
            }
        }

        /**
         * 画默认圆环
         *
         * @param canvas
         */
        private void drawNormalRing(Canvas canvas) {
            Paint ringNormalPaint = new Paint(mPaint);
            ringNormalPaint.setStyle(Paint.Style.STROKE);
            ringNormalPaint.setStrokeWidth(mRingWidth);
            ringNormalPaint.setColor(mRingNormalColor);
            ringNormalPaint.setAntiAlias(true); //抗锯齿
            canvas.drawArc(mRectF, 270, 360, false, ringNormalPaint);
            if (!isShowSelect) {
                return;
            }
            ringNormalPaint.setColor(mMaxCircleColor);
            for (int i = 0; i < mSelect; i++) {
                canvas.drawArc(mRectF, 270 + (i * mRingAngleWidth + (i) * mSelectAngle), mSelectAngle, false, ringNormalPaint);
            }
        }

        /**
         * 画描边圆环
         *
         * @param canvas
         */
        private void drawNormalStrokeRing(Canvas canvas) {
            Paint ringNormalPaint = new Paint(mPaint);
            ringNormalPaint.setStyle(Paint.Style.STROKE);
            ringNormalPaint.setStrokeWidth(5);
            ringNormalPaint.setColor(mRingNormalColor);
            ringNormalPaint.setAntiAlias(true);
            canvas.drawArc(mRectF1, 270, 360, false, ringNormalPaint);
            if (!isShowSelect) {
                return;
            }
            ringNormalPaint.setColor(mMaxCircleColor);
            for (int i = 0; i < mSelect; i++) {
                canvas.drawArc(mRectF, 270 + (i * mRingAngleWidth + (i) * mSelectAngle), mSelectAngle, false, ringNormalPaint);
            }
        }

        /**
         * 显示几段
         *
         * @param i
         */
        public void setSelect(int i) {
            this.mSelectRing = i;
            this.invalidate();
        }

        /**
         * 断的总数
         *
         * @param i
         */
        public void setSelectCount(int i) {
            this.mSelect = i;
        }


        /**
         * 是否显示断
         *
         * @param b
         */
        public void setShowSelect(boolean b) {
            this.isShowSelect = b;
        }


        public void setColor(int[] color) {
            this.color = color;
        }
}

https://github.com/HayDar-Android/SuperCircleSample