最近有个朋友遇到了一个棘手的东西,就是要自定义一个进度条需求如下图
由上图我们可以大致了解到难点主要是在中间部分的进度条 上下文字部分我们完全可以用权重来做,所以我们只要把zhon中间部分的进度条搞出来就完事,废话不多说我们上代码
第一步:准备各段占的比例及颜色值及圆半径边线半径进度条高度等
private int radius = DpUtil.dip2px(getContext(), 5);//这里这个圆直径一定要比进度高度要 private int progressHigher = DpUtil.dip2px(getContext(), 5); private int strokeWidth = radius / 2;//边线宽度 static { BG_COLORS = Color.parseColor("#eeeeee");//背景颜色值 DEF_COLORS = new int[]{//进度条颜色值 Color.parseColor("#ff0000"), Color.parseColor("#00ff00"), Color.parseColor("#0000ff") }; DEF_WEIGHTS = new float[]{//进度条颜色值 显示占比 1, 1, 1 }; }
第二步:计算进度对应的进度条长度
public float getWidthForWeight(float weight, float totalWeight) { return (getWidth() - (2 * (radius + strokeWidth))) * (weight / totalWeight) + 0.5f; }
第三步:绘制控件
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (progressRects == null) { return; } if (maxProgress <= 0) { maxProgress = getWidth() - 2 * (strokeWidth + radius); } for (int i = 0; i < circularBgRects.length; i++) { circularBgRects[i] = new RectF(); if (i == 0) { circularBgRects[i].set(strokeWidth, strokeWidth, strokeWidth + 2 * radius, strokeWidth + 2 * radius); } else { circularBgRects[i].set((int) getWidthForWeight((maxProgress / (circularBgRects.length - 1)) * i, maxProgress) + strokeWidth, strokeWidth, strokeWidth + 2 * radius + (int) getWidthForWeight((maxProgress / (circularBgRects.length - 1)) * i, maxProgress), strokeWidth + 2 * radius); } } //绘制背景颜色块 backgroundRect.set((strokeWidth + radius), (strokeWidth + radius) - (progressHigher / 2), (int) getWidthForWeight(maxProgress, maxProgress) + (strokeWidth + radius), (strokeWidth + radius) + (progressHigher / 2)); canvas.drawRoundRect(backgroundRect, progressHigher / 2, progressHigher / 2, backgroundPaint);//绘制矩形 // 绘制进度条 int progressX = (int) getWidthForWeight(progress, maxProgress) + (strokeWidth + radius); RectF rect = new RectF(); // 获取应当显示的颜色 for (int i = 0; i < colors.length; i++) { if ((maxProgress / colors.length) * i <= progress) { progressPaint.setColor(colors[i]); circularSelectionPaint.setColor(colors[i]); } else { break; } } rect.set((strokeWidth + radius), (strokeWidth + radius) - (progressHigher / 2), progressX, (strokeWidth + radius) + (progressHigher / 2)); canvas.drawRoundRect(rect, progressHigher / 2, progressHigher / 2, progressPaint); // 先画一圈白底 for (int i = 0; i < circularBgRects.length; i++) { canvas.drawArc(circularBgRects[i], 0, 360, true, circularBgPaint); } for (int i = 0; i < circularBgRects.length; i++) { if (progress >= i * (maxProgress / (circularBgRects.length - 1))) { canvas.drawArc(circularBgRects[i], 0, 360, true, circularSelectionPaint); } else { canvas.drawArc(circularBgRects[i], 0, 360, true, circularNoSelectionPaint); } } }
源码:https://download.csdn.net/download/qq_17853651/10812656