2018May02_柱状图

最新推荐文章于 2024-04-20 15:43:44 发布

原创最新推荐文章于 2024-04-20 15:43:44 发布 · 269 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#柱状图 #文本换行 #自定义View动画 #staticLayout #canva实现动画

Android 专栏收录该内容

240 篇文章

订阅专栏

本文介绍如何在Android中自定义View实现动态柱状图，包括柱状图的布局计算、绘制过程及文本自动换行的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SeniorUI03_Paint及paint使用实例总结
##1 Requirement

用一组柱状图来表达一组数据，每个数据对象包含说明、值及值说明三个元素（柱低说明、柱高、柱顶说明）
每条柱子有对应x坐标说明，柱高表示数值，柱顶显示说明
x坐标标识若文字过长可自动换行

#2 Effect Picture
这里写图片描述

#3 Theory

自定义View，onDraw方法中canvas调用用Paint画图
通过system.currentTimeMills()定义一个时间戳，在一段时间内，不断重 -绘，柱子的高度按时间进度变化；
文本换行：确定绘制边界和文本内容，StaticLayout实现绘制和自动换行

#4 柱状图画法：

底部固定局域画x坐标，上部局域画柱状图；
柱状图的宽度和间距根据柱状图的个数和View的宽度确定；
柱状图x坐标由柱宽、间距和第几条确定
柱状图y坐标：获取数据y方向要显示最大值，确定柱状图可以显示局域的最大高度（顶部留固定高度），根据y值比例显示实际显示柱状图高度
柱顶数据：获取柱状图x,y坐标，获取数据文本的宽高，从而计算文本要显示的坐标
x轴数据：计算柱状图中心坐标，根据要显示的局域、文本内容，测量计算是否需要换行

#4 Demo
BarChartView.java

#5 CoreCode
动画

   public void setBars(List<Bar> list) {
		...
        this.timeStart = System.currentTimeMillis();
        postInvalidate();
		...
   }

protected void onDraw(Canvas canvas) {
	...
	long timeCurrent = System.currentTimeMillis();
    if (timeCurrent - timeStart < TIME_ANIM) {
			drawBars(canvas, rateY, maxDescLength, false, timeCurrent);
            invalidate();
     } else {
            drawBars(canvas, rateY, maxDescLength, true, timeCurrent);
     }
  ...
}

测量文本宽高

Rect bound2 = new Rect();
mTextPaint.getTextBounds(desc, 0, desc.length(), bound2);
canvas.save();
canvas.translate(startX, startY);
StaticLayout layout = new StaticLayout(desc, textPaint, maxDescLength, 		Layout.Alignment.ALIGN_NORMAL, 0.8F, 0, false);
layout.draw(canvas);
canvas.restore();