先看效果圖
Paste_Image.png
SVID_20170724_102825.gif
從上線的效果圖來(lái)看， 我們首先不管 移動(dòng)， 先把柱狀繪制出來(lái)
- 首先我們定義一些參數(shù)
- 柱狀的寬度
- 柱狀的邊距
- 畫(huà)筆
Paste_Image.png
- 初始化畫(huà)筆， 寬度 邊距
Paste_Image.png
接下來(lái) 我們開(kāi)始繪制 柱狀了 從效果圖 我們可以看出我們的柱狀是這樣的形式繪制出來(lái)的
Paste_Image.png
<code>
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/**右邊超出的距離-手機(jī)之外的寬度*/
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>
繪制玩矩陣 接下來(lái)移動(dòng)矩陣 主要是計(jì)算mSlideX 保存 這個(gè)值
我們這個(gè)時(shí)候需要重寫(xiě)onTouchEvent 從下面的代碼我們可以看出 主要是限制mSlideX 的大小 來(lái)限定柱狀可以移動(dòng)的范圍 mSlideX<=0的時(shí)候 限制向右滑動(dòng)的距離0 ， mSlideX>=mRectDrawWidth的時(shí)候 mSlideX=mRectDrawWidth; 限制左滑的距離 不能超過(guò)屏幕之外的矩陣?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";
/**柱子的畫(huà)筆*/
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);
/**計(jì)算最多移動(dòng)的距離*/
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
