Android 开源柱状图分析实现

原创 2013年12月05日 17:39:31

在平时开发中柱状形状偶尔会有项目需求,由于又一次开发需要,去找开源的组件都不好用,要不调用很不方便,要不它们类库太笨重,下面介绍一个轻巧方便控件,原理就是用View 重新绘画一个柱状图形控件,并适配所有屏幕。

该项目地址位于:https://github.com/apple317/displayview

 

 

            demo实现后效果图如上

 

1. 导入DisplayView(简称SDK)

        下载最新版sdk的zip包,解压将其中的download释放到本地目录,Eclipse用户右键您的工程根目录,选择Properties -> Java Build Path -> Libraries, 然后点击 Add External JARs... 选择指向download 的路径,点击OK,即导入成功。
下载最新版SDK的zip包,将其中的libs 文件夹合并到本地工程libs子目录下
Eclipse用户右键工程根目录,选择Properties -> Java Build Path -> Libraries,然后点击Add External JARs... 选择指向jar的路径,点击OK,即导入成功。
注意。

2.代码接入详解使用说明:

         在下载代码后,里面有参考代码,代码都有注释和调用详解,先讲解ChartActivity调用类如何编写。

 

public class ChartActivity extends Activity {

	private LinearLayout layout_chart;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		// 先编写一个布局文件
		this.setContentView(R.layout.layout_chart);
		//创建一个线性容器,之后就是向着里面嵌套视图
		layout_chart = (LinearLayout) this.findViewById(R.id.lay_chart);
		LinearLayout.LayoutParams layParam = new LinearLayout.LayoutParams(
				LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
		layParam.gravity = Gravity.CENTER_HORIZONTAL;
		//创建柱状性参数对象
		ChartEntity entity = new ChartEntity();
		entity.scale = 6;
		entity.row_height = 60;
		entity.row_weight = 4;
		entity.padding_weight = 8;
		//创建一个纵向数据容器
		List<String> hList = new ArrayList<String>();
		//创建一个横向数据容器,注解数据格式如:key,是否显示在横坐标
		List<String> wList = new ArrayList<String>();
		//创建一个存储高度值容器
		HashMap<String, Integer> map = new HashMap<String, Integer>();
		hList.add("0公里");
		hList.add("10-");
		hList.add("20-");
		hList.add("30-");
		entity.hList = hList;
		for (int i = 0; i < 30; i++) {
			String curStr;
			if ((i + 1) % 5 == 0) {
				curStr = (i + 1) + ",true";
			} else {
				curStr = (i + 1) + ",false";
			}
			wList.add(curStr);
			map.put(curStr, i * 4);
		}
		entity.wList = wList;
		entity.map = map;
		ChartView chartView = new ChartView(this.getApplicationContext(),
				entity);
		layout_chart.addView(chartView, layParam);
	}

	@Override
	protected void onDestroy() {
		// TODO Auto-generated method stub
		super.onDestroy();
	}

	@Override
	protected void onPause() {
		// TODO Auto-generated method stub
		super.onPause();
	}

	@Override
	protected void onResume() {
		// TODO Auto-generated method stub
		super.onResume();
	}

	@Override
	protected void onStart() {
		// TODO Auto-generated method stub
		super.onStart();
	}
}

 

3.ChartEntity实体类核心代码详解:

   ChartEntity是柱状图参数实体类,每个都有详解,供外部调用和修改。

/**
 * 柱状图形实体类
 * 
 * @author 胡少平
 * 
 */
public class ChartEntity {
        // 每个柱形纵向数据显示集:String = 显示内容
        public List<String> hList;
        // 每个柱形横向数据显示集:String = 显示内容,true|false
        public List<String> wList;
        //横向显示值
        public HashMap<String,Integer> map;
        //柱形比例度
        public int scale;
        // 每个柱形横向柱状显示宽度
        public int row_weight = 0;
        // 每个柱形横向柱状间距
        public int padding_weight = 0;
        //横向起始点x坐标
        public int startX = 30;
        //每个柱形纵向显示宽度
        public int row_height=0;
        //每个柱形纵向
        public int padding_height=12;
        public ChartEntity() {
                
                // TODO Auto-generated constructor stub
        }
}

 

4.ChartViewUI组件核心代码详解如下:

  

/**
 * 
 * 柱状形显示UI组件
 * 
 * @author 胡少平
 * 
 */

public class ChartView extends View {

	private ChartEntity entity;

	private Paint paint;
	// 每个柱形宽度
	private int zWith = 0;
	private int zPadding = 0;
	private int startX = 0;
	private int totalHeight = 0;
	private int lineHeight = 0;
	private int zHeight = 0;
	// 横向x坐标显示个数
	private int wSize = 0;
	// 纵向y坐标显示个数
	private int hSize = 0;

	public ChartView(Context context, ChartEntity entity) {
		super(context);
		paint = new Paint();
		paint.setAntiAlias(true);
		this.entity = entity;
		zWith = DeviceInfo.DipToPixels(this.getContext(), entity.row_weight);
		zPadding = DeviceInfo.DipToPixels(this.getContext(),
				entity.padding_weight);
		startX = DeviceInfo.DipToPixels(this.getContext(), entity.startX);
		zHeight = DeviceInfo.DipToPixels(this.getContext(), entity.row_height);
		totalHeight = DeviceInfo
				.DipToPixels(this.getContext(), entity.row_height
						* entity.hList.size() + entity.padding_height);
		lineHeight = DeviceInfo.DipToPixels(this.getContext(),
				entity.row_height * entity.hList.size());
		wSize = entity != null && entity.wList != null
				&& entity.wList.size() > 0 ? entity.wList.size() : 0;
		hSize = entity != null && entity.hList != null
				&& entity.hList.size() > 0 ? entity.hList.size() : 0;
	}

