返回发烧友论坛
发 帖  

[文章]【软通动力】HarmonyOS三方件开发指南(9)-HistogramComponent

软通动力HOS
2021-04-13 14:39:21
阅读量0
0
0
`1. HistogramComponent组件功能介绍
1.1. 功能介绍
        在开发柱状图的过程中，通过自定义组件HistogramComponent可以更快速实现一个简单的柱状图功能，对外提供数据源，修改柱状图颜色和间距的接口。
1.2. phone模拟器上运行效果

2 . HistogramComponent使用方法
新建工程，增加组件Har包依赖，在应用模块中调用HAR，常用的添加依赖方式包括如下两种。
Ø  方式一：依赖本地HAR,将histogramcomponent-debug.har复制到entrylibs目录下即可（由于build.gradle已经依赖的libs目录下的*.har，因此不需要再做修改）。

Ø  方式二：查看工程目录中build.gradle下的*.har是否存在。
2.png

3.png

以上操作无误之后就可以进行编码了！
3 . HistogramComponent开发实现

3.1 . 主页面的布局文件
4.png

3.2. 主页面的Ability的代码
  1. @Override
  2. public void onStart(Intent intent) {
  3.     super.onStart(intent);
  4.     super.setUIContent(ResourceTable.Layout_ability_main);
  5.     bargraphview = (HistogramComponent) findComponentById(ResourceTable.Id_bargraphview);
  6.     // 设置每组柱状图之间的间距
  7.     bargraphview.mLineSpaceWidth = 30;
  8.     final int[][] data = {{182, 89, 78, 88}, {34, 85, 16, 96}, {86, 127, 45, 41},{54, 75, 54, 12}};
  9.     final int[] colorData = {0xFF222233, 0xFFe67656, 0xFF188888,0xFF888888,0xFF888888};
  10.     final String[] textData = {"一月份", "二月份", "三月份", "四月份"};

  12. // 核心接口，填充数据，柱状图色彩
  13.     bargraphview.setBarGraphData(data, colorData, textData);

  15. }
复制代码
3.3. HistogramComponent组件核心代码
  1. /**
  2. * 定义DrawTask对象的实例
  3. * 这里进行具体的绘画工作
  4. */
  5. private DrawTask drawTask = new DrawTask() {
  6.     @Override
  7.     public void onDraw(Component component, Canvas canvas) {
  8.         bottomHeight = heightMeasureSpec - mBottomXWidth;
  9.         if (barGraphDataList == null || barGraphDataList.length <= 0)
  10.             return;
  11.         //画柱状图
  12.         drawBarGraph(canvas);
  13.         //画XY轴坐标
  14.         drawXYLine(canvas);
  15.         //给XY轴坐标写字
  16.         drawXYText(canvas);
  17.     }
  18. };

  20. //画柱状图
  21. private void drawBarGraph(Canvas canvas) {
  22.     if (barGraphDataList != null && barGraphDataList.length > 0) {
  23.         for (int i = 0; i < barGraphDataList[0].length; i++) {
  24.             float startX = mLineSpaceWidth * (i + 1) + mLineWidth * barGraphDataList.length * i + mLeftYWidth + (10) + mLineWidth / 2;
  25.             int index = 0;
  26.             while (index < barGraphDataList.length) {
  27.                 if (barGraphColorList != null && barGraphColorList.length > index) {
  28.                     mBarGraphPaint.setColor(new Color(barGraphColorList[index]));
  29.                     mBarGraphTextPaint.setColor(new Color(barGraphColorList[index]));
  30.                 } else {
  31.                     mBarGraphPaint.setColor(new Color(barGraphBgColor));
  32.                     mBarGraphTextPaint.setColor(new Color(barGraphBgColor));
  33.                 }

  35.                 float stopY = bottomHeight * 0.9f / maxHeight * barGraphDataList[index][i];

  37.                 canvas.drawLine(new Point(startX, bottomHeight), new Point(startX, bottomHeight - stopY), mBarGraphPaint);

  39.                 String text = String.valueOf(barGraphDataList[index][i]);
  40.                 float textWidth = mBarGraphTextPaint.measureText(text);
  41.                 canvas.drawText(mBarGraphTextPaint,text, startX - textWidth / 2, bottomHeight - stopY - 10);
  42.                 startX += mLineWidth;
  43.                 index++;
  44.             }
  45.         }
  46.     }
  47. }

  49. //画X轴和Y轴的竖线+箭头
  50. private void drawXYLine(Canvas canvas) {
  51.     /**
  52.      * 让Y轴文字与最左有dip2px(10)的边距
  53.      **/
  54.     //Y轴竖线
  55.     canvas.drawLine(new Point((10) + mLeftYWidth, bottomHeight), new Point((10) + mLeftYWidth, 10), mXYLinePaint);
  56.     //X轴竖线
  57.     canvas.drawLine(new Point((10) + mLeftYWidth, bottomHeight), new Point(widthMeasureSpec - 10, bottomHeight), mXYLinePaint);
  58.     //画个箭头Y轴
  59.     canvas.drawLine(new Point((10) + mLeftYWidth, 10), new Point((6) + mLeftYWidth, 20), mXYLinePaint);
  60.     canvas.drawLine(new Point((10) + mLeftYWidth, 10), new Point((14) + mLeftYWidth, 20), mXYLinePaint);
  61.     //X轴箭头
  62.     canvas.drawLine(new Point(widthMeasureSpec - 10, bottomHeight), new Point(widthMeasureSpec - 20, bottomHeight - (4)), mXYLinePaint);
  63.     canvas.drawLine(new Point(widthMeasureSpec - 10, bottomHeight), new Point(widthMeasureSpec - 20, bottomHeight + (4)), mXYLinePaint);
  64. }
  65. //给Y轴和X轴写相应的文字
  66. private void drawXYText(Canvas canvas) {
  67.     if (isShowYText) {
  68.         //Y轴写字
  69.         for (int i = 1; i <= 5; i++) {
  70.             float startY = bottomHeight - bottomHeight * 0.9f / maxHeight * maxHeight / 5 * i;
  71.             canvas.drawLine(new Point((10) + mLeftYWidth, startY), new Point((15) + mLeftYWidth, startY), mYTextPaint);
  72.             float width = mYTextPaint.measureText(maxHeight / 5 * i + "");

  74.             float dy = 12.0f;
  75.             canvas.drawText(mYTextPaint,maxHeight / 5 * i + "", (int) ((10) + mLeftYWidth - width - (5)), startY + dy);
  76.         }
  77.     }
  78.     if (!isShowXText) {
  79.         return;
  80.     }
  81.     //X轴写字
  82.     if (barGraphTextList != null && barGraphTextList.length > 0) {
  83.         for (int i = 0; i < barGraphTextList.length; i++) {
  84.             float startX = mLineSpaceWidth * (i + 1) + mLineWidth * barGraphDataList.length * i + mLeftYWidth + (10);
  85.             //中间有一个间隔
  86.             startX = startX + (mLineWidth * barGraphDataList.length) * 1.0f / 2;
  87.             float textWidth = mXTextPaint.measureText(barGraphTextList[i]);
  88.             canvas.drawText(mXTextPaint,barGraphTextList[i], startX - textWidth / 2, heightMeasureSpec - (5));
  89.         }
  90.     }
  91. }

  93. // 对外提供的核心接口

  95. public void setBarGraphData(int[][] barGraphDataList, int[] barGraphColorList, String[] barGraphTextList) {
  96.     this.barGraphDataList = barGraphDataList;
  97.     this.barGraphColorList = barGraphColorList;
  98.     this.barGraphTextList = barGraphTextList;

  100.     for(int i = 0; i < barGraphDataList.length; ++i) {
  101.         for(int j = 0; j < barGraphDataList[i].length; ++j) {
  102.             if (this.maxHeight < barGraphDataList[i][j]) {
  103.                 this.maxHeight = barGraphDataList[i][j];
  104.             }
  105.         }
  106.     }

  108.     while(this.maxHeight % 5 != 0) {
  109.         ++this.maxHeight;
  110.     }

  112.     if (barGraphTextList != null && barGraphTextList.length > 0) {
  113.         this.isShowXText = true;
  114.     }

  116.     if (this.isShowYText) {
  117.         this.mLeftYWidth = this.mYTextPaint.measureText(String.valueOf(this.maxHeight));
  118.     }

  120.     this.mBottomXWidth = 10.0F;
  121.     if (this.isShowXText) {
  122.         FontMetrics fontMetrics = this.mXTextPaint.getFontMetrics();
  123.         this.mBottomXWidth += ((fontMetrics.bottom - fontMetrics.top) / 2.0F - fontMetrics.bottom) * 2.0F;
  124.     }

  126.     this.measureWidth(this.heightMeasureSpec);
  127.     this.invalidate();
  128. }
复制代码
项目源代码地址：https://github.com/isoftstone-dev/BarGraphView_HarmonyOS
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

`
1.png
举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友