Android仿支付寶上芝麻信用分雷達圖_Android

一、首先看下支付寶上芝麻信用分的效果圖：

二、思路

     1、確定雷達圖中心點座標

     2、繪製多邊形及連接線

     3、根據維度值繪製覆蓋地區

     4、繪製分數

     5、繪製每個維度標題文字和表徵圖

三、實現

擷取布局的中心座標

在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); ... @Override protected 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); } ...}

繪製多邊形和連接線

主要看下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); }}

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);}

多邊形和連接線

繪製覆蓋地區

/** * 繪製覆蓋地區 * * @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);}

覆蓋地區

繪製分數

/** * 繪製分數 * * @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);}

分數

繪製標題

/** * 繪製標題 * * @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); }}

標題

繪製表徵圖

/** * 繪製表徵圖 * * @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); }}/** * 擷取文本的高度 * * @param paint 文本繪製的畫筆 * @return 文本高度 */private int getTextHeight(Paint paint) { Paint.FontMetrics fontMetrics = paint.getFontMetrics(); return (int) (fontMetrics.descent - fontMetrics.ascent);}

表徵圖

總結

好了，到這裡主要的繪製工作就完成了，有些表徵圖實在找不到，就用相似的代替了。希望這篇文章的內容對各位Android開發人員們能有所協助，如果有疑問大家可以留言交流。