Android 绘制环形图

由于项目需要环形图，但是在 MPAndroidChart中没找到环形图，所以就自己百度搜索总结。

如何你也在搞iOS ，请参考
环形图 - Swift

！无图无真相！效果图如下

效果图

看图，分成左右两个部分，左边环形图，右边是说明百分比值等等，
我只绘制了左边，右边用View堆起来就好！

一、分析需要哪些数据

确定中间的空白圆的半径 r
确定环形的宽度 ringWidth
确定环形之间的间距 ringSpace
确定环形个数 ringCount
其他颜色等

二、绘制及其计算

1、绘制最里面的环形

绘制的中心点：即view的中心；
绘制的半径：空白圆的半径 r + 环形宽度 / 2
可以理解为：先用圆规画了一个圆线，然后用彩笔笔尖对准圆线进行涂写，就画出来了一个圆环。。。

2、绘制中间的环形

绘制的中心点：即view的中心；
绘制的半径：空白圆的半径 r + 环形宽度 + 环形间距 + 环形宽度 / 2

3、绘制最外层的环形

绘制的中心点：即view的中心；
绘制的半径：空白圆的半径 r + 环形宽度2 + 环形间距2 + 环形宽度 / 2

4、绘制中间的文本

绘制的中心点：即view的中心；
绘制文本的最大宽度：空白圆的半径 r
如何换行？

完整代码如下：

一共就 6 个文件, 只要copy到自己工程中去，修改 import 包就可以了

colors.xml
attrs.xml
环形类 LzRingChart.java
common_circle.xml
activity_main.xml
MainActivity.java

colors.xml



    #00000000
    #D81B60

    #33a3dc

    #111111
    #333333
    #666666
    #999999
    #99000000

    #ffffff

    #cfcfcf
    #d8d8d8
    #e5e5e5
    #f5f5f5

    #b64533
    #c85d44
    #f15a22
    #cbc547
    #fdb933
    #e0861a
    #bed742
    #7fb80e
    #77ac98
    #50b7c1
    #c77eb5
    #6f60aa

attr.xml 文件

common_circle.xml

环形图 LzRingChart.java

package com.lz.ui;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.text.Layout;
import android.text.StaticLayout;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;
import androidx.core.content.ContextCompat;

import com.lz.tool.DeviceTool;
import com.lz.wehome.R;

public class LzRingChart extends View {
    //中间的半径， 环形的宽度，环形间距， 环形背景颜色，环形的数量
    int innerRadius, ringWidth, ringSpace, ringBgColor, ringCount;
    //环形画笔
    Paint ringBgPaint;
    //文本画笔
    TextPaint textPaint;

    Rect textRect;
    RectF ringRectF;

    //百分比 0.xxx
    float[] values;
    //环形百分比颜色
    int[] colors;
    CharSequence title;
    private Context context;

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

    public LzRingChart(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LzRingChart(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;

        //读取xml中值
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LzRingChart, defStyleAttr, 0);
        innerRadius = typedArray.getDimensionPixelSize(R.styleable.LzRingChart_innerRadius, DeviceTool.dp2px(context, 50));
        ringWidth = typedArray.getDimensionPixelSize(R.styleable.LzRingChart_ringWidth, DeviceTool.dp2px(context, 5));
        ringSpace = typedArray.getDimensionPixelSize(R.styleable.LzRingChart_ringSpace, DeviceTool.dp2px(context, 5));
        ringBgColor = typedArray.getColor(R.styleable.LzRingChart_ringBgColor, ContextCompat.getColor(context, R.color.line_d8));
        ringCount = typedArray.getInt(R.styleable.LzRingChart_ringCount, 1);

        typedArray.recycle();
        initPaint();
    }


    /**
     * 配置
     */
    void initPaint() {
        //绘制圆环
        ringBgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        ringBgPaint.setStyle(Paint.Style.STROKE);
        ringBgPaint.setColor(ringBgColor);
        ringBgPaint.setStrokeWidth(ringWidth);

        textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
        textPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        textPaint.setColor(context.getResources().getColor(R.color.main));
        textPaint.setTextSize(DeviceTool.dp2px(context, 13));

        textRect = new Rect();
        ringRectF = new RectF();

//        invalidate();
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //测量尺寸
        setMeasuredDimension(measureView(widthMeasureSpec), measureView(heightMeasureSpec));

    }

    /**
     * 测量尺寸
     */
    private int measureView(int measureSpec) {
        int result;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
        if(specMode == MeasureSpec.EXACTLY){
            result = specSize;

            /**
             * 比较 xml设置的 View宽高 是否小于半径等
             */
            int real = (innerRadius + ringSpace*(ringCount-1) + ringWidth*ringCount)*2;
            if (real > specSize) {
                result = real;
            }
        }else{
            result = (innerRadius + ringSpace*(ringCount-1) + ringWidth*ringCount)*2;
            if(specMode==MeasureSpec.AT_MOST){
                result=Math.min(result,specSize);
            }
        }
        return result;
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //绘制背景色圆环
        drawBgRing(canvas);

        //百分比圆环
        drawPercentRing(canvas);

        //中间文本
        drawCenterText(canvas);
    }

