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

最近自己改进了一下柱状图的绘制，支持多跟柱子，自己设置颜色，并且添加了手动滑动效果（在屏幕绘制宽度不够时启动滑动），下图是整体效果，下面我分析一下代码：

1、设置内容：

 tagging：标注

 xRawData：x轴坐标

 yRawData：为柱形图的内容，通过List<Float>... yRawData传入，可以有多个

/** * 设置值 tagging：标注 xRawData：x轴坐标 yRawData：为柱形图的内容 */public void setData(List<String> tagging, List<String> xRawData,List<Float>... yRawData) {occupyingText = null;this.xRawDatas.clear();this.yRawData.clear();this.xRawDatas.addAll(xRawData);this.tagging = tagging;Collections.addAll(this.yRawData, yRawData);updateTagging();updateCutoffwidth();scroll();invalidate();}

2、调用方法：

BarChartView kanner = (BarChartView) findViewById(R.id.kanner);List<String> taggings = new ArrayList<>(); taggings.add("北京");taggings.add("上海");taggings.add("深圳");List<String> xRawDatas = new ArrayList<>();  //横坐标值xRawDatas.add("2016-01");xRawDatas.add("2016-02");xRawDatas.add("2016-03");xRawDatas.add("2016-04");xRawDatas.add("2016-05");xRawDatas.add("2016-06");xRawDatas.add("2016-07");xRawDatas.add("2016-08");xRawDatas.add("2016-09");List<Float> yRawDatas1 = new ArrayList<>();List<Float> yRawDatas2 = new ArrayList<>();List<Float> yRawDatas3 = new ArrayList<>();yRawDatas1.add(12.0f);yRawDatas1.add(7.0f);yRawDatas1.add(-12.0f);yRawDatas1.add(6.0f);yRawDatas1.add(12.0f);yRawDatas1.add(17.0f);yRawDatas1.add(-5.0f);yRawDatas1.add(9.0f);yRawDatas1.add(2.0f);yRawDatas2.add(-12.0f);yRawDatas2.add(7.0f);yRawDatas2.add(6.0f);yRawDatas2.add(7.0f);yRawDatas2.add(8.0f);yRawDatas2.add(-13.0f);yRawDatas2.add(5.0f);yRawDatas2.add(9.0f);yRawDatas2.add(2.8f);yRawDatas3.add(3.0f);yRawDatas3.add(6.0f);yRawDatas3.add(9.0f);yRawDatas3.add(6.0f);yRawDatas3.add(11.0f);yRawDatas3.add(-7.0f);yRawDatas3.add(6.66f);yRawDatas3.add(6.0f);yRawDatas3.add(-6.0f);kanner.setData(taggings, xRawDatas, yRawDatas1,yRawDatas2,yRawDatas3);

这里我做了一些假数据，实际开发中根据接口请求到的值赋值就可以了。

3、这里我对一些关键技术说明一下：

private float mDownPosX = 0;private float mDownPosY = 0;@Overridepublic boolean dispatchTouchEvent(MotionEvent event) {if (offsetWidthMax != 0) {final float x = event.getX();final float y = event.getY();final int action = event.getAction();switch (action) {case MotionEvent.ACTION_DOWN:mDownPosX = x;mDownPosY = y;break;case MotionEvent.ACTION_MOVE:final float deltaX = Math.abs(x - mDownPosX);final float deltaY = Math.abs(y - mDownPosY);if (deltaX > deltaY) {getParent().requestDisallowInterceptTouchEvent(true);} else {getParent().requestDisallowInterceptTouchEvent(false);return true;}break;}mGestureDetector.onTouchEvent(event);return true;} else {getParent().requestDisallowInterceptTouchEvent(false);return super.dispatchTouchEvent(event);}}

重写dispatchTouchEvent，如果在滑动视图里，会与系统的滑动事件冲突，这里就用到了事件分发机制，因为柱状图都是左右滑动的，所以我们只需要拦截左右滑动就可以了，在这里我们判断如果左右滑动距离大于上下滑动，就执行左右滑动，否则不执行滑动事件。具体Android事件分发我整理一片博客http://blog.csdn.net/yulu5216/article/details/51306160，感兴趣的可以看看

