Android初学之自定义简单蛛网（雷达）图

最新推荐文章于 2023-03-07 08:00:53 发布
最新推荐文章于 2023-03-07 08:00:53 发布
阅读量358 收藏 2
点赞数
分类专栏： Android笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DearLC/article/details/94398976
版权

因项目需要，需要加入蛛网图的显示，虽然GitHub上早已有很多大神的nb框架，但是还是想自己写写练练手。
项目中显示的蛛网图也比较简单，只需要控制四个进度值，这样就不需要考虑角度旋转的问题了 ，只需要控制上下左右四个进度值得变化就可以了，也就是只取上下左右四个进度值的点就可以了。
首先先获取各个重要点位信息：

@Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //初始化各边信息  获取各方向位置点起始位置信息
        left = leftRightPadding;
        top = topBottomPadding;
        right = w - leftRightPadding;
        bottom = h - topBottomPadding;
        if (centerPoint == null) {
            centerPoint = new PointF();
        }
        centerPoint.x = w / 2;
        centerPoint.y = h / 2;
        progressSpaceX = (centerPoint.x - left)/4;
        progressSpaceY = (centerPoint.y - top)/4;
        if (shader == null) {
            //初始化渐变色背景
            shader = new LinearGradient(centerPoint.x,top,centerPoint.x,bottom,Color.parseColor("#18C2B1"),
                    Color.parseColor("#FDA23E"), Shader.TileMode.MIRROR);
        }
        setProgressValue();
    }

然后实现蛛网图的刻度效果，主要代码

 		//画横竖两条背景线
        path.moveTo(left,centerPoint.y);
        path.lineTo(right,centerPoint.y);
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.parseColor("#cccccc"));
        paint.setStrokeWidth(3);
        canvas.drawPath(path,paint);
        path.reset();
        path.moveTo(centerPoint.x,top);
        path.lineTo(centerPoint.x,bottom);
        canvas.drawPath(path,paint);
        //画蛛网线
        paint.setShader(shader);
        paint.setStrokeWidth(3);
        for (int i = 0; i < 4; i++) {
            path.reset();
            path.moveTo(left + progressSpaceX * i,centerPoint.y);
            path.lineTo(centerPoint.x,top + progressSpaceY * i);
            path.lineTo(right -  progressSpaceX * i,centerPoint.y);
            path.lineTo(centerPoint.x,bottom - progressSpaceY * i);
            path.lineTo(left + progressSpaceX * i,centerPoint.y);
            canvas.drawPath(path,paint);
            paint.setStrokeWidth(2);
        }

在这里插入图片描述

然后画个进度标题（示例代码写死，实际应用可自定义标题）：

 		//画标题
        paint.setShader(null);
        paint.setColor(textColor);
        paint.setStyle(Paint.Style.FILL);
        paint.setTextSize(textSize);
        paint.setTextAlign(Paint.Align.CENTER);
        paint.getTextBounds("节能",0,2,rect);
        //计算文字高度  左右标题居中显示
        float de = rect.height();
        canvas.drawText("节能",centerPoint.x, topBottomPadding /2,paint);
        canvas.drawText("灾害",centerPoint.x,bottom + topBottomPadding /2,paint);
        canvas.drawText("卫生",leftRightPadding / 2,centerPoint.y + de/2,paint);
        canvas.drawText("效能",leftRightPadding / 2 + right,centerPoint.y + de/2,paint);

在这里插入图片描述

之后画进度值：

		//画四个方向进度圆点
        paint.setColor(Color.parseColor("#00BDAA"));
        paint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(topPoint.x,topPoint.y,pointCircleRadius,paint);
        canvas.drawCircle(leftPoint.x,leftPoint.y,pointCircleRadius,paint);
        canvas.drawCircle(rightPoint.x,rightPoint.y,pointCircleRadius,paint);
        canvas.drawCircle(bottomPoint.x,bottomPoint.y,pointCircleRadius,paint);
        //画四个方向进度区域
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5);
        path.reset();
        path.moveTo(leftPoint.x,leftPoint.y);
        path.lineTo(topPoint.x,topPoint.y);
        path.lineTo(rightPoint.x,rightPoint.y);
        path.lineTo(bottomPoint.x,bottomPoint.y);
        path.lineTo(leftPoint.x,leftPoint.y);
        canvas.drawPath(path,paint);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.parseColor("#b355C7C2"));
        canvas.drawPath(path,paint);

