700字范文 > [置顶] Android自定义控件芝麻信用分雷达图

[置顶] Android自定义控件芝麻信用分雷达图

时间：2021-10-01 03:03:40

[置顶]Android自定义控件芝麻信用分雷达图

标签：android自定义雷达芝麻信用 -10-23 20:11 3548人阅读评论(24) 收藏举报分类：自定义控件（2）

目录(?)[+]

本文已授权微信公众号：鸿洋（hongyangAndroid）在微信公众号平台原创首发。

1.介绍

首先看下支付宝上芝麻信用分的效果图：

2.思路

确定雷达图中心点坐标绘制多边形及连接线根据维度值绘制覆盖区域绘制分数绘制每个维度的标题文字和图标

3.实现

获取布局的中心坐标

在onSizeChanged(int w, int h, int oldw, int oldh)方法里面，根据View的长宽，计算出雷达图的半径（这里取布局宽高最小值的四分之一，可以自定义），获取整个布局的中心坐标。

public class CreditScoreView extends View {//数据个数private int dataCount = 5;//每个角的弧度private float radian = (float) (Math.PI * 2 / dataCount);//雷达图半径private float radius;//中心X坐标private int centerX;//中心Y坐标private int centerY;//各维度标题private String[] titles = {"履约能力", "信用历史", "人脉关系", "行为偏好", "身份特质"};//各维度图标private int[] icons = {R.mipmap.ic_performance, R.mipmap.ic_history, R.mipmap.ic_contacts,R.mipmap.ic_predilection, R.mipmap.ic_identity};//各维度分值private float[] data = {170, 180, 160, 170, 180};//数据最大值private float maxValue = 190;//雷达图与标题的间距private int radarMargin = DensityUtils.dp2px(getContext(), 15);//雷达区画笔private Paint mainPaint;//数据区画笔private Paint valuePaint;//分数画笔private Paint scorePaint;//标题画笔private Paint titlePaint;//图标画笔private Paint iconPaint;//分数大小private int scoreSize = DensityUtils.dp2px(getContext(), 28);//标题文字大小private int titleSize = DensityUtils.dp2px(getContext(), 13);...@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {//雷达图半径radius = Math.min(h, w) / 2 * 0.5f;//中心坐标centerX = w / 2;centerY = h / 2;postInvalidate();super.onSizeChanged(w, h, oldw, oldh);}...}123456789101112131415161718192223242526272829303132333435363738394041424344454647484950515253123456789101112131415161718192223242526272829303132333435363738394041424344454647484950515253

绘制多边形和连接线

主要看下getPoint方法，此方法封装了获取雷达图上各个点坐标的计算逻辑。

/*** 绘制多边形** @param canvas 画布*/private void drawPolygon(Canvas canvas) {Path path = new Path();for (int i = 0; i < dataCount; i++) {if (i == 0) {path.moveTo(getPoint(i).x, getPoint(i).y);} else {path.lineTo(getPoint(i).x, getPoint(i).y);}}//闭合路径path.close();canvas.drawPath(path, mainPaint);}/*** 绘制连接线** @param canvas 画布*/private void drawLines(Canvas canvas) {Path path = new Path();for (int i = 0; i < dataCount; i++) {path.reset();path.moveTo(centerX, centerY);path.lineTo(getPoint(i).x, getPoint(i).y);canvas.drawPath(path, mainPaint);}}12345678910111213141516171819222324252627282930313233341234567891011121314151617181922232425262728293031323334

getPoint方法，参数radarMargin与percent在此步骤赋予默认值。

/*** 获取雷达图上各个点的坐标** @param position 坐标位置（右上角为0，顺时针递增）* @return 坐标*/private Point getPoint(int position) {return getPoint(position, 0, 1);}/*** 获取雷达图上各个点的坐标（包括维度标题与图标的坐标）** @param position 坐标位置* @param radarMargin 雷达图与维度标题的间距* @param percent覆盖区的的百分比* @return 坐标*/private Point getPoint(int position, int radarMargin, float percent) {int x = 0;int y = 0;if (position == 0) {x = (int) (centerX + (radius + radarMargin) * Math.sin(radian) * percent);y = (int) (centerY - (radius + radarMargin) * Math.cos(radian) * percent);} else if (position == 1) {x = (int) (centerX + (radius + radarMargin) * Math.sin(radian / 2) * percent);y = (int) (centerY + (radius + radarMargin) * Math.cos(radian / 2) * percent);} else if (position == 2) {x = (int) (centerX - (radius + radarMargin) * Math.sin(radian / 2) * percent);y = (int) (centerY + (radius + radarMargin) * Math.cos(radian / 2) * percent);} else if (position == 3) {x = (int) (centerX - (radius + radarMargin) * Math.sin(radian) * percent);y = (int) (centerY - (radius + radarMargin) * Math.cos(radian) * percent);} else if (position == 4) {x = centerX;y = (int) (centerY - (radius + radarMargin) * percent);}return new Point(x, y);}1234567891011121314151617181922232425262728293031323334353637383940414243444512345678910111213141516171819222324252627282930313233343536373839404142434445

绘制覆盖区域

/*** 绘制覆盖区域** @param canvas 画布*/private void drawRegion(Canvas canvas) {Path path = new Path();for (int i = 0; i < dataCount; i++) {//计算百分比float percent = data[i] / maxValue;int x = getPoint(i, 0, percent).x;int y = getPoint(i, 0, percent).y;if (i == 0) {path.moveTo(x, y);} else {path.lineTo(x, y);}}//绘制填充区域的边界path.close();valuePaint.setStyle(Paint.Style.STROKE);canvas.drawPath(path, valuePaint);//绘制填充区域valuePaint.setStyle(Paint.Style.FILL_AND_STROKE);canvas.drawPath(path, valuePaint);}123456789101112131415161718192223242526272829123456789101112131415161718192223242526272829

绘制分数

/*** 绘制分数** @param canvas 画布*/private void drawScore(Canvas canvas) {int score = 0;//计算总分for (int i = 0; i < dataCount; i++) {score += data[i];}canvas.drawText(score + "", centerX, centerY + scoreSize / 2, scorePaint);}1234567891011121312345678910111213

绘制标题

/*** 绘制标题** @param canvas 画布*/private void drawTitle(Canvas canvas) {for (int i = 0; i < dataCount; i++) {int x = getPoint(i, radarMargin, 1).x;int y = getPoint(i, radarMargin, 1).y;Bitmap bitmap = BitmapFactory.decodeResource(getResources(), icons[i]);int iconHeight = bitmap.getHeight();float titleWidth = titlePaint.measureText(titles[i]);//底下两个角的坐标需要向下移动半个图片的位置（1、2）if (i == 1) {y += (iconHeight / 2);} else if (i == 2) {x -= titleWidth;y += (iconHeight / 2);} else if (i == 3) {x -= titleWidth;} else if (i == 4) {x -= titleWidth / 2;}canvas.drawText(titles[i], x, y, titlePaint);}}12345678910111213141516171819222324252627281234567891011121314151617181922232425262728

绘制图标

/*** 绘制图标** @param canvas 画布*/private void drawIcon(Canvas canvas) {for (int i = 0; i < dataCount; i++) {int x = getPoint(i, radarMargin, 1).x;int y = getPoint(i, radarMargin, 1).y;Bitmap bitmap = BitmapFactory.decodeResource(getResources(), icons[i]);int iconWidth = bitmap.getWidth();int iconHeight = bitmap.getHeight();float titleWidth = titlePaint.measureText(titles[i]);//上面获取到的x、y坐标是标题左下角的坐标//需要将图标移动到标题上方居中位置if (i == 0) {x += (titleWidth - iconWidth) / 2;y -= (iconHeight + getTextHeight(titlePaint));} else if (i == 1) {x += (titleWidth - iconWidth) / 2;y -= (iconHeight / 2 + getTextHeight(titlePaint));} else if (i == 2) {x -= (iconWidth + (titleWidth - iconWidth) / 2);y -= (iconHeight / 2 + getTextHeight(titlePaint));} else if (i == 3) {x -= (iconWidth + (titleWidth - iconWidth) / 2);y -= (iconHeight + getTextHeight(titlePaint));} else if (i == 4) {x -= iconWidth / 2;y -= (iconHeight + getTextHeight(titlePaint));}canvas.drawBitmap(bitmap, x, y, titlePaint);}}12345678910111213141516171819222324252627282930313233343536371234567891011121314151617181922232425262728293031323334353637

/*** 获取文本的高度** @param paint 文本绘制的画笔* @return 文本高度*/private int getTextHeight(Paint paint) {Paint.FontMetrics fontMetrics = paint.getFontMetrics();return (int) (fontMetrics.descent - fontMetrics.ascent);}1234567891012345678910

OK，到这里主要的绘制工作就完成了，图标是在>戳这里<下载的，有些图标实在找不到，就用相似的代替了。