onSizeChanged，当布局高宽改变时会重新绘制图片高宽：

@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {this.canvasHeight = h;this.canvasWidth = w;coordinateRect = new RectF(marginLeft, marginTop + taggingHeight,canvasWidth - marginRight, canvasHeight - marginBottom);horizontalNum = (int) (coordinateRect.width() / dip2px(60));updateTagging();updateCutoffwidth();}

设置最大和最小值：

private boolean initMaxAndMin(int start, int stop) {if (stop <= 0) {return true;}if (stop > this.xRawDatas.size()) {stop = this.xRawDatas.size();}List<Float> yRawDataNews = new ArrayList<>();for (int i = 0; i < this.yRawData.size(); i++) {yRawDataNews.addAll(yRawData.get(i).subList(start, stop));}float maxValueNews = getMaxArray(yRawDataNews);float minValueNews = getMinArray(yRawDataNews);if (isInteger) {if (maxValueNews >= 0 && minValueNews >= 0) {minValueNews = 0;maxValueNews = ((int) ((maxValueNews - 1) / 5 + 1)) * 5;yIndex = 5;} else if (maxValueNews <= 0 && minValueNews < 0) {maxValueNews = 0;minValueNews = ((int) ((minValueNews) / 5)) * 5;yIndex = 0;} else {float proportion = Math.abs(maxValueNews / minValueNews); // 比例if (proportion >= 4) {maxValueNews = ((int) ((maxValueNews - 1) / 4 + 1)) * 4;minValueNews = -maxValueNews / 4;yIndex = 4;} else if (proportion >= 1) {maxValueNews = ((int) ((maxValueNews - 1) / 3 + 1)) * 3;minValueNews = -maxValueNews * 2 / 3;yIndex = 3;} else if (proportion >= 1 / 4) {minValueNews = ((int) ((minValueNews) / 3)) * 3;maxValueNews = -minValueNews * 2 / 3;yIndex = 2;} else {minValueNews = ((int) ((minValueNews) / 4)) * 4;maxValueNews = -minValueNews / 4;yIndex = 1;}}} else {if (minValueNews < 0 && maxValueNews > 0) {float proportion = Math.abs(maxValueNews / minValueNews); // 比例if (proportion >= 4) {minValueNews = -maxValueNews / 4;yIndex = 4;} else if (proportion >= 1) {minValueNews = -maxValueNews * 2 / 3;yIndex = 3;} else if (proportion >= 1 / 4) {maxValueNews = -minValueNews * 2 / 3;yIndex = 2;} else {maxValueNews = -minValueNews / 4;yIndex = 1;}} else if (minValueNews >= 0 && maxValueNews > 0) {yIndex = 5;minValueNews = 0;} else if (minValueNews < 0 && maxValueNews <= 0) {yIndex = 0;maxValueNews = 0;}}if (maxValueNews == minValueNews) {minValueNews = +1;}if (maxValueNews == maxValue && minValue == minValueNews) {return true;}maxValue = maxValueNews;minValue = minValueNews;if (isCompanyUpdate) {if (maxValue > 300000000 || minValue < -300000000) {companyNews = "亿" + company;priceWeight = 100000000;} else if (maxValue > 3000000 || minValue < -3000000) {companyNews = "百万" + company;priceWeight = 1000000;} else if (maxValue > 30000 || minValue < -30000) {companyNews = "万" + company;priceWeight = 10000;} else if (maxValue > 300 || minValue < -300) {companyNews = "百" + company;priceWeight = 100;} else {companyNews = company;}} else {companyNews = company;}if (minValue < 0) {marginBottom = dip2px(30);}coordinateRect = new RectF(marginLeft, marginTop + taggingHeight,canvasWidth - marginRight, canvasHeight - marginBottom);return false;}

start和stop是可视区域的开始和结束位置的下标，返回值判断是否最大和最小值是否改变，如果改变则刷新页面

最后我们上图：

代码下载地址：http://download.csdn.net/detail/yulu5216/9686662

最后我们上图：