当前位置: 开发笔记 > Android > 正文

Android实现轻量线性与百分比图表的方法

作者：yjdnvb | 来源：互联网 | 2021-09-04 11:20

这篇文章主要给大家介绍了关于Android实现轻量线性与百分比图表的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习学习吧。

前言

经常要用到图表统计数据，在WEB开发中图表绘制是一件简单的事情，因为有比较多的开源方案。但在Android中开源方案并不多。但目前github上有多个关于图表的框架，比如MPAndroidChart很好，但是很大，没必要因为一个小的图标让工程项目扩大很多，另外有些轻量级的框架，但是个人感觉都很难满足自己的需求，再者就算很好的框架，那也是别人的，只有自己动手写起来，了解前前后后的坑，自己才能成长，而且在写的过程，我们能发现更多的细节，比如绘制的时候内存分配的问题，Canvas直接绘制和通过Bitmap绘制等等，所以这篇文章的目的:

1.是给大家提供自定义view绘制的思路

2.滑动自定义view的部分区域怎么实现

3.path动画绘制的实现

4.熟悉canvas的api，总之能直接动手了，那就自定义view就通关了，所以就写这篇文章主要是鼓励大家多去实现。

效果图

线性图表实现的思路：

线性表是最基本、最简单、也是最常用的一种数据结构。线性表中数据元素之间的关系是一对一的关系，即除了第一个和最后一个数据元素之外，其它数据元素都是首尾相接的，注意，这句话只适用大部分线性表，而不是全部。

由于屏幕的宽度有限，所以我们一屏经过计算，最好显示的7个点，所以我们首先需要对我们的view宽度进行计算，首先拿到屏幕的宽度，然后再进行/7，得到每个间隔的宽度，然后乘以我们x的坐标点的个数，其中的onMeasure的方法：

 int widthParentMeasureMode = MeasureSpec.getMode(widthMeasureSpec);
 int widthParentMeasureSize = MeasureSpec.getSize(widthMeasureSpec);
 int heightParentMeasureMode = MeasureSpec.getMode(heightMeasureSpec);
 int heightParentMeasureSize = MeasureSpec.getSize(heightMeasureSpec);
 int resultWidthSize = 0;
 int resultHeightSize = 0;
 int resultWidthMode = MeasureSpec.EXACTLY;//用来对childView进行计算的
 int resultHeightMode = MeasureSpec.EXACTLY;
 int paddingWidth = getPaddingLeft() + getPaddingRight();
 int paddingHeight = getPaddingTop() + getPaddingBottom();
 ViewGroup.LayoutParams thisLp = getLayoutParams();
 switch (widthParentMeasureMode) {
  //父类不加限制给子类
  case MeasureSpec.UNSPECIFIED:
   //这个代表在布局写死了宽度
   if (thisLp.width > 0) {
    resultWidthSize = thisLp.width;
    resultWidthMode = MeasureSpec.EXACTLY;
   } else {
    resultWidthSize = (int) (getYMaxTextWidth() + mXinterval * mXdots.length);
    resultWidthMode = MeasureSpec.UNSPECIFIED;
   }
   break;
  case MeasureSpec.AT_MOST:
   //这个代表在布局写死了宽度
   if (thisLp.width > 0) {
    resultWidthSize = thisLp.width;
    resultWidthMode = MeasureSpec.EXACTLY;
   } else if (thisLp.width == ViewGroup.LayoutParams.MATCH_PARENT) {
    resultWidthSize = Math.max(0, widthParentMeasureSize - paddingWidth);
    resultWidthMode = MeasureSpec.AT_MOST;
   } else if (thisLp.width == ViewGroup.LayoutParams.WRAP_CONTENT) {
    resultWidthSize = (int) (getYMaxTextWidth() + mXinterval * mXdots.length);
    resultWidthMode = MeasureSpec.AT_MOST;
   }
   break;
  case MeasureSpec.EXACTLY:
   //这个代表在布局写死了宽度
   if (thisLp.width > 0) {
    resultWidthSize = Math.min(widthParentMeasureSize, thisLp.width);
    resultWidthMode = MeasureSpec.EXACTLY;
   } else if (thisLp.width == ViewGroup.LayoutParams.MATCH_PARENT) {
    resultWidthSize = widthParentMeasureSize;
    resultWidthMode = MeasureSpec.EXACTLY;
   } else if (thisLp.width == ViewGroup.LayoutParams.WRAP_CONTENT) {
    resultWidthSize = (int) (getYMaxTextWidth() + mXinterval * mXdots.length);
    resultWidthMode = MeasureSpec.AT_MOST;
   }
   break;
 }

 switch (heightParentMeasureMode) {
  //父view不加限制
  case MeasureSpec.UNSPECIFIED:
   //这个代表在布局写死了宽度
   if (thisLp.height > 0) {
    resultHeightSize = thisLp.height;
    resultHeightMode = MeasureSpec.EXACTLY;
   } else {
    resultHeightSize = (int) (getYMaxTextHeight() + mYvisibleNum * mYinterval + getXMaxTextHeight());
    resultHeightMode = MeasureSpec.UNSPECIFIED;
   }
   break;
  case MeasureSpec.AT_MOST:
   if (thisLp.height > 0) {
    resultHeightSize = heightParentMeasureSize;
    resultHeightMode = MeasureSpec.EXACTLY;
   } else if (thisLp.height == ViewGroup.LayoutParams.MATCH_PARENT) {
    resultHeightSize = Math.max(0, heightParentMeasureSize - paddingHeight);
    resultHeightMode = MeasureSpec.AT_MOST;
   } else if (thisLp.height == ViewGroup.LayoutParams.WRAP_CONTENT) {
    resultHeightSize = (int) (getYMaxTextHeight() + mYvisibleNum * mYinterval + getXMaxTextHeight());
    resultHeightMode = MeasureSpec.UNSPECIFIED;
   }
   break;
  case MeasureSpec.EXACTLY:
   //这个代表在布局写死了宽度
   if (thisLp.height > 0) {
    resultHeightSize = Math.min(heightParentMeasureSize, getMeasuredWidth());
    resultHeightMode = MeasureSpec.EXACTLY;
   } else if (thisLp.width == ViewGroup.LayoutParams.MATCH_PARENT) {
    resultHeightSize = heightParentMeasureSize;
    resultHeightMode = MeasureSpec.EXACTLY;
   } else if (thisLp.width == ViewGroup.LayoutParams.WRAP_CONTENT) {
    resultHeightSize = (int) (getYMaxTextHeight() + mYvisibleNum * mYinterval + getXMaxTextHeight());
    resultHeightMode = MeasureSpec.AT_MOST;
   }
   break;
 }
 setMeasuredDimension(MeasureSpec.makeMeasureSpec(resultWidthSize, resultWidthMode),
   MeasureSpec.makeMeasureSpec(resultHeightSize, resultHeightMode));

