文档章节

Android 柱状图的绘制

今日竹石
 今日竹石
发布于 2014/04/23 19:55
字数 702
阅读 3618
收藏 1

    这是今天刚写的柱状图,效果很简单,代码贴出来。

package com.example.testchart;


import android.annotation.SuppressLint;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Paint;

import android.os.Handler;

import android.os.Message;

import android.view.View;


@SuppressLint("HandlerLeak")

public class ChartText extends View

{


private Paint paint;

private Paint font_Paint;

// 数值显示的偏移量

private int numWidth = 9;


// 起始高度为 最大高度减去 80 【注意这里的高度是反的,也就是说,y轴是逐渐减少的】

private float startHeight = 10;

private float endHeight = startHeight;

// 柱状图的宽度

private int viewWidth = 20;


// 组态图的高度 【显示的数值,100 为 100%】

private int maxSize = 43;

private int indexSize = 0;

// 要显示的模式 【类型,比如:℃和百分比等】

private String displayMode = "%";

// 模式

private boolean mode = false;

// 线程控制

private boolean display = true;

// 是否开启动画效果

private boolean animMode = true;


/**

* @param context

* @param maxSize

*            需要显示的数值

* @param displayMode

*            显示的类型

*/

public ChartText(Context context, int maxSize, String displayMode)

{

super(context);

this.maxSize = maxSize;

this.displayMode = displayMode;

init();

}


/**

* @param context

* @param maxSize

*            需要显示的数值

* @param displayMode

*            显示的类型

* @param mode

*            显示的模式,默认为false,数值越高,颜色越偏向红色。为true反之

*/

public ChartText(Context context, int maxSize, String displayMode,

boolean mode)

{

super(context);

this.maxSize = maxSize;

this.displayMode = displayMode;

this.mode = mode;

init();

}


/**

* @param context

* @param maxSize

*            需要显示的数值

* @param displayMode

*            显示的类型

* @param mode

*            显示的模式,默认为false,数值越高,颜色越偏向红色。为true反之

* @param animMode

*            是否显示动画加载效果,默认为true

*/

public ChartText(Context context, int maxSize, String displayMode,

boolean mode, boolean animMode)

{

super(context);

this.maxSize = maxSize;

this.displayMode = displayMode;

this.mode = mode;

this.animMode = animMode;

init();

}


// 绘制界面

@Override

protected void onDraw(Canvas canvas)

{

super.onDraw(canvas);

canvas.drawRect(10, endHeight, 10 + viewWidth, startHeight, paint);

if (!display)

{

// 这段if语句可以放在初始化中,这个就交给大家吧。

if (!mode && indexSize >= 50)

{

paint.setARGB(255, 200, 200, 60);

if (!mode && indexSize >= 80)

{

paint.setARGB(255,

(indexSize < 100) ? (110 + indexSize + 45) : 255,

(indexSize < 100) ? 210 - (indexSize + 45) : 0, 20);

}

} else if (mode && indexSize <= 50)

{

paint.setARGB(255, 200, 200, 60);

if (mode && indexSize <= 30)

{

paint.setARGB(255, 255 - indexSize, indexSize, 20);

}

}

canvas.drawRect(10, endHeight, 10 + viewWidth, startHeight, paint);

paint.setARGB(255, 99, 66, 0);

canvas.drawText("" + indexSize, numWidth, endHeight - 5, paint);

paint.setARGB(255, 110, 210, 60);

}

canvas.drawText(displayMode, 0, startHeight + 15, font_Paint);

}


// 初始化

private void init()

{

// 数值初始化

paint = new Paint();

paint.setARGB(255, 110, 210, 20);

font_Paint = new Paint();

font_Paint.setARGB(255, 66, 66, 66);


// 设置顶端数值显示的偏移量,数值越小,偏移量越大

numWidth = 9;

if (maxSize < 10)

{

numWidth = 15;

} else if (maxSize < 100)

{

numWidth = 12;

}


if (animMode)

{

// 启动一个线程来实现柱状图缓慢增高

thread.start();

} else

{

// 不启用动画效果,则直接赋值进行绘制

display = false;

indexSize = maxSize;

endHeight = startHeight - (float) (maxSize * 1.5);

invalidate();

}

}


private Handler handler = new Handler()

{

@Override

public void handleMessage(Message msg)

{

super.handleMessage(msg);

// 通过endHeight >= 20将柱状图的高度控制在150以内,这样刚好循环一百次到顶部

if (msg.what == 1 && indexSize < maxSize && endHeight >= 20)

{

endHeight -= 1.5;

indexSize += 1;

} else

{

display = false;

}

invalidate();

}

};


private Thread thread = new Thread()

{

@Override

public void run()

{

while (!Thread.currentThread().isInterrupted() && display)

{

Message msg = new Message();

msg.what = 1;

handler.sendMessage(msg);

try

{

// 每隔15毫秒触发,尽量使升高的效果看起来平滑

Thread.sleep(15);

} catch (InterruptedException e)

{

System.err.println("InterruptedException!线程关闭");

this.interrupt();

}

}

}

};


}


