android 分组柱状图_Android 柱状图 可移动柱状图

先看效果图

Paste_Image.png

SVID_20170724_102825.gif

从上线的效果图来看， 我们首先不管 移动， 先把柱状绘制出来

首先我们定义一些参数

柱状的宽度

柱状的边距

画笔

Paste_Image.png

初始化画笔， 宽度 边距

Paste_Image.png

接下来 我们开始绘制 柱状了 从效果图 我们可以看出我们的柱状是这样的形式绘制出来的

Paste_Image.png

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

/**右边超出的距离-手机之外的宽度*/

mRectDrawWidth=((mRectLeft * mPoints.length) + (mRectSize * mPoints.length + getBrokenLineLeft()-getViewWidth()));

DrawRect(canvas);

}

private void DrawRect(Canvas canvas) {

for (int i = 0; i < mPoints.length; i++) {

Point point = mPoints[i];

Rect rect = new Rect();

int left= (int) ((mRectLeft * i) + (mRectSize * i+ getBrokenLineLeft())-mSlideX);

int right= ((int) ((mRectLeft * i) + (mRectSize * i + mRectSize+ getBrokenLineLeft()-mSlideX)) );

if(left<=getBrokenLineLeft()){

left= (int) getBrokenLineLeft();

}

if(right<=getBrokenLineLeft()){

right= (int) getBrokenLineLeft();

}

rect.left =left;

rect.right =right;

rect.bottom = (int) (getNeedDrawHeight() + getBrokenLineTop());

rect.top = point.y;

canvas.drawRect(rect, mSlideRectPaint);

if(left!=right){

canvas.drawText(i+"",left+((right-left) /2),mPoints[i].y,getBrokenLineTextPaint());

}

}

}

绘制玩矩阵 接下来移动矩阵 主要是计算mSlideX 保存 这个值

我们这个时候需要重写onTouchEvent 从下面的代码我们可以看出 主要是限制mSlideX 的大小 来限定柱状可以移动的范围 mSlideX<=0的时候 限制向右滑动的距离0 ， mSlideX>=mRectDrawWidth的时候 mSlideX=mRectDrawWidth; 限制左滑的距离 不能超过屏幕之外的矩阵绘制宽度

也就 红线部分的宽度

Paste_Image.png

private float mSlideX=0;

private float mLastDownX;

@Override

public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN:

mLastDownX = event.getX();

case MotionEvent.ACTION_UP:

mSlideX += (mLastDownX-event.getX());

mLastDownX = event.getX();

if(mSlideX<=0){

mSlideX=0;

}

if(mSlideX>=mRectDrawWidth){

mSlideX=mRectDrawWidth;

}

postInvalidate();

case MotionEvent.ACTION_MOVE:

mSlideX += (mLastDownX-event.getX());

mLastDownX = event.getX();

if(mSlideX<=0){

mSlideX=0;

}

if(mSlideX>=mRectDrawWidth){

mSlideX=mRectDrawWidth;

}

postInvalidate();

}

return true;

}

完整代码

package com.app_chart;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Point;

import android.graphics.Rect;

import android.support.annotation.Nullable;

import android.util.AttributeSet;

import android.view.MotionEvent;

public class SlideRectChart extends AbsChart {

private static final String TAG = "SlideRectChart";

/**柱子的画笔*/

private Paint mSlideRectPaint;

/**柱子的大小*/

private float mRectSize;

/**柱子之间的边距*/

private float mRectLeft;

/**右边超出的范围*/

private float mRectDrawWidth;

public SlideRectChart(Context context) {

super(context);

init();

}

public SlideRectChart(Context context, @Nullable AttributeSet attrs) {

super(context, attrs);

init();

}

private void init() {

if (mSlideRectPaint == null) {

mSlideRectPaint = new Paint();

}

mSlideRectPaint.setAntiAlias(true);

mSlideRectPaint.setStyle(Paint.Style.FILL);

mSlideRectPaint.setColor(Color.RED);

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

mRectSize = getViewWidth() / 24;

mRectLeft = dip2px(4);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

/**计算最多移动的距离*/

mRectDrawWidth=((mRectLeft * mPoints.length) + (mRectSize * mPoints.length + getBrokenLineLeft()-getViewWidth()));

DrawRect(canvas);

}

private void DrawRect(Canvas canvas) {

for (int i = 0; i < mPoints.length; i++) {

Point point = mPoints[i];

Rect rect = new Rect();

int left= (int) ((mRectLeft * i) + (mRectSize * i+ getBrokenLineLeft())-mSlideX);

int right= ((int) ((mRectLeft * i) + (mRectSize * i + mRectSize+ getBrokenLineLeft()-mSlideX)) );

if(left<=getBrokenLineLeft()){

left= (int) getBrokenLineLeft();

}

if(right<=getBrokenLineLeft()){

right= (int) getBrokenLineLeft();

}

rect.left =left;

rect.right =right;

rect.bottom = (int) (getNeedDrawHeight() + getBrokenLineTop());

rect.top = point.y;

canvas.drawRect(rect, mSlideRectPaint);

if(left!=right){

canvas.drawText(i+"",left+((right-left) /2),mPoints[i].y,getBrokenLineTextPaint());

}

}

}

private float mSlideX=0;

private float mLastDownX;

@Override

public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN:

mLastDownX = event.getX();

case MotionEvent.ACTION_UP:

mSlideX += (mLastDownX-event.getX());

mLastDownX = event.getX();

if(mSlideX<=0){

mSlideX=0;

}

if(mSlideX>=mRectDrawWidth){

mSlideX=mRectDrawWidth;

}

postInvalidate();

case MotionEvent.ACTION_MOVE:

mSlideX += (mLastDownX-event.getX());

mLastDownX = event.getX();

if(mSlideX<=0){

mSlideX=0;

}

if(mSlideX>=mRectDrawWidth){

mSlideX=mRectDrawWidth;

}

postInvalidate();

}

return true;

}

}

activity代码

Paste_Image.png