Android仿支付寶上芝麻信用分雷達圖
一、首先看下支付寶上芝麻信用分的效果圖:

二、思路
1、確定雷達圖中心點坐標(biāo)
2、繪制多邊形及連接線
3、根據(jù)維度值繪制覆蓋區(qū)域
4、繪制分?jǐn)?shù)
5、繪制每個維度的標(biāo)題文字和圖標(biāo)
三、實現(xiàn)
獲取布局的中心坐標(biāo)
在onSizeChanged(int w, int h, int oldw, int oldh)方法里面,根據(jù)View的長寬,計算出雷達圖的半徑(這里取布局寬高最小值的四分之一,可以自定義),獲取整個布局的中心坐標(biāo)。
public class CreditScoreView extends View {
//數(shù)據(jù)個數(shù)
private int dataCount = 5;
//每個角的弧度
private float radian = (float) (Math.PI * 2 / dataCount);
//雷達圖半徑
private float radius;
//中心X坐標(biāo)
private int centerX;
//中心Y坐標(biāo)
private int centerY;
//各維度標(biāo)題
private String[] titles = {"履約能力", "信用歷史", "人脈關(guān)系", "行為偏好", "身份特質(zhì)"};
//各維度圖標(biāo)
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};
//數(shù)據(jù)最大值
private float maxValue = 190;
//雷達圖與標(biāo)題的間距
private int radarMargin = DensityUtils.dp2px(getContext(), 15);
//雷達區(qū)畫筆
private Paint mainPaint;
//數(shù)據(jù)區(qū)畫筆
private Paint valuePaint;
//分?jǐn)?shù)畫筆
private Paint scorePaint;
//標(biāo)題畫筆
private Paint titlePaint;
//圖標(biāo)畫筆
private Paint iconPaint;
//分?jǐn)?shù)大小
private int scoreSize = DensityUtils.dp2px(getContext(), 28);
//標(biāo)題文字大小
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;
//中心坐標(biāo)
centerX = w / 2;
centerY = h / 2;
postInvalidate();
super.onSizeChanged(w, h, oldw, oldh);
}
...
}
繪制多邊形和連接線
主要看下getPoint方法,此方法封裝了獲取雷達圖上各個點坐標(biāo)的計算邏輯。
/**
* 繪制多邊形
*
* @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方法,參數(shù)radarMargin與percent在此步驟賦予默認值。
/**
* 獲取雷達圖上各個點的坐標(biāo)
*
* @param position 坐標(biāo)位置(右上角為0,順時針遞增)
* @return 坐標(biāo)
*/
private Point getPoint(int position) {
return getPoint(position, 0, 1);
}
/**
* 獲取雷達圖上各個點的坐標(biāo)(包括維度標(biāo)題與圖標(biāo)的坐標(biāo))
*
* @param position 坐標(biāo)位置
* @param radarMargin 雷達圖與維度標(biāo)題的間距
* @param percent 覆蓋區(qū)的的百分比
* @return 坐標(biāo)
*/
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);
}

多邊形和連接線
繪制覆蓋區(qū)域
/**
* 繪制覆蓋區(qū)域
*
* @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);
}
}
//繪制填充區(qū)域的邊界
path.close();
valuePaint.setStyle(Paint.Style.STROKE);
canvas.drawPath(path, valuePaint);
//繪制填充區(qū)域
valuePaint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.drawPath(path, valuePaint);
}

覆蓋區(qū)域
繪制分?jǐn)?shù)
/**
* 繪制分?jǐn)?shù)
*
* @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);
}

分?jǐn)?shù)
繪制標(biāo)題
/**
* 繪制標(biāo)題
*
* @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]);
//底下兩個角的坐標(biāo)需要向下移動半個圖片的位置(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);
}
}

標(biāo)題
繪制圖標(biāo)
/**
* 繪制圖標(biāo)
*
* @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坐標(biāo)是標(biāo)題左下角的坐標(biāo)
//需要將圖標(biāo)移動到標(biāo)題上方居中位置
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);
}

圖標(biāo)
總結(jié)
好了,到這里主要的繪制工作就完成了,有些圖標(biāo)實在找不到,就用相似的代替了。希望這篇文章的內(nèi)容對各位Android開發(fā)者們能有所幫助,如果有疑問大家可以留言交流。
相關(guān)文章
Android依據(jù)名字通過反射獲取在drawable中的圖片
依據(jù)圖片的名字,通過反射獲取其在drawable中的ID,在根據(jù)此ID顯示圖片,具體實現(xiàn)如下,感興趣的朋友可以參考下哈2013-06-06
Android Studio創(chuàng)建AIDL文件并實現(xiàn)進程間通訊實例
本篇文章主要介紹了Android Studio創(chuàng)建AIDL文件并實現(xiàn)進程間通訊實例,具有一定的參考價值,有興趣可以了解一下。2017-04-04
解決Kotlin 類在實現(xiàn)多個接口,覆寫多個接口中相同方法沖突的問題
這篇文章主要介紹了解決Kotlin 類在實現(xiàn)多個接口,覆寫多個接口中相同方法沖突的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
Android TextWatcher三個回調(diào)以及監(jiān)聽EditText的輸入案例詳解
這篇文章主要介紹了Android TextWatcher三個回調(diào)以及監(jiān)聽EditText的輸入案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-08-08
Android 中使用 AsyncTask 異步讀取網(wǎng)絡(luò)圖片
這篇文章主要介紹了Android 中使用 AsyncTask 異步讀取網(wǎng)絡(luò)圖片的相關(guān)資料,需要的朋友可以參考下2016-02-02

