android自定义蜘蛛网状图(零基础)

android studio 相关说明 | 2019-01-03 05:21

先不说别的,直接上效果图

一、创建项目

创建项目之前必须保证电脑安装了android studio,我的软件配置如下

双击打开软件后点击创建新项目(不会的话之前的文章有教程),创建项目的过程如下图

上图中只需改第一项项目名字,第二项是空间名字,可以按自己喜欢的填写或者默认,第三个是存储的地址,也可以自由更改,然后next(下一步),下图

只勾选第一项,选择目标系统(这里选的最低支持android4.4),下一步

空白活动(empty activity)下一步

上图第一个是活动名字,第二个是布局文件名,可以选择默认,然后finish完成项目创建

接着等待项目配制完成,大约1~5分钟(具体看电脑配置和网络情况(有时需要//翻//墙//)),项目创建成功后在下图com.jesus.holy.Spdier处点击鼠标右键选择新建java Class

创建完成后如下图

让java类继承与View(android.view.View),继承后Spdier类名会有红色提示,然后Windows按着alt+回车键,选择需要复写的初始化方法,这里选择了两个,具体代码如下

package com.jesus.holy.myspider;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.support.annotation.Nullable;import android.util.AttributeSet;import android.view.View;public class Spider extends View {    //数据个数    private int count = 6;    private float radius;//网格最大半径    private int centerX;//中心X    private int centerY;//中心Y    //画笔,radarPaint是用来画网格的,valuePaint用来画中间不规则的图形    private Paint radarPaint,valuePaint;    //计算出每个夹角的度数    private float angle = (float) (Math.PI*2/count);    //数据    private double[] data={2,5,1,6,4,5};    //最大值    private float maxValue=6;    public Spider(Context context) {        this(context,null);    }    public Spider(Context context,  AttributeSet attrs) {        super(context, attrs);        init();    }    private void init() {        radarPaint = new Paint();//新建画笔        radarPaint.setStyle(Paint.Style.STROKE);//设置模式为描边        radarPaint.setColor(Color.GREEN);//颜色设置为绿色        valuePaint = new Paint();        valuePaint.setColor(Color.BLUE);//颜色设置为蓝色        valuePaint.setStyle(Paint.Style.FILL);//颜色设置为绿色    }    //设置图形宽度高度,中心点位置    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        radius = Math.min(h, w)/2*0.9f;        //中心坐标        centerX = w/2;        centerY = h/2;        postInvalidate();//界面刷新        super.onSizeChanged(w, h, oldw, oldh);    }    /**     * 绘制正多边形     */    private void drawPolygon(Canvas canvas){        Path path = new Path();        float r = radius/(count);//r是蜘蛛丝之间的间距        for(int i=1;i<=count;i++){//中心点不用绘制            float curR = r*i;//当前半径            path.reset();            for(int j=0;j<count;j++){                if(j==0){                    path.moveTo(centerX+curR,centerY);                }else{                    //根据半径,计算出蜘蛛丝上每个点的坐标                    float x = (float) (centerX+curR*Math.cos(angle*j));                    float y = (float) (centerY+curR*Math.sin(angle*j));                    path.lineTo(x,y);                }            }            path.close();//闭合路径            canvas.drawPath(path, radarPaint);        }    }    /**     * 绘制直线     */    private void drawLines(Canvas canvas){        Path path = new Path();        for(int i=0;i<count;i++){            path.reset();            path.moveTo(centerX, centerY);            float x = (float) (centerX+radius*Math.cos(angle*i));            float y = (float) (centerY+radius*Math.sin(angle*i));            path.lineTo(x, y);            canvas.drawPath(path, radarPaint);        }    }    /**     * 绘制区域     * @param canvas     */    private void drawRegion(Canvas canvas){        Path path = new Path();        valuePaint.setAlpha(127);        for(int i=0;i<count;i++){            double percent = data[i]/maxValue;            float x = (float) (centerX+radius*Math.cos(angle*i)*percent);            float y = (float) (centerY+radius*Math.sin(angle*i)*percent);            if(i==0){                path.moveTo(x, centerY);            }else{                path.lineTo(x,y);            }            //绘制小圆点            canvas.drawCircle(x,y,10,valuePaint);        }        //绘制填充区域        valuePaint.setStyle(Paint.Style.FILL_AND_STROKE);        canvas.drawPath(path, valuePaint);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        drawPolygon(canvas);        drawLines(canvas);        drawRegion(canvas);    }}布局文件的内容如下

选择对应的模拟器或手机,接着手机上会出现结果

到此结束