1.先準備好圖片
2.新建一個CreditScoreView類，繼承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);
public CreditScoreView(Context context) {
this(context, null);
}
public CreditScoreView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CreditScoreView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mainPaint = new Paint();
mainPaint.setAntiAlias(true);
mainPaint.setStrokeWidth(0.3f);
mainPaint.setColor(Color.WHITE);
mainPaint.setStyle(Paint.Style.STROKE);
valuePaint = new Paint();
valuePaint.setAntiAlias(true);
valuePaint.setColor(Color.WHITE);
valuePaint.setAlpha(120);
valuePaint.setStyle(Paint.Style.FILL_AND_STROKE);
scorePaint = new Paint();
scorePaint.setAntiAlias(true);
scorePaint.setTextSize(scoreSize);
scorePaint.setColor(Color.WHITE);
scorePaint.setTextAlign(Paint.Align.CENTER);
scorePaint.setStyle(Paint.Style.FILL);
titlePaint = new Paint();
titlePaint.setAntiAlias(true);
titlePaint.setTextSize(titleSize);
titlePaint.setColor(Color.WHITE);
titlePaint.setStyle(Paint.Style.FILL);
iconPaint = new Paint();
iconPaint.setAntiAlias(true);
}
@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);
}
@Override
public void draw(Canvas canvas) {
super.draw(canvas);
drawPolygon(canvas);
drawLines(canvas);
drawRegion(canvas);
drawScore(canvas);
drawTitle(canvas);
drawIcon(canvas);
}
/**
* 繪製多邊形
*
* @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);
}
}
/**
* 繪製覆蓋區域
*
* @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 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 paint 文本繪製的畫筆
* @return 文本高度
*/
private int getTextHeight(Paint paint) {
Paint.FontMetrics fontMetrics = paint.getFontMetrics();
return (int) (fontMetrics.descent - fontMetrics.ascent);
}
}
3.DensityUtils類
public class DensityUtils {
public static int dp2px(Context context, float dp) {
//獲取設備密度
float density = context.getResources().getDisplayMetrics().density;
//4.3, 4.9, 加0.5是爲了四捨五入
int px = (int) (dp * density + 0.5f);
return px;
}
public static float px2dp(Context context, int px) {
//獲取設備密度
float density = context.getResources().getDisplayMetrics().density;
float dp = px / density;
return dp;
}
}
4.在activity的xml中寫上這個控件，設上背景就好
<com.example.jy_mac_01.myapplication.CreditScoreView
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_centerInParent="true"
android:background="@color/colorPrimary" />
5.運行
6.完結