设置好了尺寸，我们就可以绘制界面，这里我们onDraw的时候，就依次绘制横线和竖线，在绘制横线的时候，将Y坐标的数字一起绘制上去，同理绘制竖线的时候，把x坐标的数字绘制上去，折线的画根据数字计算出坐标点，然后创建一个path，首先moveTo(firstX,firstY) ,然后lineTo下面的点就可以了，最后绘制上path，然而这样的话，我们在滑动的时候，会发现这个view都会跟着一起滚动了，那么我们怎样才能实现view的部分pinned呢？在这个时候，我们就需要先创建一个bitmap，将需要滑动的部分绘制到这个bitmap上去，然后bitmap在绘制到这个canvas上的时候，保持固定的位置就行了，好了再说就懵逼了，还是上代码吧：

 float tempTableLeftPadding = getYMaxTextWidth();
 if (mBitmap == null || mYNumCanvas == null) {
  mBitmap = Bitmap.createBitmap((int) (getMeasuredWidth() - getYMaxTextWidth()), getMeasuredHeight(), Bitmap.Config.ARGB_8888);
  mYNumCanvas = new Canvas(mBitmap);
 }
 mYNumCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
 mYNumCanvas.translate(mScrollPosX,0);//这段代码就是来实现滑动的操作

 //绘制横线
 for (int y = 0, size = mYdots.length; y = 1) {
   String tempText = mXdots[x - 1];
   mYNumCanvas.drawText(tempText, (float) (mXinterval * x) - mYNumPaint.measureText(tempText) / 2, (float) (mYvisibleNum * mYinterval + getYMaxTextHeight()), mYNumPaint);
  }
 }
 if (isAnimationOpen)//是否需要开启动画绘制，这个后面会解释实现方式
  mYNumCanvas.drawPath(mLineDrawPath, mLinePaint);
 else
  mYNumCanvas.drawPath(mLinePath, mLinePaint);
 canvas.drawBitmap(mBitmap, tempTableLeftPadding, getYMaxTextHeight() / 2, null);

上面的mScrollPosX是根据手势监听类GestureDetector来获取的：

