Android自定义柱状图表的方法实例

作者：荷塘一只嫩藕 | 来源：互联网 | 2022-03-03 18:58

柱状图是我们在日常开发中经常会用到的一种图表，下面这篇文章主要给大家介绍了关于Android如何自定义柱状图表的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧

前言

本文将通过示例代码介绍如何自定义简单的直方图表，此图表并非常见的直方图表，而是可以分组的。此文不会过多涉及原理，比较简单，示例图片如下(gif图片没有制作好，有闪烁，请见谅)：

对于该示例的代码实现，其实重点在于坐标轴、文字、直方图的位置控制，需要随滑动距离而动态更新。注意事项会在示例代码中标注。下面贴出示例代码

public class MultiGroupHistogramView extends View {
 private int width;
 private int height;
 // 坐标轴线宽度
 private int coordinateAxisWidth;

 // 组名称字体大小
 private int groupNameTextSize;
 // 小组之间间距
 private int groupInterval;
 // 组内子直方图间距
 private int histogramInterval;
 private int histogramValueTextSize;
 // 图表数值小数点位数
 private int histogramValueDecimalCount;
 private int histogramHistogramWidth;
 private int chartPaddingTop;
 private int histogramPaddingStart;
 private int histogramPaddingEnd;
 // 各组名称到X轴的距离
 private int distanceFormGroupNameToAxis;
 // 直方图上方数值到直方图的距离
 private int distanceFromValueToHistogram;

 // 直方图最大高度
 private int maxHistogramHeight;
 // 轴线画笔
 private Paint coordinateAxisPaint;
 // 组名画笔
 private Paint groupNamePaint;
 private Paint.FontMetrics groupNameFontMetrics;
 private Paint.FontMetrics histogramValueFontMetrics;
 // 直方图数值画笔
 private Paint histogramValuePaint;
 // 直方图画笔
 private Paint histogramPaint;
 // 直方图绘制区域
 private Rect histogramPaintRect;
 // 直方图表视图总宽度
 private int histogramContentWidth;
 // 存储组内直方图shader color，例如，每组有3个直方图，该SparseArray就存储3个相对应的shader color
 private SparseArray histogramShaderColorArray;

 private List dataList;
 private SparseArray childMaxValueArray;

 private Scroller scroller;
 private int minimumVelocity;
 private int maximumVelocity;
 private VelocityTracker velocityTracker;

 public MultiGroupHistogramView(Context context) {
  this(context, null);
 }

 public MultiGroupHistogramView(Context context, @Nullable AttributeSet attrs) {
  this(context, attrs, 0);
 }

