自定义View进阶篇（多边形各属性值分布图）

先来个效果图：

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


}