先来个效果图:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e4d7cb"
tools:context="amusement.czq_901201.cn.com.amusement.MainActivity">
<amusement.czq_901201.cn.com.amusement.PolygonsView
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>
再来分享一下源码
</pre><pre name="code" class="java">package amusement.czq_901201.cn.com.amusement;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.View;
import java.util.ArrayList;
import java.util.Collections;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import static android.R.attr.width;
/**
* Created by Administrator on 2016/11/8.
*/
public class PolygonsView extends View {
private Context context;
/**
* 六边形中心点x
*/
private int cx;
/**
* 六边形中心点y
*/
private int cy;
/**
* 父控件的宽度
*/
private float pWidth;
/**
* 在外层7变形的半价
*/
private int outR;
/**
* 线宽
*/
private int stroke;
private Paint paint;
/**
* 指标名称
*/
private List<String> fightNames;
/**
* 指标值(与名称对应)
*/
private List<Double> fightValues;
/**
* 进度条长度
*/
private int progressWidth;
public PolygonsView(Context context) {
super(context);
inits(context);
}
public PolygonsView(Context context, AttributeSet attrs) {
super(context, attrs);
inits(context);
}
public PolygonsView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
inits(context);
}
/**
* 初始化
*/
private void inits(Context context) {
this.context = context;
paint = new Paint();
paint.setAntiAlias(true);
paint.setStrokeWidth(dip2px(3));
paint.setStyle(Paint.Style.STROKE);
//TODO 模拟数据
fightNames = new ArrayList<>();
fightValues = new ArrayList<>();
Collections.addAll(fightNames, "财富", "人脉", "颜值", "睡觉", "吃饭", "吹牛", "做梦");
Collections.addAll(fightValues, 77.7, 21.3, 31.1, 91.1, 78.0, 62.0, 33.9);
}
@Override
protected void onDraw(Canvas canvas) {
//画中心间隔线
drawCenterLine(canvas);
//画矩形
drawRecT(canvas);
//画文字
drawText(canvas);
//画各项值
drawLine(canvas);
//画进度条
drawProgressBar(canvas);
super.onDraw(canvas);
}
/**
* 画进度条
*
* @param canvas
*/
private void drawProgressBar(Canvas canvas) {
paint.setColor(Color.parseColor("#FFA2A0A4"));
paint.setStrokeWidth(dip2px(1));
Rect rect = new Rect();
//返回包围整个字符串的最小的一个Rect区域
paint.getTextBounds("财富", 0, 1, rect);
int strwid = rect.width();
int strhei = rect.height();
int startTextX = dip2px(12);
int startTextY = cy+outR+dip2px(45);
int startLineX = startTextX+strwid+dip2px(30);
int startLineY = startTextY-strhei/3;
int marginTop = dip2px(10)+strhei;
for (int i = 0; i < 7; i++) {
canvas.drawText(fightNames.get(i),startTextX,startTextY+marginTop*i,paint);
canvas.drawLine(startLineX,startLineY+marginTop*i,startLineX+progressWidth,startLineY+marginTop*i,paint);
}
paint.setColor(Color.parseColor("#FFE70A0E"));
paint.setStrokeWidth(4);
float progressX = 0; float progressY = 0;float r = dip2px(3);
for (int i = 0; i < 7; i++) {
progressX = (float) (startLineX+progressWidth*fightValues.get(i)/100.0);
progressY = startLineY+marginTop*i;
canvas.drawLine(startLineX,progressY, progressX,progressY,paint);
canvas.drawCircle(progressX,progressY,r,paint);
}
}
/**
* 画各项值
*
* @param canvas
*/
private void drawLine(Canvas canvas) {
paint.setColor(Color.parseColor("#FFE70A0E"));
paint.setStrokeWidth(dip2px(2));
Path path = new Path();
path.moveTo(cx, cy - getR(0));
path.lineTo((float) (cx + getR(1) * Math.sin(getFuDu())), (float) (cy - getR(1) * Math.cos(getFuDu())));
path.lineTo((float) (cx + getR(1) * Math.sin(getFuDu())), (float) (cy - getR(1) * Math.cos(getFuDu())));
path.lineTo((float) (cx + getR(2) * Math.cos(getFuDu() * 2 - Math.PI / 2)), (float) (cy + getR(2) * Math.sin(getFuDu() * 2 - Math.PI / 2)));
path.lineTo((float) (cx + getR(3) * Math.cos(getFuDu() * 3 - Math.PI / 2)), (float) (cy + getR(3) * Math.sin(getFuDu() * 3 - Math.PI / 2)));
path.lineTo((float) (cx - getR(4) * Math.cos(getFuDu() * 3 - Math.PI / 2)), (float) (cy + getR(4) * Math.sin(getFuDu() * 3 - Math.PI / 2)));
path.lineTo((float) (cx - getR(5) * Math.cos(getFuDu() * 2 - Math.PI / 2)), (float) (cy + getR(5) * Math.sin(getFuDu() * 2 - Math.PI / 2)));
path.lineTo((float) (cx - getR(6) * Math.sin(getFuDu())), (float) (cy - getR(6) * Math.cos(getFuDu())));
path.close();
canvas.drawPath(path, paint);
}
/**
* 通过下标获取改点到中心的距离
*
* @param i
* @return
*/
private float getR(int i) {
return (float) (fightValues.get(i) / 100 * outR + 0.5f);
}
/**
* 画文字
*
* @param canvas
*/
private void drawText(Canvas canvas) {
paint.reset();
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.parseColor("#5d5d5d"));
paint.setTextSize(dip2px(16));
//Android中获取字符串长度、宽度(所占像素宽度)
Rect rect = new Rect();
//返回包围整个字符串的最小的一个Rect区域
paint.getTextBounds("财富", 0, 1, rect);
int strwid = rect.width();
int strhei = rect.height();
canvas.save();
for (int i = 0; i < 7; i++) {
canvas.drawText(fightNames.get(i), cx - strwid, cy - outR - strhei / 2, paint);
canvas.rotate(360 / 7.0f, cx, cy);
}
canvas.restore();
}
/**
* 画矩形
*
* @param canvas
*/
private void drawRecT(Canvas canvas) {
paint.setStrokeWidth(dip2px(1));
/*设置paint 的style为 FILL:实心*/
paint.setStyle(Paint.Style.FILL);
canvas.save();
for (int i = 0; i < 7; i++) {
canvas.rotate(360 / 7.0f, cx, cy);
//方向:由外向内
//第一层
paint.setColor(Color.parseColor("#aaf4df"));
Path path = new Path();
path.moveTo(cx, cy - outR);
path.lineTo((int) (cx + Math.sin(getFuDu()) * outR + 0.5f), (int) (cy - outR * Math.cos(getFuDu()) + 0.5f));
path.lineTo((int) (cx + Math.sin(getFuDu()) * (outR - stroke) + 0.5f), (int) (cy - (outR - stroke) * Math.cos(getFuDu()) + 0.5f));
path.lineTo(cx, cy - outR + stroke);
path.close();
canvas.drawPath(path, paint);
//第二层
paint.setColor(Color.parseColor("#74e294"));
path = new Path();
path.moveTo(cx, cy - outR + stroke);
path.lineTo((int) (cx + Math.sin(getFuDu()) * (outR - stroke) + 0.5f), (int) (cy - (outR - stroke) * Math.cos(getFuDu()) + 0.5f));
path.lineTo((int) (cx + Math.sin(getFuDu()) * (outR - stroke * 2) + 0.5f), (int) (cy - (outR - stroke * 2) * Math.cos(getFuDu()) + 0.5f));
path.lineTo(cx, cy - outR + stroke * 2);
path.close();
canvas.drawPath(path, paint);
//第三层
paint.setColor(Color.parseColor("#e28062"));
path = new Path();
path.moveTo(cx, cy - outR + stroke * 2);
path.lineTo((int) (cx + Math.sin(getFuDu()) * (outR - stroke * 2) + 0.5f), (int) (cy - (outR - stroke * 2) * Math.cos(getFuDu()) + 0.5f));
path.lineTo((int) (cx + Math.sin(getFuDu()) * (outR - stroke * 3) + 0.5f), (int) (cy - (outR - stroke * 3) * Math.cos(getFuDu()) + 0.5f));
path.lineTo(cx, cy - outR + stroke * 3);
path.close();
canvas.drawPath(path, paint);
//第四层
paint.setColor(Color.parseColor("#FFEC78A8"));
path = new Path();
path.moveTo(cx, cy - outR + stroke * 3);
path.lineTo((int) (cx + Math.sin(getFuDu()) * (outR - stroke * 3) + 0.5f), (int) (cy - (outR - stroke * 3) * Math.cos(getFuDu()) + 0.5f));
path.lineTo((int) (cx + Math.sin(getFuDu()) * (outR - stroke * 4) + 0.5f), (int) (cy - (outR - stroke * 4) * Math.cos(getFuDu()) + 0.5f));
path.lineTo(cx, cy - outR + stroke * 4);
path.close();
canvas.drawPath(path, paint);
}
canvas.restore();
}
/**
* 获取弧度
*
* @return
*/
private double getFuDu() {
return Math.PI * 2 / 7;
}
/**
* 画中心间隔线
*
* @param canvas
*/
private void drawCenterLine(Canvas canvas) {
paint.setColor(Color.GREEN);
canvas.save();
for (int i = 0; i < 7; i++) {
canvas.rotate(360 / 7.0f, cx, cy);
canvas.drawLine(cx, cy, cx, cy - stroke * 4, paint);
}
canvas.restore();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
pWidth = getMeasuredWidth();
cx = (int) (pWidth / 2.0 + 0.5f);
progressWidth = (int) (pWidth * 4.0 / 5 + 0.5f);
outR = (int) (pWidth*2.0 / 7.0 + 0.5f);
cy = outR+dip2px(35);
stroke = (int) (outR / 4.0 + 0.5f);
}
/**
* 根据手机的分辨率从 dp 的单位 转成为 px(像素)
*/
public int dip2px(float dipValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dipValue * scale + 0.5f);
}
/**
* 根据手机的分辨率从 px 的单位 转成为 dp
*/
public int px2dip(float pxValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (pxValue / scale + 0.5f);
}
}