自定义view-CircleBar

仿照计步器写的简单的CircleBar，主要三个部分，默认的圆环，进度修改时的圆环，中间的文字；

1：attrs内容

<declare-styleable name="CircleBar">

        <!--view背景色 -->
        <attr name="bgColor" format="color"/>
        <!--圆环默认色 -->
        <attr name="circleNormalColor" format="color"/>
        <!--圆环进度改变的颜色 -->
        <attr name="circleChangeColor" format="color"/>
        <!--圆环宽度-->
        <attr name="circleWidth" format="dimension"/>

        <!--默认字体颜色 -->
        <attr name="textNormalColor" format="color"/>
        <!--中间文字颜色 -->
        <attr name="textChangeColor" format="color"/>
        <!--默认字体大小 -->
        <attr name="textNormalSize" format="integer"/>
        <!--v中间文字大小-->
        <attr name="textChangeSize" format="integer"/>


    </declare-styleable>

 2：绘制圆环

首先在onLayout中确定view的宽高，圆环的圆心则放置在view'的中心位置

     private float viewWidth;
    private float viewHeight;
    private float radius;

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        viewWidth=getMeasuredWidth();
        viewHeight=getMeasuredHeight();

        //circleWidth代表圆环宽度
        radius=(Math.min(viewWidth,viewHeight)-4*circleWidth)/2;
    }

初始化paint等数据

    public void init(Context context, @Nullable AttributeSet attrs){
        TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.CircleBar);
        circleWidth= (int) typedArray.getDimension(R.styleable.CircleBar_circleWidth,20);
        bgColor=typedArray.getColor(R.styleable.CircleBar_bgColor,0xffFFFFFF);
        circlreNormalColor=typedArray.getColor(R.styleable.CircleBar_circleNormalColor,0xff545454);
        circleChangeColor=typedArray.getColor(R.styleable.CircleBar_circleChangeColor,0xffff0000);
        textNormalColor=typedArray.getColor(R.styleable.CircleBar_textNormalColor,0xff545454);
        textChangeColor=typedArray.getColor(R.styleable.CircleBar_textChangeColor,0xffff0000);
        textNormalSize=typedArray.getInteger(R.styleable.CircleBar_textNormalSize,30);
        textChangeSize=typedArray.getInteger(R.styleable.CircleBar_textChangeSize,50);
        typedArray.recycle();

        circlePaint=new Paint();
        circlePaint.setAntiAlias(true);
        circlePaint.setColor(circlreNormalColor);
        circlePaint.setStrokeWidth(circleWidth);
        circlePaint.setTextSize(20);
        circlePaint.setStyle(Paint.Style.STROKE);
        circlePaint.setStrokeCap(Paint.Cap.ROUND);

        circleChangePaint=new Paint();
        circleChangePaint.setAntiAlias(true);
        circleChangePaint.setColor(circleChangeColor);
        circleChangePaint.setStrokeWidth(circleWidth);
        circleChangePaint.setTextSize(20);
        circleChangePaint.setStyle(Paint.Style.STROKE);
        circleChangePaint.setStrokeCap(Paint.Cap.ROUND);

        textPaint=new Paint();
        textPaint.setAntiAlias(true);
        textPaint.setColor(textNormalColor);
        textPaint.setStyle(Paint.Style.STROKE);
        textPaint.setTextSize(textNormalSize);
        textPaint.setStrokeWidth(1);

        circleRect=new RectF();

    }

绘制圆环

        circleRect.left=viewWidth/2-radius;
        circleRect.top=viewHeight/2-radius;
        circleRect.bottom=viewHeight/2+radius;
        circleRect.right=viewWidth/2+radius;

        //默认圆环
        canvas.drawOval(circleRect,circlePaint);
        //        中心文字 stepsize通过setdata更新
        canvas.drawText(""+stepSize,viewWidth/2,viewHeight/2,textPaint);

绘制进度环

 if (stepSize>0){
        //计算角度
        float angle=stepSize*360/normalStepSize;
        //调整角度为90度开始，
        canvas.drawArc(circleRect,90,angle,false,circleChangePaint);
}

Github地址