android自定义的圆弧进度条，更多功能，只需修改源码即可

最新推荐文章于 2023-02-03 14:25:52 发布

czq_901201

最新推荐文章于 2023-02-03 14:25:52 发布

阅读量870

点赞数

分类专栏：自定义view 圆弧进度条 view的绘制文章标签：自定义view 圆弧进度条 view的绘制

本文链接：https://blog.csdn.net/qq_35875098/article/details/53019810

版权

自定义view 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

view的绘制

6 篇文章 0 订阅

订阅专栏

圆弧进度条

2 篇文章 0 订阅

订阅专栏

实心自定义的圆弧进度条，还可以实现根据分数来控制背景颜色的渐变，更多功能，只需修改源码即可

<com.pandacredit.administrator.customview.YuanPanBiaoView
        android:background="@drawable/shape_backgroung_xinyongtisheng_activity"
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

public class YuanPanBiaoView extends View {
    /**
     * 父控件的宽度
     */
    private float width;
    /**
     * 父控件的高度
     */
    private float height;
    /**
     * 中心点x坐标
     */
    private float cx;
    /**
     * 中心点y坐标
     */
    private float cy;
    /**
     * 内圈半径
     */
    private float innerR;
    /**
     * 内圈半径
     */
    private float outR;
    /**
     * 内弧宽度
     */
    private float innerWidth;
    /**
     * 内弧宽度
     */
    private float outWidth;
    private Context context;

    private Paint keDuPaint;
    private Paint textPaint;
    private Paint progressPaint;
    private Paint innerPaint;
    private Paint outPaint;
    private RectF innerRectF;
    private RectF outRectF;
    /**
     * 内圈颜色
     */
    private int innerColor;
    /**
     * 外圈颜色
     */
    private int outColor;
    /**
     * 内外圈间距
     */
    private float margin;
    /**
     * 刻度值
     */
    private String[] data = new String[]{
            "0","较差",
            "20","中等",
            "40","良好",
            "60","优秀",
            "80","较好",
            "100"
    };
    /**
     * 信用度:78
     */
    private int xinYongDu;
    private Handler hander;
    private int progress = 0;
    public YuanPanBiaoView(Context context, AttributeSet attrs) {
        super(context, attrs);
        inits(context);
    }

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

    public YuanPanBiaoView(Context context) {
        super(context);
        inits(context);
    }

    private void inits(Context context) {
        this.context = context;
        innerPaint = new Paint();
        outPaint = new Paint();
        textPaint = new Paint();
        keDuPaint = new Paint();
        progressPaint= new Paint();
        hander = new Handler();
        //TODO 测试
        innerColor = Color.parseColor("#fefefe");
        outColor = Color.parseColor("#fefefe");
        innerWidth = DisplayUtil.dip2px(context,10);
        outWidth = DisplayUtil.dip2px(context,3);
        margin = DisplayUtil.dip2px(context,8);
        xinYongDu = 78;
        hander.postDelayed(new Runnable() {
            @Override
            public void run() {
                if(progress<=78){
                    progress++;
                    invalidate();
                    hander.postDelayed(this,30);
                }
            }
        }, 50);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        drawText(canvas);
        drawArc(canvas);
        drawLine(canvas);
        drawData(canvas);

        super.onDraw(canvas);
    }

    /**
     * 画刻度
     * @param canvas
     */
    private void drawData(Canvas canvas) {
        textPaint.setTextSize(DisplayUtil.dip2px(context,10));
        textPaint.setAlpha(225);
        //文字
        for (int i = 0; i <= 10; i++) {
            canvas.save();// 保存当前画布
            canvas.rotate(240 / 10 * i+240, cx, cy);

            canvas.drawText(data[i] + "", cx, cy - innerR +    innerWidth / 2 +DisplayUtil.dip2px(context,14) , textPaint);
            canvas.restore();//
        }
        //起始角度
        float start = 150;
        //线款
        float dWidth = 0.8f;
        keDuPaint.setAntiAlias(true);
        keDuPaint.setColor(Color.WHITE);
        keDuPaint.setStrokeWidth(innerWidth);
        keDuPaint.setStyle(Paint.Style.STROKE);
        //刻度线
        for (int i = 0; i <= 5; i++) {
            canvas.drawArc(innerRectF,start,dWidth,false,keDuPaint);
            start +=240/5;
        }
    }