在这里插入图片描述

最后加上动态效果：

 /**
     * 启动动画
     * @param topProgress 上方进度值
     * @param rightProgress 右方进度值
     * @param bottomProgress 底部进度值
     * @param leftProgress 左方进度值
     */
    private void startAnimator(final double topProgress,final double rightProgress,final double bottomProgress, final double leftProgress){
        ValueAnimator topAnimator = ValueAnimator.ofInt(0, 100);
        topAnimator.setDuration(2000);
        topAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Integer v = (Integer) animation.getAnimatedValue();
                DayHealthProgressView.this.topProgress = v * topProgress/100 ;
                DayHealthProgressView.this.rightProgress = v* rightProgress/100 ;
                DayHealthProgressView.this.bottomProgress = v* bottomProgress/100 ;
                DayHealthProgressView.this.leftProgress = v* leftProgress/100 ;
                setProgressValue();
                invalidate();
            }
        });
        topAnimator.start();
    }

最终效果如下：
在这里插入图片描述

完整代码：

package com.zc.tt;

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PointF;
import android.graphics.Rect;
import android.graphics.Shader;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

import com.blankj.utilcode.util.ConvertUtils;

/**
 * 自定义每日健康蛛网图
 * @author zc
 */
public class DayHealthProgressView extends View {
    /**画笔*/
    private Paint paint;
    private Path path;
    private Rect rect;
    /**
     * 控制四个点信息，中心点、上方进度值点、下方进度值点、左方进度值点、右方进度值点
     */
    private PointF centerPoint,topPoint, bottomPoint,leftPoint,rightPoint;
    /**蛛网图各方向起始位置*/
    private float left,right,top,bottom;
    /**上下间距*/
    private float topBottomPadding;
    /**左右间距*/
    private float leftRightPadding;
    /**左右进度值单位长度、上下进度值单位长度*/
    private float progressSpaceX,progressSpaceY;
    /**背景shader*/
    private LinearGradient shader;
    /**字体大小*/
    private float textSize;
    /**字体颜色*/
    private int textColor;
    /**上方进度值*/
    private double topProgress;
    /**下方进度值*/
    private double bottomProgress;
    /**左方进度值*/
    private double leftProgress;
    /**右方进度值*/
    private double rightProgress;
    /**中心店圆的Radius*/
    private float pointCircleRadius;
    public DayHealthProgressView(Context context) {
        super(context);
        init();
    }

