先看效果圖

Paste_Image.png

SVID_20170724_102825.gif

從上線的效果圖來看， 我們首先不管 移動， 先把柱狀繪制出來

• 首先我們定義一些參數(shù)
• 柱狀的寬度
• 柱狀的邊距
• 畫筆

Paste_Image.png

• 初始化畫筆， 寬度 邊距

Paste_Image.png

接下來 我們開始繪制 柱狀了 從效果圖 我們可以看出我們的柱狀是這樣的形式繪制出來的

Paste_Image.png

<code>

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

</code>

繪制玩矩陣 接下來移動矩陣 主要是計算mSlideX 保存 這個值

我們這個時候需要重寫onTouchEvent 從下面的代碼我們可以看出 主要是限制mSlideX 的大小 來限定柱狀可以移動的范圍 mSlideX<=0的時候 限制向右滑動的距離0 ， mSlideX>=mRectDrawWidth的時候 mSlideX=mRectDrawWidth; 限制左滑的距離 不能超過屏幕之外的矩陣?yán)L制寬度
也就 紅線部分的寬度

Paste_Image.png

<code>

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;

}

</code>

完整代碼

<code>

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;

    }
}

</code>

activity代碼

Paste_Image.png