自定义View--圆形进度条

自定义圆形进度条

首先在res–>values下创建一个attrs资源文件夹

<resources>

    <declare-styleable name="CircleProgressView">

        <!--圆颜色-->
        <attr name="circle_color" format="color" />
        <!--进度条颜色-->
        <attr name="arc_color" format="color" />
        <!--圆边框宽度-->
        <attr name="circle_stroke" format="integer" />
        <!--文字大小-->
        <attr name="text_size" format="dimension" />
        <!--文字颜色-->
        <attr name="text_color" format="color" />
        <!--圆半径大小-->
        <attr name="round_size" format="dimension" />

    </declare-styleable>

</resources>

自定义View

public class CircleProgressView extends View {
    private int circle_color;//圆颜色
    private int arc_color;//进度条颜色
    private int text_color;//文字颜色
    private float text_size;//文字大小
    private float round_size;//圆半径大小
    private int circle_stroke;//圆边框宽度

    private int measuredWidth;//progressView宽度
    private int measuredHeight;//progressView高度
    private int progress;//占比
    private int offesAngle;
    private int startAngle = 0;
    private int stopAngle = 1;
    private int progressAngle;

    public CircleProgressView(Context context) {
        super(context);
    }

    public CircleProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressView);
        circle_color = typedArray.getColor(R.styleable.CircleProgressView_circle_color, Color.BLUE);//圆颜色
        arc_color = typedArray.getColor(R.styleable.CircleProgressView_arc_color, Color.RED);//进度条颜色
        text_color = typedArray.getColor(R.styleable.CircleProgressView_text_color, Color.CYAN);//文字颜色
        text_size = typedArray.getDimension(R.styleable.CircleProgressView_text_size, 40.0f);//文字大小
        round_size = typedArray.getDimension(R.styleable.CircleProgressView_round_size, 200.0f);//圆半径大小
        circle_stroke = typedArray.getInteger(R.styleable.CircleProgressView_circle_stroke, 5);//圆边框宽度
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        measuredHeight = getMeasuredHeight();
        measuredWidth = getMeasuredWidth();

        int widthSize = 0;
        int hightSize = 0;

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        if (widthMode == MeasureSpec.AT_MOST) {

            widthSize = 500;
            measuredWidth = 500;
            round_size = 400;

        } else {
            widthSize = MeasureSpec.getSize(widthMeasureSpec);
        }

        int hightMode = MeasureSpec.getMode(heightMeasureSpec);
        if (hightMode == MeasureSpec.AT_MOST) {
            hightSize = 500;
            measuredHeight = 500;
            round_size = 400;
            setMeasuredDimension(widthSize, hightSize);
        }
    }

    @SuppressLint("DrawAllocation")
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //获取圆心
        int circle_X = measuredWidth / 2;
        int circle_Y = measuredHeight / 2;
        float radius = round_size / 2;//圆半径

        //画笔
        Paint paint = new Paint();
        paint.setStrokeWidth(circle_stroke);
        paint.setColor(circle_color);
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);

        //绘制圆
        canvas.drawCircle(circle_X, circle_Y, radius, paint);

        RectF rectF = new RectF(measuredWidth / 2 - round_size / 2, measuredHeight / 2 - round_size / 2, measuredWidth / 2 + round_size / 2, measuredHeight / 2 + round_size / 2);
        paint.setColor(arc_color);
        paint.setStrokeWidth(circle_stroke);
        canvas.drawArc(rectF, 0, progressAngle, false, paint);
        String progress_text = (progressAngle * 100) / 360 + "%";
        paint.setColor(text_color);
        paint.setTextSize(text_size);
        paint.setStrokeWidth(2);

        Rect rect = new Rect();
        paint.getTextBounds(progress_text, startAngle, stopAngle, rect);
        canvas.drawText(progress_text, measuredWidth / 2 - rect.width() / 2, measuredHeight / 2 + rect.height() / 2, paint);
    }

    public void setProgress(int progress) {
        this.progress = progress;
        //扇形的总角度
        offesAngle = (360 * progress) / 100;
        handler.sendEmptyMessage(1);
    }

    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            invalidate();//触发onDraw方法
            if (progressAngle <= offesAngle) {
                progressAngle += stopAngle;
                handler.sendEmptyMessageDelayed(1, 20);
            }
        }
    };
}

然后我们去对应的ui布局里调用我们自定义的View

 <com.exam.p2p.view.CircleProgressView
            android:id="@+id/progress_view"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2.5"
            app:circle_color="@android:color/holo_blue_dark"
            app:circle_stroke="20"
            app:round_size="@dimen/dp_100" />

最后去代码块初始化一下

private CircleProgressView progressView;
 progressView = (CircleProgressView) findViewById(R.id.progress_view);
//设置进度值
 progressView.setProgress(90);

好啦~~今天的分享就到这里啦~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值