    public DayHealthProgressView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //初始化各边信息  获取各方向位置点起始位置信息
        left = leftRightPadding;
        top = topBottomPadding;
        right = w - leftRightPadding;
        bottom = h - topBottomPadding;
        if (centerPoint == null) {
            centerPoint = new PointF();
        }
        centerPoint.x = w / 2;
        centerPoint.y = h / 2;
        progressSpaceX = (centerPoint.x - left)/4;
        progressSpaceY = (centerPoint.y - top)/4;
        if (shader == null) {
            //初始化渐变色背景
            shader = new LinearGradient(centerPoint.x,top,centerPoint.x,bottom,Color.parseColor("#18C2B1"),
                    Color.parseColor("#FDA23E"), Shader.TileMode.MIRROR);
        }
        setProgressValue();
    }

    /**
     * 初始化
     */
    private void init(){
        if (topPoint == null) {
            topPoint = new PointF();
        }
        if (leftPoint == null) {
            leftPoint = new PointF();
        }
        if (bottomPoint == null) {
            bottomPoint = new PointF();
        }
        if (rightPoint == null) {
            rightPoint = new PointF();
        }
        if (centerPoint == null) {
            centerPoint = new PointF();
        }
        paint = new Paint();
        path = new Path();
        paint.setAntiAlias(true);
        //上下间距和左右间距不一样  左右间距过小会导致文字信息显示不全
        topBottomPadding = ConvertUtils.dp2px(30);
        leftRightPadding = ConvertUtils.dp2px(36);
        textSize = ConvertUtils.sp2px(16);
        textColor = Color.parseColor("#333333");
        rect = new Rect();
        pointCircleRadius = ConvertUtils.dp2px(3);
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        //画横竖两条线
        path.moveTo(left,centerPoint.y);
        path.lineTo(right,centerPoint.y);
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.parseColor("#cccccc"));
        paint.setStrokeWidth(3);
        canvas.drawPath(path,paint);
        path.reset();
        path.moveTo(centerPoint.x,top);
        path.lineTo(centerPoint.x,bottom);
        canvas.drawPath(path,paint);
        //画蛛网线
        paint.setShader(shader);
        paint.setStrokeWidth(3);
        for (int i = 0; i < 4; i++) {
            path.reset();
            path.moveTo(left + progressSpaceX * i,centerPoint.y);
            path.lineTo(centerPoint.x,top + progressSpaceY * i);
            path.lineTo(right -  progressSpaceX * i,centerPoint.y);
            path.lineTo(centerPoint.x,bottom - progressSpaceY * i);
            path.lineTo(left + progressSpaceX * i,centerPoint.y);
            canvas.drawPath(path,paint);
            paint.setStrokeWidth(2);
        }
        //画标题
        paint.setShader(null);
        paint.setColor(textColor);
        paint.setStyle(Paint.Style.FILL);
        paint.setTextSize(textSize);
        paint.setTextAlign(Paint.Align.CENTER);
        paint.getTextBounds("节能",0,2,rect);
        //计算文字高度  左右标题居中显示
        float de = rect.height();
        canvas.drawText("节能",centerPoint.x, topBottomPadding /2,paint);
        canvas.drawText("灾害",centerPoint.x,bottom + topBottomPadding /2,paint);
        canvas.drawText("卫生",leftRightPadding / 2,centerPoint.y + de/2,paint);
        canvas.drawText("效能",leftRightPadding / 2 + right,centerPoint.y + de/2,paint);
        //画四个方向进度圆点
        paint.setColor(Color.parseColor("#00BDAA"));
        paint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(topPoint.x,topPoint.y,pointCircleRadius,paint);
        canvas.drawCircle(leftPoint.x,leftPoint.y,pointCircleRadius,paint);
        canvas.drawCircle(rightPoint.x,rightPoint.y,pointCircleRadius,paint);
        canvas.drawCircle(bottomPoint.x,bottomPoint.y,pointCircleRadius,paint);
        //画四个方向进度区域
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5);
        path.reset();
        path.moveTo(leftPoint.x,leftPoint.y);
        path.lineTo(topPoint.x,topPoint.y);
        path.lineTo(rightPoint.x,rightPoint.y);
        path.lineTo(bottomPoint.x,bottomPoint.y);
        path.lineTo(leftPoint.x,leftPoint.y);
        canvas.drawPath(path,paint);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.parseColor("#b355C7C2"));
        canvas.drawPath(path,paint);
    }

    /**
     * 确定进度圆点值
     */
    private void setProgressValue() {
        if (topPoint == null) {
            topPoint = new PointF();
        }
        if (leftPoint == null) {
            leftPoint = new PointF();
        }
        if (bottomPoint == null) {
            bottomPoint = new PointF();
        }
        if (rightPoint == null) {
            rightPoint = new PointF();
        }
        topPoint.y = (float) (((centerPoint.y - top) * (100 - topProgress)) / 100 + top);
        topPoint.x = centerPoint.x;
        bottomPoint.y = (float) ((bottomProgress * (centerPoint.y - topBottomPadding))/100 + centerPoint.y);
        bottomPoint.x = centerPoint.x;
        leftPoint.x = (float) (((centerPoint.x - left) * (100 - leftProgress)) / 100 + left);
        leftPoint.y = centerPoint.y;
        rightPoint.x = (float) ((rightProgress * (centerPoint.x - leftRightPadding))/100 + centerPoint.x);
        rightPoint.y = centerPoint.y;
    }
    public void setProgress(double topProgress,double rightProgress,double bottomProgress,double leftProgress){
        startAnimator(topProgress,rightProgress,bottomProgress,leftProgress);
    }

    /**
     * 启动动画
     * @param topProgress 上方进度值
     * @param rightProgress 右方进度值
     * @param bottomProgress 底部进度值
     * @param leftProgress 左方进度值
     */
    private void startAnimator(final double topProgress,final double rightProgress,final double bottomProgress, final double leftProgress){
        ValueAnimator topAnimator = ValueAnimator.ofInt(0, 100);
        topAnimator.setDuration(2000);
        topAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Integer v = (Integer) animation.getAnimatedValue();
                DayHealthProgressView.this.topProgress = v * topProgress/100 ;
                DayHealthProgressView.this.rightProgress = v* rightProgress/100 ;
                DayHealthProgressView.this.bottomProgress = v* bottomProgress/100 ;
                DayHealthProgressView.this.leftProgress = v* leftProgress/100 ;
                setProgressValue();
                invalidate();
            }
        });
        topAnimator.start();
    }
    public double getTopProgress() {
        return topProgress;
    }

    public void setTopProgress(double topProgress) {
        this.topProgress = topProgress;
        setProgressValue();
        invalidate();
    }

    public double getBottomProgress() {
        return bottomProgress;
    }

    public void setBottomProgress(double bottomProgress) {
        this.bottomProgress = bottomProgress;
        setProgressValue();
        invalidate();
    }

    public double getLeftProgress() {
        return leftProgress;
    }

    public void setLeftProgress(double leftProgress) {
        this.leftProgress = leftProgress;
        setProgressValue();
        invalidate();
    }

    public double getRightProgress() {
        return rightProgress;
    }

    public void setRightProgress(double rightProgress) {
        this.rightProgress = rightProgress;
        setProgressValue();
        invalidate();
    }

    public float getPointCircleRadius() {
        return pointCircleRadius;
    }

    public void setPointCircleRadius(float pointCircleRadius) {
        this.pointCircleRadius = pointCircleRadius;
        invalidate();
    }
}
DearLC
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android-SpiderPlotView蛛网图
08-12
SpiderPlotView蛛网图
Android雷达图（蜘蛛网图）源码
09-22
需要在res/values/attrs.xml中添加以下 <declare-styleable name="MyNetPic"> <attr name="lineColor" format="color"/><!-- 线的颜色 --> <attr name="cotentColor" format="color"/><!-- 图形的颜色 --> <attr name="side" format="dimension"/> <!-- 三角形边长 --> <attr name="distance" format="dimens
android 自定义雷达图,Android自定义蛛网图（雷达图）
weixin_39939661的博客
05-25 220
前言纸上得来终觉浅，绝知此事要躬行。直接上代码import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.support.ann...
【Android】自定义蜘蛛网图
weixin_43927892的博客
08-31 534
步骤 步骤一：新建一个类继承自view 步骤二：重写onDraw()函数，需要绘制网格图，中位线以及数据的填充方法 简单思路:onDraw函数中，我们写了三个新的函数，分别用来绘制网格，中位线和数据 ，需要的用到三只画笔，可以自定义有几个方面，比如语数英政史地等六门课程的蜘蛛图，也可以是九门，以及最大值，应该有个统一的最大值，比如说都是150分满分，然后将你所有的成绩输入，绘制一个蜘蛛图。 实现 ...
android 自定义蜘蛛网状图形
no_loafer的博客
12-03 369
话不都说，先上图 如图所示，玩lol的玩家都知道，战力分析图，那么怎么实现呢？ 具体思路是，1.首先话六边形，用Path进行每个点的链接 2.画连接线，中心点跟最外层六边形各个顶点 3.画数据图，用path进行连接数据，然后paint采用填充模式即可 4.写文...
Android 线程之自定义带消息循环Looper的实例
01-05
Android 线程之自定义带消息循环Looper的实例 Android系统的UI线程是一种带消息循环（Looper）机制的线程，同时Android也提供了封装有消息循环（Looper）的HandlerThread类，这种线程，可以绑定Handler()对象，并...
Android 百度地图之自定义公交路线源码.rar
03-24
本项目"Android 百度地图之自定义公交路线源码"旨在帮助开发者学习如何利用百度地图API实现自定义公交路线的功能，这对于创建个性化的导航应用或者提升用户体验具有很大价值。 首先，我们要理解自定义公交路线的...
mono for android 之 自定义控件
04-26
对于初学者来说，理解并实践这些知识点是提升Android开发技能的关键一步。在实际开发中，你可能需要根据具体需求进行更复杂的定制，例如添加动画效果、绘制自定义图形等。不断探索和实践，你将能够熟练掌握自定义...
Android开发之自定义标题
07-03
在Android应用开发中，自定义标题（Title）是一种常见的需求，它可以帮助我们为应用程序提供更加个性化和功能丰富的界面。自定义标题不仅可以改变默认的样式，还可以添加额外的功能按钮或者实现更复杂的交互效果。本...
Android-绚丽的自定义圆角图片简单实用
08-13
本教程将深入探讨如何创建一个自定义的圆角图片视图，即`RoundImageView`，并阐述其在实际项目中的简单实用价值。 首先，我们要明白在Android中实现圆角图片通常有几种方法，如使用`BitmapShader`、`...
Android RadarView雷达图（蜘蛛网图）的实现代码
01-20
公司产品需要一个雷达图来展示各维度的比重，网上找了一波，学到不少，直接自己上手来撸一记 无图言虚空 简单分析一波，确定雷达图正几边形的–正五边形 int count=5，分为几个层数–4 层 int layerCount=4 @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); drawPolygon(canvas);//画边 drawLines(canvas);//画线 drawText(canvas);//描绘文字 drawRegion(canvas);//覆盖区域 } 主
iOS-Charts开源图表库使用（安卓MPAndroidChart的移植）
03-28
比较的成熟图表类第三方库，包括折线图，饼状图，雷达图等，可以修改源码，满足项目需要。
Android雷达图(蜘蛛网图)绘制
热门推荐
crazychen的专栏
12-03 3万+
简介最近因为项目需求，要实现一款雷达图来表示用户的各种成就值 雷达图的绘制很简单，只要思路清晰按部就班的绘制就可以了，其中使用得最多，是路径path类的使用，使用这个类可以让我们更加方便地绘制出正多边形等效果。 效果图如下： 使用方式使用方式很简单，只要在布局文件里面，直接使用这个控件就好了，记得给它设置一个合适的具体的大小。 另外可以控制绘制的是多少边形，通过提供的一些public方法，可
android 自定义view: 蛛网/雷达图(三)
高级开发者进阶ing... QaQ
09-27 1163
本系列自定义View全部采用ktmac4.1.31.5.0本篇效果:蛛网图其实就是由多个多边形来组成蛛网的,那么先来画1个多边形来练练手。
Android实现蛛网背景效果
weixin_33769125的博客
03-19 115
CobWeb Android实现的蛛网背景控件 支持设置小球数量、加速度、连线粗细、小球半径、触摸点半径、引力强度、连线透明度、最大连线距离 效果： github地址： github.com/SheepYang19… 转载于:https://juejin.im/post/5c9056125188252dae0916ff...
Android蜘蛛网图/雷达图
程序猿的玻璃心的专栏
10-27 865
直接上图 上一篇博客里本来想记录些基础知识，后来图画出来了，想想就算了，直接把东西贴出来，各位自己去看。 东西很简单的。 先定义继承View的类，以及实现类public class SpiderView extends View { public SpiderView(Context context) { super(context); init()
Android自定义View之蜘蛛网雷达效果
最新发布
郭霖
03-07 650
/ 今日科技快讯 /近日，在将聊天机器人Bard作为主要用于搜索的AI服务推出后，谷歌似乎正在偏离初衷，没有提供任何具体的用例。在最近举行的全体员工会议上，该公司高管辩称，Bard不仅仅用于搜索，他们正探索构建一种协作式AI服务。/ 作者简介 /本篇文章转自史大拿的博客，文章主要分享了自定义View中蛛网的效果，相信会对大家有所帮助！原文地址：https://juejin.cn/p...
三、内链的布局技巧在于编织小循环组合的蜘蛛网
李蓝箫
10-01 1443
三、内链的布局技巧在于编织小循环组合的蜘蛛网。       有了标题，有了文章，还需要好的内链结构，以引导用户了解更多有兴趣的内容，以帮助搜索引擎抓取更多的有价值内容。内链在网站内部优化中一个重要而有容易忽略的东西。重要，是因为好的内链结构，给网站内部优化乃至排名带来非常好的提升；不容易，是因为写文章的额时候，很容易把内链给忽略掉。一个好的内链，就是一个非常好的蜘蛛网，有“树根”的扩张性
Android 雷达图（网状图）
刘永祥的专栏
03-18 3971
有的称为雷达图，也有的说是网状图具体什么图就是这图吧，先看效果 要想实现此图其实也不是很难，由于当时刚见到图的时候有点不知所措，因为不是简单的画圆，而是需要根据数据的大小进行在交叉的地方画点，而且所要画的点是有区域范围的，不同的区域显示的点的颜色是不同的，而且还要把这些点连接起来，当时就感觉有点蒙，不过还好还是做出来了 不扯了上代码public class RadarView extend
打造Android UI：自定义视图
"Building Android UIs with Custom Views"是一本深入介绍Android自定义视图开发的指南，涵盖了从基础到高级的主题，旨在帮助开发者充分利用Android平台的潜力，创造出独特且高效的应用界面。无论你是初学者还是经验...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值