	public void drawAxis(Canvas canvas) {
		//设置画笔属性
		paint.setColor(Color.RED);
		paint.setStrokeWidth(2);
		paint.setTextSize(DeviceInfo.DipToPixels(this.getContext(), 12));
		//用游标绘画线条
		canvas.drawLine(startX, lineHeight, wSize * zWith + wSize * zPadding
				+ startX, lineHeight, paint);
		canvas.drawLine(startX, 0, startX, lineHeight, paint);
		int x = 0;
		int y = 0;
		for (int i = 0; i < wSize; i++) {
			x = startX + i * zPadding + (i) * zWith;
			if (entity != null && entity.wList != null) {
				String wVal = entity.wList.get(i);
				String[] wArray = wVal.split(",");
				if (wArray[1].equals("true")) {
					canvas.drawText(wArray[0], x, totalHeight, paint);
				}
			}
		}
		for (int i = 0; i < hSize; i++) {
			y = lineHeight - i * zHeight;
			if (entity != null && entity.hList != null) {
				String wVal = entity.hList.get(i);
				String[] wArray = wVal.split(",");
				if (i == 0) {
					canvas.drawText(wArray[0],
							DeviceInfo.DipToPixels(this.getContext(), 5), y,
							paint);
				} else {
					//用游标绘画文本
					canvas.drawText(
							wArray[0],
							startX
									- DeviceInfo.DipToPixels(this.getContext(),
											15), y, paint);
				}
			}
		}
	}

	public void drawChart(Canvas canvas) {
		paint.setColor(Color.RED);
		if (entity != null && entity.wList.size() > 0) {
			for (int i = 0; i < wSize; i++) {
				int total = (int) (entity.map.get(entity.wList.get(i)) == null ? 0
						: entity.map.get(entity.wList.get(i)) * entity.scale);
				//用游标画一个方块
				canvas.drawRect((i + 1) * zPadding + (i) * zWith + startX,
						lineHeight - total, i * zPadding + i * zWith + startX,
						lineHeight, paint);
			}
		}
	}

	@Override
	public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		final int widthMode = MeasureSpec.getMode(widthMeasureSpec);
		final int widthSize = MeasureSpec.getSize(widthMeasureSpec);
		final int heightMode = MeasureSpec.getMode(heightMeasureSpec);
		final int heightSize = MeasureSpec.getSize(totalHeight);
		setMeasuredDimension(widthSize, heightSize);
	}

	@Override
	public void onDraw(Canvas canvas) {
		drawAxis(canvas);
		drawChart(canvas);
	}

}


 

 

 


 


 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Android自定义统计图(柱状图,折线图,饼状图)

最近由于项目需要,研究了一些统计图的做法,开始时,看了很多博文,大部分都是引用第三方的库,虽然简单, 易上手,但是功能太死板,有很多要求都是不能满足的,所以经过研究,自己使用View中的canv...

android自定义带动画的柱状图控件

1.也是突然的想法,写了个柱状图,然后觉得静态的太死板又加上去了动画和点击事件. 2.下面开始上菜!各位道友觉得不好呢,就多给点批评建议,然后都给点个赞,哈哈~(原创作品,转载请标明) (上传图片...

Android 项目(一):自定义View绘制“柱状图”

为什么要绘制柱状图?这是因为在有些应用中需要展示数据,单纯的列出一些数据估计谁看了都会烦,因此数据的展示通常会使用一些图表的形式展现出来。   上面的柱子是怎样绘制的呢?先来梳理一下思路:通过上面的...

Android自定义View写柱状图

首先借鉴了3个案例然后进行了整合,在原有基础上增加了点击和移动事件: http://blog.csdn.net/nugongahou110/article/details/49517725 htt...

Android 如何 画 柱状图 -------自定义View

实现了 柱状图 根据 SeekBar的滑动 改变的效果: 图示效果: 自定义View的代码: package com.example.coustomviewdemo; ...

使用HorizontalScrollView简单实现柱状图

有个爱折腾的美工是个什么体验。。。那就是效果,也是,android也就是个UI,UI注重的是用户体验,良好的用户体验跟舒适的UI效果是分不开的。这次要做的效果就是,做完测试后提交的历史记录,以柱状图的...
  • z_zT_T
  • z_zT_T
  • 2016-07-13 17:21
  • 2150

Android自定义控件之动态柱状图

设计思路:1.画柱状图 2.画竖线 3.画顶部横线 4.画文字1.画柱状图画柱状图的方法很简单,就是使用canvas.drawRect(float left, float top, float ...

Android自定义View--自己撸一个柱状图也没那么难

绪论 转眼间,2016伴随着互联网寒冬和帝都的雾霾马上就过去了,不知道大家今年一整年过得怎么样?最近票圈被各个城市的雾霾刷屏,也被各个公司裁员、移动开发人员失业,互联网行业不景气等等刷爆了。作为一...
  • lyhhj
  • lyhhj
  • 2016-12-20 23:40
  • 6372

Android自定义柱状图,带有标注和左右滑动效果

最近自己改进了一下柱状图的绘制,支持多跟柱子,自己设置颜色,并且添加了手动滑动效果(在屏幕绘制宽度不够时启动滑动),下图是整体效果,下面我分析一下代码: 1、设置内容:  tagging:标注  xR...

【Android】自定义View -- 条形图(柱状图)

【问题】 实现可动态变化的条形图; 【效果图】 【用法】 How to use1? android:id="@+id/dcv_7" ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)