© 著作权归作者所有

共有 人打赏支持
今日竹石
粉丝 41
博文 227
码字总数 181312
作品 0
朝阳
程序员
Android绘制优化(一)绘制性能分析

前言 一个优秀的应用不仅仅是要有吸引人的功能和交互,同时在性能上也有很高的要求。运行Android系统的手机,虽然配置在不断的提升,但仍旧无法和PC相比,无法做到PC那样拥有超大的内存以及高...

ganchuanpu
07/16
0
0
Android - 绘制带有渐变色的折线图

图表绘制的需求在安卓开发中并不少见。常见的有饼图,柱状图,折线图等等。 在这里,我们可以给折线图添加一些色彩。除了线条本身的颜色外,还可以增加一些“花样”——渐变色。填充空余的地...

RustFisher
06/11
0
0
Android一个包含表格的图标库

之前有写过一个图表lib,但是开发的速度,大多很难跟上产品需求变化的脚步,所以修改了下原先的图表库,支持图表下面能整合table显示对应的类目,用曲线替换了折线,支持多曲线的显示,增加了...

WelliJhon
01/30
0
0
简单使用achartengine绘制折线图

achartengine地址:https://code.google.com/p/achartengine/e.google.com/achartengine 数据模型: XYSeries: 最常用的数据结构,主要包括一系列的double型(x,y)点对及一个名称(title)。 ...

mutouzhang
2014/03/31
0
1
Android 动画框架详解,第 1 部分

简介: Android 平台提供了一套完整的动画框架,使得开发者可以用它来开发各种动画效果。Android 动画框架详解由原理篇和实例篇两部分组成。本文是第一部分原理篇,主要分析 Tween 动画的实现...

大凉龙雀
2012/11/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

postgresql 使用odbc_fdw连接 sqlserver

安装配置odbc_fdw 1.安装unixODBC apt-get install unixodbc unixodbc-dev 2.安装 Microsoft ODBC Driver 17 for SQL Server curl https://packages.microsoft.com/config/ubuntu/16.04/prod......

dubox
7分钟前
0
0
学习

z-index {堆叠顺序} vertical-align: baseline;{垂直对齐图像} vertical-align: middle;{内容在中部对齐} font-weight: bold;{使用粗体} font-style: italic;{从父元素那继承字体的样式} whi...

墨冥
13分钟前
0
0
Lock和synchronized比较详解

https://www.cnblogs.com/handsomeye/p/5999362.html

qimh
19分钟前
0
0
Postman接口测试神器从安装到精通

1 摘要 Postman 是一个接口测试和 http 请求的神器,非常好用。 官方 github 地址: https://github.com/postmanlabs Postman 的优点: 支持各种的请求类型: get、post、put、patch、delete ...

HiBlock
20分钟前
0
0
c++_拷贝构造函数

拷贝构造又叫复制构造;如果没有实现拷贝构造函数,c++会自动生成一个,叫做隐式拷贝构造函数.该自动生成的隐式拷贝构造也能应付绝大部分情况. 拷贝构造函数的格式: //定义class CTest{p...

一个小妞
20分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部