    /**
     * 画线f
     * @param canvas
     */
    private void drawLine(Canvas canvas) {
        textPaint.setColor(Color.parseColor("#fefefe"));
        textPaint.setTextSize(DisplayUtil.dip2px(context,16));
        float textWidth=textPaint.measureText("因为分享 所以简单");
        canvas.drawLine(cx-textWidth/2-DisplayUtil.dip2px(context,50+3),DisplayUtil.dip2px(context,60-5),cx-textWidth/2-DisplayUtil.dip2px(context,20),DisplayUtil.dip2px(context,60-5),textPaint);
        canvas.drawLine(cx+textWidth/2+DisplayUtil.dip2px(context,50+3),DisplayUtil.dip2px(context,60-5),cx+textWidth/2+DisplayUtil.dip2px(context,20),DisplayUtil.dip2px(context,60-5),textPaint);
    }

    /**
     * 画弧及进度
     * @param canvas
     */
    private void drawArc(Canvas canvas) {
        innerPaint.setAntiAlias(true);
        innerPaint.setColor(innerColor);
        innerPaint.setAlpha(225/2);
        innerPaint.setStrokeWidth(innerWidth);
        innerPaint.setStyle(Paint.Style.STROKE);
        outPaint.setAntiAlias(true);
        outPaint.setColor(outColor);
        outPaint.setAlpha(225/2);
        outPaint.setStrokeWidth(outWidth);
        outPaint.setStyle(Paint.Style.STROKE);
        progressPaint.setAntiAlias(true);
        progressPaint.setColor(Color.WHITE);
        progressPaint.setStrokeWidth(outWidth);
        progressPaint.setStyle(Paint.Style.STROKE);
        canvas.drawArc(innerRectF,150,240,false,innerPaint);
        canvas.drawArc(outRectF,150,240,false,outPaint);
        canvas.drawArc(outRectF,150,progress*240/100,false,progressPaint);
    }

    /**
     * 画文字
     */
    private void drawText(Canvas canvas) {
        textPaint.setColor(Color.parseColor("#fefefe"));
        textPaint.setTextSize(DisplayUtil.dip2px(context,16));
        textPaint.setAntiAlias(true);
        textPaint.setStyle(Paint.Style.FILL);
        textPaint.setTextAlign(Paint.Align.CENTER);
        canvas.drawText("因为分享 所以简单",cx,DisplayUtil.dip2px(context,60),textPaint);
        textPaint.setTextSize(DisplayUtil.dip2px(context,12));
        textPaint.setAlpha(225/2);
        canvas.drawText("BETA",cx,cy+DisplayUtil.dip2px(context,10),textPaint);
        textPaint.setAlpha(225);
        textPaint.setTextSize(DisplayUtil.dip2px(context,50));
        canvas.drawText(xinYongDu+"",cx,cy+DisplayUtil.dip2px(context,60),textPaint);
        textPaint.setTextSize(DisplayUtil.dip2px(context,22));
        canvas.drawText("信用优秀",cx,cy+DisplayUtil.dip2px(context,100),textPaint);
        textPaint.setAlpha(225/2);
        textPaint.setTextSize(DisplayUtil.dip2px(context,16));
        canvas.drawText("评估时间：2016.10.24",cx,cy+DisplayUtil.dip2px(context,120),textPaint);
    }



    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//        width = getWidth();
        width=getMeasuredWidth();
//        height = getHeight();
        height = getMeasuredHeight();
        float size = width * 2 / 3;

        cx = width/2;
//        cy = width/2;
        cy = width/2+DisplayUtil.dip2px(context,45);
        outR = size/2;
        innerR = outR - outWidth-margin;

//        innerRectF = new RectF(cx-innerR,cy-innerR,cx+innerR+DisplayUtil.dip2px(context,45),cy+innerR+DisplayUtil.dip2px(context,45));
//        outRectF = new RectF(cx-outR,cy-outR+DisplayUtil.dip2px(context,45),cx+outR,cy+outR+DisplayUtil.dip2px(context,45));
        innerRectF = new RectF(cx-innerR,cy-innerR,cx+innerR,cy+innerR);
        outRectF = new RectF(cx-outR,cy-outR,cx+outR,cy+outR);

    }
}

<pre name="code" class="html">

</pre><pre name="code" class="html">shape_backgroung_xinyongtisheng_activity

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:angle="270"
        android:startColor="#f36523"
        android:endColor="#f5a623"></gradient>
</shape>

效果图：