@Override
public boolean onTouchEvent(MotionEvent event) {
 if (!isAnimationOpen || isDrawOver)
  return mGestureDetector.onTouchEvent(event);
 return super.onTouchEvent(event);
}

然而绘制了，我们感觉还缺少了什么，嗯，没错就是动画效果，这里我们用到通过的path绘制实现动画的方案，就是先通过PathMeasure得到path的长度，然后根据动画时间，通过ValueAnimator计算它在某个时刻的坐标，然后重新进行绘制path路径：

private void startPathAnim(long duration) {
 ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, mLineLength);
 valueAnimator.setDuration(duration);
 valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator animation) {
   float value = (Float) animation.getAnimatedValue();
   // 获取当前点坐标封装到mCurrentPosition
   mPathMeasure.getPosTan(value, mCurrentPosition, null);
   mLineDrawPath.lineTo(mCurrentPosition[0], mCurrentPosition[1]);
   invalidate();
  }
 });
 valueAnimator.start();
}

百分比圆形图表实现

其实这个的实现，相比上一个少了很多，大多是集中在onDraw方法里面，关键点是在百分比的数字，怎么横向显示在扇形区域，这里我就主要这个计算规则提出来：

private void drawText(Canvas canvas, float sweepAngle, float startAngle, ArcVo temp) {
 float middleAngle;
 middleAngle = startAngle + sweepAngle / 2;
 float startX;
 float startY;
 float endX;
 float endY;
 String drawText = temp.getPercentInCircle() * 100 + "%";
 if (middleAngle <= 90) {
  //在第四象限
  double angle = middleAngle;
  angle = Math.toRadians(angle);
  startY = endY = (float) (Math.sin(angle) * mRaduis + mRaduis);
  endX = (float) (mRaduis + Math.cos(angle) * mRaduis);
  startX = endX - UiUtils.getTextWidth(drawText, mTextPaint);
 } else if (middleAngle <= 180) {
  //在第三象限
  double angle = 180 - middleAngle;
  angle = Math.toRadians(angle);
  startY = endY = (float) (Math.sin(angle) * mRaduis + mRaduis);
  startX = (float) (mRaduis - Math.cos(angle) * mRaduis);
  endX = startX + UiUtils.getTextWidth(drawText, mTextPaint);
 } else if (middleAngle <= 270) {
  //在第二象限
  double angle = 270 - middleAngle;
  angle = Math.toRadians(angle);
  startY = endY = (float) (mRaduis - Math.cos(angle) * mRaduis);
  startX = (float) (mRaduis - Math.sin(angle) * mRaduis);
  endX = startX + UiUtils.getTextWidth(drawText, mTextPaint);
 } else {
  //在第一象限
  double angle = 360 - middleAngle;
  angle = Math.toRadians(angle);
  startY = endY = (float) (mRaduis - Math.sin(angle) * mRaduis);
  endX = (float) (mRaduis + Math.cos(angle) * mRaduis);
  startX = endX - UiUtils.getTextWidth(drawText, mTextPaint);
 }

 mTextPath.reset();
 mTextPath.moveTo(startX, startY);
 mTextPath.lineTo(endX, endY);
 if (middleAngle > 180) {
  canvas.drawTextOnPath(drawText, mTextPath, 0, UiUtils.getTextHeight(drawText, mTextPaint), mTextPaint);
 } else {
  canvas.drawTextOnPath(drawText, mTextPath, 0, -UiUtils.getTextHeight(drawText, mTextPaint), mTextPaint);

 }
}
 @Override
