2018May02_柱状图

最新推荐文章于 2021-06-21 14:14:07 发布

鱼包子Ray

最新推荐文章于 2021-06-21 14:14:07 发布

阅读量238

点赞数

分类专栏： Android 文章标签：柱状图文本换行自定义View动画 staticLayout canva实现动画

本文链接：https://blog.csdn.net/baopengjian/article/details/80448920

版权

Android 专栏收录该内容

240 篇文章 0 订阅

订阅专栏

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();