    /**
     * 绘制 环形中间的文本
     */
    void drawCenterText(Canvas canvas) {
        if (title==null) return;
        StaticLayout sl = new StaticLayout(title, textPaint, innerRadius*2, Layout.Alignment.ALIGN_CENTER, 1.1f, 0, true);
        canvas.translate(getWidth()/2-sl.getWidth()/2, getHeight()/2-sl.getHeight()/2);
        sl.draw(canvas);
    }


    /**
     * 绘制 默认颜色的环形
     */
    void drawBgRing(Canvas canvas) {
        //需要重新设置一下
        ringBgPaint.setColor(ringBgColor);

        for (int i = 0; i < ringCount; i++) {
            float letf = getWidth()/2 - innerRadius - ringWidth*(ringCount-i) - (ringCount-1-i)*ringSpace + ringWidth/2;
            float top = getHeight()/2 - innerRadius - ringWidth*(ringCount-i) - (ringCount-1-i)*ringSpace + ringWidth/2;
            float right = getWidth()/2 + innerRadius + ringWidth*(ringCount-i) + (ringCount-1-i)*ringSpace - ringWidth/2;
            float bottom = getHeight()/2 + innerRadius + ringWidth*(ringCount-i) + (ringCount-1-i)*ringSpace - ringWidth/2;
            ringRectF.set(letf, top, right, bottom);
            canvas.drawArc(ringRectF, 0, 360,false, ringBgPaint);
        }
    }


    /**
     * 绘制百分比的环形
     */
    void drawPercentRing(Canvas canvas) {

        if (values == null || values.length ==0) return;
        for (int i = 0; i < values.length; i++) {
            ringBgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            ringBgPaint.setStyle(Paint.Style.STROKE);
            ringBgPaint.setColor(context.getResources().getColor(colors[i]));
            ringBgPaint.setStrokeWidth(ringWidth);
            float letf = getWidth()/2 - innerRadius - ringWidth*(ringCount-i) - (ringCount-1-i)*ringSpace + ringWidth/2;
            float top = getHeight()/2 - innerRadius - ringWidth*(ringCount-i) - (ringCount-1-i)*ringSpace + ringWidth/2;
            float right = getWidth()/2 + innerRadius + ringWidth*(ringCount-i) + (ringCount-1-i)*ringSpace - ringWidth/2;
            float bottom = getHeight()/2 + innerRadius + ringWidth*(ringCount-i) + (ringCount-1-i)*ringSpace - ringWidth/2;
            ringRectF.set(letf, top, right, bottom);
            float sweepAngle = 360*values[i];
            if (sweepAngle >= 360) sweepAngle = 360;
            canvas.drawArc(ringRectF, -90, sweepAngle,false, ringBgPaint);
        }
    }


    /**
     * 设置 数据
     * @param title 中间的标题
     * @param values 百分比的值
     * @param colors 颜色值
     */
    public void setData(CharSequence title, float[] values, int[] colors) {
        this.title = title;
        this.values = values;
        this.colors = colors;
        invalidate();
    }
}

activity_main.xml

MainActivity.java

主要代码


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        showRingChart();

    }

    private LzRingChart ringChart;
    private View vMark1, vMark2, vMark3;
    void showRingChart() {
        ringChart = findViewById(R.id.chart_ring);

        String totalStr = "08:00";
        SpannableString s = new SpannableString(totalStr + "\n睡眠总时长");
        s.setSpan(new RelativeSizeSpan(2.7f), 0, totalStr.length(), 0);
        s.setSpan(new ForegroundColorSpan(getResources().getColor(R.color.black3)), totalStr.length(), s.length(), 0);
        s.setSpan(new ForegroundColorSpan(getResources().getColor(R.color.main)), 0, totalStr.length(), 0);

        ringChart.setData(s, new float[]{0.5f, 0.5f, 0}, new int[]{R.color.c1, R.color.c8, R.color.c12});

        vMark1 = findViewById(R.id.view_mark1);
        vMark2 = findViewById(R.id.view_mark2);
        vMark3 = findViewById(R.id.view_mark3);

        GradientDrawable gd1 = (GradientDrawable) vMark1.getBackground();
        gd1.setColor(getResources().getColor(R.color.c1));

        GradientDrawable gd2 = (GradientDrawable) vMark2.getBackground();
        gd2.setColor(getResources().getColor(R.color.c8));

        GradientDrawable gd3 = (GradientDrawable) vMark3.getBackground();
        gd3.setColor(getResources().getColor(R.color.c12));

    }

Android 绘制 环形图

一 、分析需要哪些 数据