protected void onDraw(Canvas canvas) {
 if (!canDraw()) return;
 float sweepAngle;
 float startAngle = 0;
 for (int i = 0, size = mDisArcList.size(); i

使用方式：

如果你觉得你们的项目正好要用到类似的图标，在项目的gradle文件中，增加compile 'wellijohn.org.simplelinechart:linechart:0.0.2'具体的方法，欢迎移步到github上去看，已经封装成库上传至jcenter，上面有具体的使用方法(图表地址)，目前暴露的方法不多，可以留言增加

github地址：https://github.com/WelliJohn/LineChart

本地下载：http://xiazai.jb51.net/201712/yuanma/LineChart(jb51.net).rar

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。

推荐阅读

android
2023年1月28日网络安全热点

涵盖最新的网络安全动态，包括OpenSSH和WordPress的安全更新、VirtualBox提权漏洞、以及谷歌推出的新证书验证机制等内容。 ... [详细]

蜡笔小新 2024-11-24 10:29:06
android
深入探索 NiFi：自定义组件的设计与应用

本文介绍了如何利用 Apache NiFi 的灵活性和扩展性，通过自定义组件来解决标准组件无法满足的特定业务需求。文章不仅涵盖了自定义处理器的基本步骤，还讨论了调试自定义组件时可能遇到的问题及解决方案。 ... [详细]

蜡笔小新 2024-11-24 09:17:47
android
Vue CLI 3 项目中使用 Pre-render SPA Plugin 进行预渲染

页面预渲染适用于主要包含静态内容的页面。对于依赖大量API调用的动态页面，建议采用SSR（服务器端渲染），如Nuxt等框架。更多优化策略可参见：https://github.com/HaoChuan9421/vue-cli3-optimization ... [详细]

蜡笔小新 2024-11-23 22:19:17
android
2023年7月7日网络安全动态

汇总了2023年7月7日最新的网络安全新闻和技术更新，包括最新的漏洞披露、工具发布及安全事件。 ... [详细]

蜡笔小新 2024-11-23 13:35:48
android
深入理解iOS中的链式编程：以Masonry为例

本文通过介绍Masonry这一轻量级布局框架，探讨链式编程在iOS开发中的应用。Masonry不仅简化了Auto Layout的使用，还提高了代码的可读性和维护性。 ... [详细]

蜡笔小新 2024-11-23 12:02:10
android
WebBenchmark：强大的Web API性能测试工具

本文介绍了一款名为WebBenchmark的Web API性能测试工具，该工具不仅支持HTTP和HTTPS服务的测试，还提供了丰富的功能来帮助开发者进行高效的性能评估。 ... [详细]

蜡笔小新 2024-11-23 05:24:11
dialog
ArcBlock 发布 ABT 节点 1.0.31 版本更新

2020年11月9日，ArcBlock 区块链基础平台发布了 ABT 节点开发平台的1.0.31版本更新，此次更新带来了多项功能增强与性能优化。 ... [详细]

蜡笔小新 2024-11-22 21:02:58
json
基于SSM框架的在线考试系统：随机组卷功能详解

本文深入探讨了基于SSM（Spring, Spring MVC, MyBatis）框架构建的在线考试系统中，随机组卷功能的设计与实现方法。 ... [详细]

蜡笔小新 2024-11-22 19:00:26
json
binlog2sql，你该知道的数据恢复工具

binlog2sql，你该知道的数据恢复工具 ... [详细]

蜡笔小新 2024-11-22 18:58:43
java
Python3爬虫入门：pyspider的基本使用[python爬虫入门]

Python学习网有大量免费的Python入门教程，欢迎大家来学习。本文主要通过爬取去哪儿网的旅游攻略来给大家介绍pyspid ... [详细]

蜡笔小新 2024-11-22 18:00:41
android
在Android中实现黑客帝国风格的数字雨效果

本文将详细介绍如何在Android平台上利用自定义View实现类似《黑客帝国》中的数字雨效果。通过实例代码，我们将探讨如何设置文字颜色、大小，以及如何控制数字下落的速度和间隔。 ... [详细]

蜡笔小新 2024-11-22 16:49:53
android
Ubuntu 14.04 环境下搭建 Caffe（仅限 CPU）

本文详细介绍了如何在 Ubuntu 14.04 系统上搭建仅使用 CPU 的 Caffe 深度学习框架，包括环境准备、依赖安装及编译过程。 ... [详细]

蜡笔小新 2024-11-22 16:43:30
android
如何将 Git 提交编辑器从 Nano 更改为 Vim

默认情况下，Git 使用 Nano 编辑器进行提交信息的编辑，但如果您更喜欢使用 Vim，可以通过简单的配置更改来实现这一变化。本文将指导您如何通过修改全局配置文件来设置 Vim 作为默认的 Git 提交编辑器。 ... [详细]

蜡笔小新 2024-11-22 14:08:35
build
利用Node.js实现PSD文件的高效切图

本文介绍了如何通过Node.js及其psd2json模块，快速实现PSD文件的自动化切图过程，以适应项目中频繁的界面更新需求。此方法不仅提高了工作效率，还简化了从设计稿到实际应用的转换流程。 ... [详细]

蜡笔小新 2024-11-22 13:21:24
xml
在Notepad++中配置Markdown语法高亮及实时预览功能

本文详细介绍了如何在Notepad++中配置Markdown语法高亮和实时预览功能，包括必要的插件安装和设置步骤。 ... [详细]

蜡笔小新 2024-11-22 13:03:49

yjdnvb

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章