 public MultiGroupHistogramView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  init(attrs);
 }

 private void init(AttributeSet attrs) {
  setLayerType(View.LAYER_TYPE_HARDWARE, null);
  TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.MultiGroupHistogramView);
  coordinateAxisWidth = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_coordinateAxisWidth, DisplayUtil.dp2px(2));
  // 坐标轴线颜色
  int coordinateAxisColor = typedArray.getColor(R.styleable.MultiGroupHistogramView_coordinateAxisColor, Color.parseColor("#434343"));
  // 底部小组名称字体颜色
  int groupNameTextColor = typedArray.getColor(R.styleable.MultiGroupHistogramView_groupNameTextColor, Color.parseColor("#CC202332"));
  groupNameTextSize = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_groupNameTextSize, DisplayUtil.dp2px(15));
  groupInterval = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_groupInterval, DisplayUtil.dp2px(30));
  histogramInterval = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_histogramInterval, DisplayUtil.dp2px(10));
  // 直方图数值文本颜色
  int histogramValueTextColor = typedArray.getColor(R.styleable.MultiGroupHistogramView_histogramValueTextColor, Color.parseColor("#CC202332"));
  histogramValueTextSize = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_histogramValueTextSize, DisplayUtil.dp2px(12));
  histogramValueDecimalCount = typedArray.getInt(R.styleable.MultiGroupHistogramView_histogramValueDecimalCount, 0);
  histogramHistogramWidth = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_histogramHistogramWidth, DisplayUtil.dp2px(20));
  chartPaddingTop = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_chartPaddingTop, DisplayUtil.dp2px(10));
  histogramPaddingStart = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_histogramPaddingStart, DisplayUtil.dp2px(15));
  histogramPaddingEnd = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_histogramPaddingEnd, DisplayUtil.dp2px(15));
  distanceFormGroupNameToAxis = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_distanceFormGroupNameToAxis, DisplayUtil.dp2px(15));
  distanceFromValueToHistogram = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_distanceFromValueToHistogram, DisplayUtil.dp2px(10));
  typedArray.recycle();

  coordinateAxisPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  coordinateAxisPaint.setStyle(Paint.Style.FILL);
  coordinateAxisPaint.setStrokeWidth(coordinateAxisWidth);
  coordinateAxisPaint.setColor(coordinateAxisColor);

  groupNamePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  groupNamePaint.setTextSize(groupNameTextSize);
  groupNamePaint.setColor(groupNameTextColor);
  groupNameFOntMetrics= groupNamePaint.getFontMetrics();

  histogramValuePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  histogramValuePaint.setTextSize(histogramValueTextSize);
  histogramValuePaint.setColor(histogramValueTextColor);
  histogramValueFOntMetrics= histogramValuePaint.getFontMetrics();

  histogramPaintRect = new Rect();
  histogramPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  scroller = new Scroller(getContext(), new LinearInterpolator());
  ViewConfiguration cOnfiguration= ViewConfiguration.get(getContext());
  minimumVelocity = configuration.getScaledMinimumFlingVelocity();
  maximumVelocity = configuration.getScaledMaximumFlingVelocity();
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  width = getMeasuredWidth();
  height = getMeasuredHeight();
  maxHistogramHeight = height - groupNameTextSize - coordinateAxisWidth - distanceFormGroupNameToAxis - distanceFromValueToHistogram - histogramValueTextSize - chartPaddingTop;
 }

 /**
  * 判断是否可以水平滑动
  * @param direction 标识滑动方向 正数：右滑(手指从右至左移动)；负数：左滑(手指由左向右移动)
  * 您可参考ScaollView或HorizontalScrollView理解滑动方向
  */
 @Override
 public boolean canScrollHorizontally(int direction) {
  if (direction > 0) {
   return histogramContentWidth - getScrollX() - width + histogramPaddingStart + histogramPaddingEnd > 0;
  } else {
   return getScrollX() > 0;
  }
 }

 /**
  * 根据滑动方向获取最大可滑动距离
  * @param direction 标识滑动方向 正数：右滑(手指从右至左移动)；负数：左滑(手指由左向右移动)
  * 您可参考ScaollView或HorizontalScrollView理解滑动方向
  */
 private int getMaxCanScrollX(int direction) {
  if (direction > 0) {
   return histogramContentWidth - getScrollX() - width + histogramPaddingStart + histogramPaddingEnd > 0 &＃63;
     histogramContentWidth - getScrollX() - width + histogramPaddingStart + histogramPaddingEnd : 0;
  } else if (direction <0) {
   return getScrollX();
  }
  return 0;
 }

 private float lastX;

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  initVelocityTrackerIfNotExists();
  velocityTracker.addMovement(event);
  switch (event.getAction()) {
   case MotionEvent.ACTION_DOWN: {
    if (!scroller.isFinished()) {
     scroller.abortAnimation();
    }
    lastX = event.getX();
    return true;
   }
   case MotionEvent.ACTION_MOVE: {
    int deltaX = (int) (event.getX() - lastX);
    lastX = event.getX();
    // 滑动处理
    if (deltaX > 0 && canScrollHorizontally(-1)) {
     scrollBy(-Math.min(getMaxCanScrollX(-1), deltaX), 0);
    } else if (deltaX <0 && canScrollHorizontally(1)) {
     scrollBy(Math.min(getMaxCanScrollX(1), -deltaX), 0);
    }
    break;
   }
   case MotionEvent.ACTION_UP: {
    velocityTracker.computeCurrentVelocity(1000, maximumVelocity);
    int velocityX = (int) velocityTracker.getXVelocity();
    fling(velocityX);
    recycleVelocityTracker();
    break;
   }
   case MotionEvent.ACTION_CANCEL: {
    recycleVelocityTracker();
    break;
   }
  }
  return super.onTouchEvent(event);
 }

 private void initVelocityTrackerIfNotExists() {
  if (velocityTracker == null) {
   velocityTracker = VelocityTracker.obtain();
  }
 }

 private void recycleVelocityTracker() {
  if (velocityTracker != null) {
   velocityTracker.recycle();
   velocityTracker = null;
  }
 }

 // ACTION_UP事件触发
 private void fling(int velocityX) {
  if (Math.abs(velocityX) > minimumVelocity) {
   if (Math.abs(velocityX) > maximumVelocity) {
    velocityX = maximumVelocity * velocityX / Math.abs(velocityX);
   }
   scroller.fling(getScrollX(), getScrollY(), -velocityX, 0, 0, histogramContentWidth + histogramPaddingStart - width, 0, 0);
  }
 }

 @Override
 public void computeScroll() {
  if (scroller.computeScrollOffset()) {
   scrollTo(scroller.getCurrX(), 0);
  }
 }

 public void setDataList(@NonNull List dataList) {
  this.dataList = dataList;
  if (childMaxValueArray == null) {
   childMaxValueArray = new SparseArray<>();
  } else {
   childMaxValueArray.clear();
  }
  histogramCOntentWidth= 0;
  for (MultiGroupHistogramGroupData groupData : dataList) {
   List childDataList = groupData.getChildDataList();
   if (childDataList != null && childDataList.size() > 0) {
    for (int i = 0; i  0) {
   if (histogramShaderColorArray == null) {
    histogramShaderColorArray = new SparseArray<>();
   } else {
    histogramShaderColorArray.clear();
   }
   for (int i = 0; i  0) {
   int xAxisOffset = histogramPaddingStart; // 每个直方图在x轴的偏移量
   for (MultiGroupHistogramGroupData groupData : dataList) {
    List childDataList = groupData.getChildDataList();
    if (childDataList != null && childDataList.size() > 0) {
     int groupWidth = 0;
     for (int i = 0; i  0) {
       shader = getHistogramShader(histogramPaintRect.left, chartPaddingTop + distanceFromValueToHistogram + histogramValueTextSize,
         histogramPaintRect.right, histogramPaintRect.bottom, histogramShaderColor);
      }
      histogramPaint.setShader(shader);
      canvas.drawRect(histogramPaintRect, histogramPaint);
      String childHistogramHeightValue = StringUtil.NumericScaleByFloor(String.valueOf(childData.getValue()), histogramValueDecimalCount) + childData.getSuffix();

      float valueTextX = xAxisOffset + (histogramHistogramWidth - histogramValuePaint.measureText(childHistogramHeightValue)) / 2;
      // 数值绘制Y轴位置特别处理
      float valueTextY = histogramPaintRect.top - distanceFormGroupNameToAxis + (histogramValueFontMetrics.bottom) / 2;
      canvas.drawText(childHistogramHeightValue, valueTextX, valueTextY, histogramValuePaint);
      int deltaX = i

代码就这一点，阅读起来应该不难，如有疑问欢迎留言

自定义属性如下：

下面贴出使用方法：

 private void initMultiGroupHistogramView() {
  Random random = new Random();
  int groupSize = random.nextInt(5) + 10;
  List groupDataList = new ArrayList<>();
  // 生成测试数据 
  for (int i = 0; i  childDataList = new ArrayList<>();
   MultiGroupHistogramGroupData groupData = new MultiGroupHistogramGroupData();
   groupData.setGroupName("第" + (i + 1) + "组");
   MultiGroupHistogramChildData childData1 = new MultiGroupHistogramChildData();
   childData1.setSuffix("分");
   childData1.setValue(random.nextInt(50) + 51);
   childDataList.add(childData1);

   MultiGroupHistogramChildData childData2 = new MultiGroupHistogramChildData();
   childData2.setSuffix("%");
   childData2.setValue(random.nextInt(50) + 51);
   childDataList.add(childData2);
   groupData.setChildDataList(childDataList);
   groupDataList.add(groupData);
  }
  multiGroupHistogramView.setDataList(groupDataList);
  int[] color1 = new int[]{getResources().getColor(R.color.color_orange), getResources().getColor(R.color.colorPrimary)};

  int[] color2 = new int[]{getResources().getColor(R.color.color_supper_tip_normal), getResources().getColor(R.color.bg_supper_selected)};
  // 设置直方图颜色
  multiGroupHistogramView.setHistogramColor(color1, color2);
 }

完整示例：https://github.com/670832188/TestApp (本地下载)

总结

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

https
git

推荐阅读

git
深入理解LOAM：激光雷达里程计与建图算法

本文基于对相关论文和开源代码的研究，详细介绍了LOAM（激光雷达里程计与建图）的工作原理，并对其关键技术进行了分析。 ... [详细]

蜡笔小新 2024-12-28 11:38:00
git
资源推荐 | TensorFlow官方中文教程助力英语非母语者学习

来源：机器之心。本文详细介绍了TensorFlow官方提供的中文版教程和指南，帮助开发者更好地理解和应用这一强大的开源机器学习平台。 ... [详细]

蜡笔小新 2024-12-28 09:00:51
git
构建基于BERT的中文NL2SQL模型：一个简明的基准

本文探讨了将自然语言转换为SQL语句（NL2SQL）的任务，这是人工智能领域中一项非常实用的研究方向。文章介绍了笔者在公司举办的首届中文NL2SQL挑战赛中的实践，该比赛提供了金融和通用领域的表格数据，并标注了对应的自然语言与SQL语句对，旨在训练准确的NL2SQL模型。 ... [详细]

蜡笔小新 2024-12-27 17:36:19
git
拖拽元素位置交换：使用 Sortable.js 实现

本文介绍如何使用 Sortable.js 库实现元素的拖拽和位置交换功能。Sortable.js 是一个轻量级、无依赖的 JavaScript 库，支持拖拽排序、动画效果和多种插件扩展。通过简单的配置和事件处理，可以轻松实现复杂的功能。 ... [详细]

蜡笔小新 2024-12-27 15:10:34
git
LeetCode 991：故障计算器的最优解法

探讨一个显示数字的故障计算器，它支持两种操作：将当前数字乘以2或减去1。本文将详细介绍如何用最少的操作次数将初始值X转换为目标值Y。 ... [详细]

蜡笔小新 2024-12-27 14:34:44
diff
扫描线三巨头 hdu1928hdu 1255 hdu 1542 [POJ 1151]

学习链接：http:blog.csdn.netlwt36articledetails48908031学习扫描线主要学习的是一种扫描的思想，后期可以求解很 ... [详细]

蜡笔小新 2024-12-26 20:04:36
git
Spring Boot 中使用 @PropertySource 读取自定义配置文件的最佳实践

本文详细介绍了如何在 Spring Boot 应用中通过 @PropertySource 注解读取非默认配置文件，包括配置文件的创建、映射类的设计以及确保 Spring 容器能够正确加载这些配置的方法。 ... [详细]

蜡笔小新 2024-12-26 19:35:47
git
HTML Attribute Naming Conventions for Fast Components

This document outlines the recommended naming conventions for HTML attributes in Fast Components, focusing on readability and consistency with existing standards. ... [详细]

蜡笔小新 2024-12-26 19:13:45
git
告别传统文件传输，迎接新一代高效工具Croc

在现代网络环境中，两台计算机之间的文件传输需求日益增长。传统的FTP和SSH方式虽然有效，但其配置复杂、步骤繁琐，难以满足快速且安全的传输需求。本文将介绍一种基于Go语言开发的新一代文件传输工具——Croc，它不仅简化了操作流程，还提供了强大的加密和跨平台支持。 ... [详细]

蜡笔小新 2024-12-26 16:16:06
git
解决微信电脑版无法刷朋友圈问题：使用安卓远程投屏方案

在工作期间想要浏览微信和朋友圈却不太方便？虽然微信电脑版目前不支持直接刷朋友圈，但通过远程投屏技术，可以轻松实现在电脑上操作安卓设备的功能。 ... [详细]

蜡笔小新 2024-12-26 15:23:19
git
从零开始构建完整手机站：Vue CLI 3 实战指南（第一部分）

本系列教程将引导您使用 Vue CLI 3 构建一个功能齐全的移动应用。我们将深入探讨项目中涉及的每一个知识点，并确保这些内容与实际工作中的需求紧密结合。 ... [详细]

蜡笔小新 2024-12-26 13:30:37
git
软件工程个人学习报告

本报告涵盖了个人博客账号和码云账号的注册过程，以及对网络工程专业学习的反思与展望。通过回顾初入大学时的专业选择，分析当前的专业知识和技能水平，并对未来的职业规划进行了详细讨论。 ... [详细]

蜡笔小新 2024-12-26 12:59:03
git
Java面试题解析

本文详细介绍了Java编程语言中的核心概念和常见面试问题，包括集合类、数据结构、线程处理、Java虚拟机（JVM）、HTTP协议以及Git操作等方面的内容。通过深入分析每个主题，帮助读者更好地理解Java的关键特性和最佳实践。 ... [详细]

蜡笔小新 2024-12-27 13:55:14
git
Android LED 数字字体的应用与实现

本文介绍了一种适用于 Android 应用的 LED 数字字体（digital font），并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景，能够增强视觉效果。 ... [详细]

蜡笔小新 2024-12-27 10:34:22
git
RecyclerView初步学习(一)

RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式，除了提供ViewHolder缓存模式，还可以自定义动画，分割符，布局样式，相比于传统的ListVi ... [详细]

蜡笔小新 2024-12-26 20:24:01

荷塘一只嫩藕

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

Tags | 热门标签

RankList | 热门文章