自定义仪表盘
效果图
package com.mdm.dashboard; import android.animation.ObjectAnimator; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.graphics.PointF; import android.os.Build; import android.text.TextPaint; import android.util.AttributeSet; import android.util.TypedValue; import android.view.View; import android.widget.Toast; import java.util.ArrayList; import java.util.List; import androidx.annotation.Nullable; import androidx.annotation.RequiresApi; public class DashBoardView extends View { private Context mContext; //刻度最大值 private float maxValue = 100; //当前指针指的值 private float currentValue = 33; //单位值代表了多少度 private float cellAngle = 1; //半径 private float radius = 100; //圆心坐标 private PointF centerPoint; //边距 private float margin = 5; //仪表盘宽度 private float arcLineWidth = 20; private List<RangInfo> mRangList; private Paint dashBoardPaint; private Paint dashLinePaint; private Paint pointerPaint; //刻度文字 private TextPaint dashLineTextPaint; //底部标题文字 private TextPaint dashTitleTextPaint; private int titleColor; //标题 private String title = "回报率"; //单位 private String unit = "%"; private Path path; public DashBoardView(Context context) { super(context); init(context); } public DashBoardView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); init(context); } public DashBoardView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context); } /** * 初始化 * @param context */ private void init(Context context) { dashBoardPaint = new Paint(Paint.ANTI_ALIAS_FLAG); dashBoardPaint.setStyle(Paint.Style.STROKE); dashBoardPaint.setStrokeWidth(arcLineWidth); dashLineTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG); dashLineTextPaint.setStyle(Paint.Style.FILL); dashLineTextPaint.setStrokeWidth(2); dashLineTextPaint.setTextSize(sp2px(20)); dashTitleTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG); dashTitleTextPaint.setStyle(Paint.Style.FILL); dashTitleTextPaint.setStrokeWidth(2); dashTitleTextPaint.setTextSize(sp2px(20)); pointerPaint = new Paint(Paint.ANTI_ALIAS_FLAG); pointerPaint.setStyle(Paint.Style.FILL); // pointerPaint.setColor(); dashLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG); dashLinePaint.setStrokeWidth(2); dashLinePaint.setColor(Color.WHITE); dashLinePaint.setStrokeCap(Paint.Cap.ROUND); centerPoint = new PointF(); path = new Path(); mContext = context; setRanValue(new ArrayList<RangInfo>()); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int height = getMeasuredHeight(); int width = getMeasuredWidth(); if(height > width){ margin = width / 20f; width -= (margin * 2) + arcLineWidth*2; // radius = ((width / 6f)*5f)/2f; radius = width / 2f; }else{ margin = height / 20f; height -= (margin * 2) + arcLineWidth*2; // radius = ((height / 6f)*5f)/2f; radius = height/2f; } centerPoint.set(getMeasuredWidth()/2, getMeasuredHeight()/2); } @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP) @Override protected void onDraw(Canvas canvas) { drawDashBoard(canvas); drawLine(canvas); drawPointer(canvas);//画指针 drawTitle(canvas); } /** * 绘制仪表盘 * @param canvas */ @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP) private void drawDashBoard(Canvas canvas){ if(mRangList != null) { float startAngle = 135; for (RangInfo info : mRangList) { dashBoardPaint.setColor(info.getColor()); //记录下仪表盘的颜色范围区间用于判断 PointF pointF = new PointF(startAngle - 135,(startAngle + info.getValue() * cellAngle)-135); info.setPointF(pointF); //画弧线 // canvas.drawArc(centerPoint.x - radius,margin + arcLineWidth,centerPoint.x + radius,margin + arcLineWidth + 2 * radius,startAngle,info.getValue() * cellAngle,false,dashBoardPaint); canvas.drawArc(centerPoint.x - radius,centerPoint.y - radius,centerPoint.x + radius,centerPoint.y + radius,startAngle,info.getValue() * cellAngle,false,dashBoardPaint); startAngle += info.getValue() * cellAngle; } } } /** * 画刻度 * @param canvas */ private void drawLine(Canvas canvas){ canvas.save(); canvas.translate(centerPoint.x,centerPoint.y); canvas.rotate(135); for (int i = 0; i <= 270;){ if(i % 45 == 0){ drawLineText(canvas,i); canvas.drawLine(radius - arcLineWidth*4/3,0,radius + arcLineWidth/2,0,dashLinePaint); } else canvas.drawLine(radius - arcLineWidth/2,0,radius + arcLineWidth/2,0,dashLinePaint); canvas.rotate(9); i+=9; } canvas.restore(); } /** * 画刻度值 */ private void drawLineText(Canvas canvas,float angle){ float value = angle / cellAngle; canvas.save(); drawCenterText(value,angle,canvas); canvas.restore(); } /** * 获取圆上的点的坐标 * @return * 这里的圆心坐标为什么是0，0是因为canvas已经移到圆的圆心的位置，那么新的坐标轴中的圆心点就是0，0 */ private PointF getRoundXY(float angle,float radius){ PointF xyPoint = new PointF(); xyPoint.x = (float) (0 + radius * Math.cos(angle * Math.PI/180)); xyPoint.y = (float) (0 + radius * Math.sin(angle * Math.PI/180)); return xyPoint; } /** * 居中显示文字 * @param value * @param canvas */ private void drawCenterText( float value,float angle,Canvas canvas){ TextPaint.FontMetrics fontMetrics = dashLineTextPaint.getFontMetrics(); dashLineTextPaint.setTextAlign(Paint.Align.CENTER); int textBaseLine = (int) (0 + (fontMetrics.bottom - fontMetrics.top) /2 - fontMetrics.bottom); // PointF pointF = getRoundXY(0,radius - arcLineWidth*2.5f); PointF pointF = getRoundXY(0, radius - arcLineWidth*4/3 - dashLineTextPaint.measureText(String.valueOf(Math.round(value)))/2); canvas.translate(pointF.x,pointF.y); canvas.rotate( -135-angle); dashLineTextPaint.setColor(getPointerTextColor(angle)); canvas.drawText(String.valueOf(Math.round(value)), 0, textBaseLine, dashLineTextPaint); // canvas.drawText(listener != null?listener.getFormatValue(value):String.valueOf(Math.round(value)), 0, textBaseLine, dashLineTextPaint); } /** * 画指针 * @param canvas */ private void drawPointer(Canvas canvas){ pointerPaint.setColor(getPointerTextColor(currentValue *cellAngle)); canvas.drawCircle(centerPoint.x,centerPoint.y,3,pointerPaint); canvas.save(); canvas.translate(centerPoint.x,centerPoint.y); canvas.rotate(135 + currentValue *cellAngle); path.reset(); path.moveTo(0,0); path.lineTo(radius * 1/10,-radius * 1/15); path.lineTo(radius * 3/4,0); path.lineTo(radius * 1/10,radius * 1/15); path.close(); canvas.drawPath(path,pointerPaint); canvas.restore(); } /** * 画title * @param canvas */ private void drawTitle(Canvas canvas){ if(titleColor != 0) dashTitleTextPaint.setColor(titleColor); TextPaint.FontMetrics fm = dashTitleTextPaint.getFontMetrics(); float textHeight = fm.bottom - fm.top; dashTitleTextPaint.setTextAlign(Paint.Align.CENTER); canvas.drawText(title, centerPoint.x, centerPoint.y + radius * 4/5 + textHeight, dashTitleTextPaint); dashTitleTextPaint.setColor(getPointerTextColor(currentValue * cellAngle)); canvas.drawText((listener != null?listener.getFormatValue(currentValue):Math.round(currentValue)) + unit, centerPoint.x, centerPoint.y + radius * 4/5, dashTitleTextPaint); } /** * 指针和文字的颜色 * @param angle 度数 减去135后的度数 * @return 获取某个区域的文字的颜色和指针的颜色 */ private int getPointerTextColor(float angle){ for (RangInfo info : mRangList){ if(angle >= info.getPointF().x && angle <= info.getPointF().y){ return info.getColor(); } } return 0xff000000; } /** * 设置底部标题文字 * @param title * @param unit * @return */ public DashBoardView setTitle(String title, String unit){ if(title == null) title = ""; if(unit == null) unit = ""; this.title = title; this.unit = unit; postInvalidate(); return this; } /** * 设置title文字大小 * @return */ public DashBoardView setTitleSize(float textSize){ if(textSize <= 0) textSize = 15; dashTitleTextPaint.setTextSize(sp2px(textSize)); postInvalidate(); return this; } /** * 设置title颜色 * @param textColor * @return */ public DashBoardView setTitleColor(int textColor){ try{ dashTitleTextPaint.setColor(textColor); }catch (Exception e){ textColor = 0xff000000; dashTitleTextPaint.setColor(textColor); } titleColor = textColor; postInvalidate(); return this; } /** * 设置区间值和颜色 * @param rangInfos * @return */ public DashBoardView setRanValue(List<RangInfo> rangInfos){ if(rangInfos == null || rangInfos.size() == 0){ mRangList = getDefaultRangList(); return this; } float sum = 0; for(RangInfo info : rangInfos){ if(info == null)continue; sum += info.getValue() < 0?0:info.getValue(); } if(sum > 0){ maxValue = sum; mRangList = rangInfos; cellAngle = 270 / maxValue; }else{ mRangList = getDefaultRangList(); } postInvalidate(); return this; } /** * 便捷设置 * @param ranValues * @return */ public DashBoardView setRanValue(RangInfo... ranValues){ if(ranValues == null || ranValues.length == 0)return this; List<RangInfo> rangInfos = new ArrayList<>(); for (RangInfo rangInfo : ranValues){ rangInfos.add(rangInfo); } setRanValue(rangInfos); return this; } /** * 获取当前指向的值 * @return */ public float getCurrentValue() { return currentValue; } /** * 用来做动画的设置当前指向的值 * @param currentValue */ private void setCurrentValue(float currentValue) { this.currentValue = currentValue; postInvalidate(); } /** * 设置当前值 * @param value * @param isAnim true 需要动画 false 不要动画 */ public void setValue(float value,boolean isAnim,IValueFormat listener){ if(value < 0 || value > maxValue){ Toast.makeText(mContext,"设置无效!设置的值大于当前最大值",Toast.LENGTH_LONG).show(); return; } if(isAnim) ObjectAnimator.ofFloat(this,"currentValue",0,value).setDuration(2000).start(); else setCurrentValue(value); setListener(listener); } /** * 设置当前值 * @param value * @param isAnim true 需要动画 false 不要动画 */ public void setValue(float value,boolean isAnim){ setValue(value,isAnim,null); } /** * 设置刻度线的颜色 * @param lineColor */ public DashBoardView setLineColor(int lineColor){ if(dashLinePaint != null) { try { dashLinePaint.setColor(lineColor); }catch (Exception e){ dashLinePaint.setColor(Color.WHITE); } } postInvalidate(); return this; } /** * 设置刻度线的宽度 * @param lineWidth */ public DashBoardView setLineWidth(float lineWidth){ if(lineWidth < 0)return this; dashLinePaint.setStrokeWidth(lineWidth); postInvalidate(); return this; } /** * 设置刻度的文字大小 */ public DashBoardView setLineTextSize(float textSize){ if(textSize < 0)return this; dashLineTextPaint.setTextSize(sp2px(textSize)); postInvalidate(); return this; } /** * 设置底部标题的文字大小 * @param textSize * @return */ public DashBoardView setTitleTextSize(float textSize){ if(textSize < 0)return this; dashTitleTextPaint.setTextSize(sp2px(textSize)); postInvalidate(); return this; } /** * 设置圆环的线宽度 * @param circleLineWidth * @return */ public DashBoardView setDashBoardCircleLineWidth(float circleLineWidth){ if(circleLineWidth < 0)return this; arcLineWidth = circleLineWidth; dashBoardPaint.setStrokeWidth(arcLineWidth); postInvalidate(); return this; } /** * 获取默认的区间显示和总数 * @return */ private List<RangInfo> getDefaultRangList(){ return getDefaultRangList(100f); } public List<RangInfo> getDefaultRangList(float maxValue){ this.maxValue = maxValue; cellAngle = 270 / this.maxValue; List<RangInfo> list = new ArrayList<>(); for (int i = 0;i < 4;i++){ RangInfo info = new RangInfo(); if(i == 0)info.setColor(0xffE13020); else if(i == 1) info.setColor(0xffD7A52D); else if(i == 2) info.setColor(0xff4089D7); else info.setColor(0xff30AD37); info.setValue(this.maxValue/4); list.add(info); } return list; } /** * dp转px * @param dpVal * @return */ protected float dp2px(float dpVal) { return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal, getResources().getDisplayMetrics()); } /** * sp转px * @param spVal * @return */ protected float sp2px(float spVal) { return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spVal, getResources().getDisplayMetrics()); } /** * 设置区间范围 */ public static class RangInfo{ private float value; private int color; //记录颜色角度的区间并不是坐标 private PointF pointF; public RangInfo() {} public RangInfo(float value, int color) { this.value = value; this.color = color; } public float getValue() { return value; } public void setValue(float value) { this.value = value; } public int getColor() { return color; } public void setColor(int color) { this.color = color; } public PointF getPointF() { return pointF; } public void setPointF(PointF pointF) { this.pointF = pointF; } } /** * 取值处理 */ public interface IValueFormat{ String getFormatValue(float value); } private IValueFormat listener; public DashBoardView setListener(IValueFormat listener){ this.listener = listener; return this; } }
使用方法：
final DashBoardView dashBoardView = findViewById(R.id.dashBoard); findViewById(R.id.btnTest).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dashBoardView.setRanValue(dashBoardView.getDefaultRangList(250f)) .setLineTextSize(10) .setLineWidth(1f) .setDashBoardCircleLineWidth(5) .setTitleColor(Color.WHITE) .setTitleSize(10) .setTitle("装逼率","%") .setValue(100f, true, new DashBoardView.IValueFormat() { @Override public String getFormatValue(float value) { DecimalFormat df=new DecimalFormat("0.0"); return df.format(value); } }); } });
