【软通动力】HarmonyOS三方件开发指南(9)-HistogramComponent 原创

软通田可辉

发布于 2021-2-4 09:36

浏览

15收藏

1. HistogramComponent组件功能介绍

1.1. 功能介绍

在开发柱状图的过程中，通过自定义组件HistogramComponent可以更快速实现一个简单的柱状图功能，对外提供数据源，修改柱状图颜色和间距的接口。
1.2. phone模拟器上运行效果

【软通动力】HarmonyOS三方件开发指南(9)-HistogramComponent-鸿蒙开发者社区

2 . HistogramComponent使用方法

新建工程，增加组件Har包依赖，在应用模块中调用HAR，常用的添加依赖方式包括如下两种。

Ø 方式一：依赖本地HAR,将histogramcomponent-debug.har复制到entry\libs目录下即可（由于build.gradle已经依赖的libs目录下的*.har，因此不需要再做修改）。

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

【软通动力】HarmonyOS三方件开发指南(9)-HistogramComponent-鸿蒙开发者社区

以上操作无误之后就可以进行编码了！

3 . HistogramComponent开发实现

3.1 . 主页面的布局文件

【软通动力】HarmonyOS三方件开发指南(9)-HistogramComponent-鸿蒙开发者社区

3.2. 主页面的Ability的代码

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

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

}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

3.3. HistogramComponent组件核心代码

 /**
 * 定义DrawTask对象的实例
 * 这里进行具体的绘画工作
 */
private DrawTask drawTask = new DrawTask() {
    @Override
    public void onDraw(Component component, Canvas canvas) {
        bottomHeight = heightMeasureSpec - mBottomXWidth;
        if (barGraphDataList == null || barGraphDataList.length <= 0)
            return;
        //画柱状图
        drawBarGraph(canvas);
        //画XY轴坐标
        drawXYLine(canvas);
        //给XY轴坐标写字
        drawXYText(canvas);
    }
};

//画柱状图
private void drawBarGraph(Canvas canvas) {
    if (barGraphDataList != null && barGraphDataList.length > 0) {
        for (int i = 0; i < barGraphDataList[0].length; i++) {
            float startX = mLineSpaceWidth * (i + 1) + mLineWidth * barGraphDataList.length * i + mLeftYWidth + (10) + mLineWidth / 2;
            int index = 0;
            while (index < barGraphDataList.length) {
                if (barGraphColorList != null && barGraphColorList.length > index) {
                    mBarGraphPaint.setColor(new Color(barGraphColorList[index]));
                    mBarGraphTextPaint.setColor(new Color(barGraphColorList[index]));
                } else {
                    mBarGraphPaint.setColor(new Color(barGraphBgColor));
                    mBarGraphTextPaint.setColor(new Color(barGraphBgColor));
                }

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

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

                String text = String.valueOf(barGraphDataList[index][i]);
                float textWidth = mBarGraphTextPaint.measureText(text);
                canvas.drawText(mBarGraphTextPaint,text, startX - textWidth / 2, bottomHeight - stopY - 10);
                startX += mLineWidth;
                index++;
            }
        }
    }
}

//画X轴和Y轴的竖线+箭头
private void drawXYLine(Canvas canvas) {
    /**
     * 让Y轴文字与最左有dip2px(10)的边距
     **/
    //Y轴竖线
    canvas.drawLine(new Point((10) + mLeftYWidth, bottomHeight), new Point((10) + mLeftYWidth, 10), mXYLinePaint);
    //X轴竖线
    canvas.drawLine(new Point((10) + mLeftYWidth, bottomHeight), new Point(widthMeasureSpec - 10, bottomHeight), mXYLinePaint);
    //画个箭头Y轴
    canvas.drawLine(new Point((10) + mLeftYWidth, 10), new Point((6) + mLeftYWidth, 20), mXYLinePaint);
    canvas.drawLine(new Point((10) + mLeftYWidth, 10), new Point((14) + mLeftYWidth, 20), mXYLinePaint);
    //X轴箭头
    canvas.drawLine(new Point(widthMeasureSpec - 10, bottomHeight), new Point(widthMeasureSpec - 20, bottomHeight - (4)), mXYLinePaint);
    canvas.drawLine(new Point(widthMeasureSpec - 10, bottomHeight), new Point(widthMeasureSpec - 20, bottomHeight + (4)), mXYLinePaint);
}
//给Y轴和X轴写相应的文字
private void drawXYText(Canvas canvas) {
    if (isShowYText) {
        //Y轴写字
        for (int i = 1; i <= 5; i++) {
            float startY = bottomHeight - bottomHeight * 0.9f / maxHeight * maxHeight / 5 * i;
            canvas.drawLine(new Point((10) + mLeftYWidth, startY), new Point((15) + mLeftYWidth, startY), mYTextPaint);
            float width = mYTextPaint.measureText(maxHeight / 5 * i + "");

            float dy = 12.0f;
            canvas.drawText(mYTextPaint,maxHeight / 5 * i + "", (int) ((10) + mLeftYWidth - width - (5)), startY + dy);
        }
    }
    if (!isShowXText) {
        return;
    }
    //X轴写字
    if (barGraphTextList != null && barGraphTextList.length > 0) {
        for (int i = 0; i < barGraphTextList.length; i++) {
            float startX = mLineSpaceWidth * (i + 1) + mLineWidth * barGraphDataList.length * i + mLeftYWidth + (10);
            //中间有一个间隔
            startX = startX + (mLineWidth * barGraphDataList.length) * 1.0f / 2;
            float textWidth = mXTextPaint.measureText(barGraphTextList[i]);
            canvas.drawText(mXTextPaint,barGraphTextList[i], startX - textWidth / 2, heightMeasureSpec - (5));
        }
    }
}

// 对外提供的核心接口

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

    for(int i = 0; i < barGraphDataList.length; ++i) {
        for(int j = 0; j < barGraphDataList[i].length; ++j) {
            if (this.maxHeight < barGraphDataList[i][j]) {
                this.maxHeight = barGraphDataList[i][j];
            }
        }
    }

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

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

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

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

    this.measureWidth(this.heightMeasureSpec);
    this.invalidate();
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.