devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

可滑动并查看详情与设置最小值和最大值的ChartView

作者：凡人多烦事01 | 2024-03-17 07:18:10

赞

踩

qchartview 最大值

效果图

先上效果图：

分为三部分：

  1. 最上面的日，周，月，年可设置图表对应的横坐标的单位。如图所示是月的情况，一共有31天。
  2. 中间的显示选择的日期。
  3. 最下面为对应的图表内容。每段显示最小值到最大值，并且标注出了这段时间的最大值与最小值。支持滑动和点击对应的条目显示出具体时间和当时的最大值与最小值。

布局

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context="com.leo.android.wheelview.MainActivity">
  8.  
  9.     <LinearLayout
  10.         android:id="@+id/time_selected"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="wrap_content"
  13.         android:orientation="horizontal">
  14.         <Button
  15.             android:layout_width="0dp"
  16.             android:layout_height="wrap_content"
  17.             android:layout_weight="1"
  18.             android:text="日"
  19.             android:background="@drawable/time_background"/>
  20.         <Button
  21.             android:layout_width="0dp"
  22.             android:layout_height="wrap_content"
  23.             android:layout_weight="1"
  24.             android:text="周"
  25.             android:background="@drawable/time_background"/>
  26.         <Button
  27.             android:layout_width="0dp"
  28.             android:layout_height="wrap_content"
  29.             android:layout_weight="1"
  30.             android:text="月"
  31.             android:background="@drawable/time_background"/>
  32.         <Button
  33.             android:layout_width="0dp"
  34.             android:layout_height="wrap_content"
  35.             android:layout_weight="1"
  36.             android:text="年"
  37.             android:background="@drawable/time_background"/>
  38.     </LinearLayout>
  39.  
  40.     <RelativeLayout
  41.         android:id="@+id/time_move"
  42.         android:layout_width="match_parent"
  43.         android:layout_height="wrap_content"
  44.         android:layout_below="@+id/time_selected">
  45.         <ImageView
  46.             android:layout_width="wrap_content"
  47.             android:layout_height="wrap_content"
  48.             android:layout_alignParentLeft="true"
  49.             android:background="@mipmap/ic_launcher"
  50.             android:visibility="gone"/>
  51.         <TextView
  52.             android:layout_width="wrap_content"
  53.             android:layout_height="wrap_content"
  54.             android:text="2018年6月27日"
  55.             android:layout_centerInParent="true"
  56.             android:padding="20dp"/>
  57.         <ImageView
  58.             android:layout_width="wrap_content"
  59.             android:layout_height="wrap_content"
  60.             android:layout_alignParentRight="true"
  61.             android:background="@mipmap/ic_launcher"
  62.             android:visibility="gone"/>
  63.     </RelativeLayout>
  64.  
  65.     <com.leo.android.wheelview.ChartView
  66.         android:id="@+id/chartview"
  67.         android:layout_width="match_parent"
  68.         android:layout_height="400dp"
  69.         android:layout_below="@+id/time_selected"/>
  70.  
  71. </RelativeLayout>
  72. 复制代码

最上层是 LinearLayout 包裹的时间段的四个按钮。中间是 RelativeLayout 包裹的具体时间（左右可以包含往左和往右的点击按钮，这边省略）。最下面是具体的图表。

自定义 ChartView

初始化

类继承结构和构造方法：

  1. public class ChartView extends View {
  2.     public ChartView(Context context) {
  3.         this(context, null);
  4.     }
  5.  
  6.     public ChartView(Context context, @Nullable AttributeSet attrs) {
  7.         super(context, attrs);
  8.         if (isInEditMode()) {
  9.             return;
  10.         }
  11.  
  12.         ViewConfiguration viewConfiguration = ViewConfiguration.get(context);
  13.         //获取touchSlop。该值表示系统所能识别出的被认为是滑动的最小距离
  14.         mTouchSlop = viewConfiguration.getScaledTouchSlop();
  15.         //获取Fling速度的最小值和最大值
  16.         mMaximumFlingVelocity = viewConfiguration.getScaledMaximumFlingVelocity();
  17.         mMinimumFlingVelocity = viewConfiguration.getScaledMinimumFlingVelocity();
  18.         //OverScroller类是为了实现View平滑滚动的一个Helper类。
  19.         mScroller = new OverScroller(context);
  20.  
  21.         init();//初始化画笔与数据
  22.     }
  23.     
  24.     private void init() {
  25.         //绘制背景的画笔
  26.         mBgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  27.         mBgPaint.setStrokeWidth(mBgPaintWidth);
  28.         mBgPaint.setColor(mBgColor);
  29.  
  30.         //绘制纵坐标数值的画笔
  31.         mHCoordinatePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  32.         mHCoordinatePaint.setTextSize(mAbscissaMsgSize);
  33.         mHCoordinatePaint.setTextAlign(Paint.Align.CENTER);
  34.         mHCoordinatePaint.setColor(mHCoordinateNumColor);
  35.  
  36.         //绘制横坐标数值的画笔
  37.         mVCoordinatePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  38.         mVCoordinatePaint.setTextSize(mAbscissaMsgSize);
  39.         mVCoordinatePaint.setTextAlign(Paint.Align.CENTER);
  40.         mVCoordinatePaint.setColor(mVCoordinateNumColor);
  41.  
  42.         //绘制健康数据的画笔
  43.         mHealthPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  44.         mHealthPaint.setColor(mHealthColor);
  45.         mHealthPaint.setStyle(Paint.Style.FILL_AND_STROKE);
  46.         mHealthPaint.setStrokeWidth(mHealthDataBarWidth);
  47.         mHealthPaint.setStrokeCap(Paint.Cap.ROUND);
  48.  
  49.         //绘制健康数据最值的画笔
  50.         mHealthNumPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  51.         mHealthNumPaint.setColor(mHealthColor);
  52.         mHealthNumPaint.setTextSize(mAbscissaMsgSize);
  53.         mHealthNumPaint.setTextAlign(Paint.Align.CENTER);
  54.  
  55.         //绘制详情数据背景的画笔
  56.         mSelectedPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  57.         mSelectedPaint.setColor(mHealthColor);
  58.  
  59.         //绘制详情数据的画笔
  60.         mSelectedDetailPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  61.         mSelectedDetailPaint.setColor(Color.WHITE);
  62.         mSelectedDetailPaint.setTextSize(mAbscissaMsgSize);
  63.  
  64.         Random random = new Random();
  65.         for (int i = 0; i < 31; i++) {
  66.             mHealthDatas.add(new HealthData(100 + random.nextInt(60), 60 + random.nextInt(40), (i + 1) + "日", "2018年"));
  67.         }
  68.         setHealthDatas(mHealthDatas);
  69.     }
  70. }
  71. 复制代码

这里将数据封装成了 HealthData 数据结构：

  1. private static class HealthData {
  2.     private float upper;
  3.     private float lower;
  4.     private String time;
  5.     private String time2;
  6.     private RectF mRect = new RectF();
  7.  
  8.     public HealthData(float upper, float lower, String time, String time2) {
  9.         this.upper = upper;
  10.         this.lower = lower;
  11.         this.time = time;
  12.         this.time2 = time2;
  13.     }
  14.  
  15.     public String getTime2() {
  16.         return time2;
  17.     }
  18.  
  19.     public void setTime2(String time2) {
  20.         this.time2 = time2;
  21.     }
  22.  
  23.     public float getUpper() {
  24.         return upper;
  25.     }
  26.  
  27.     public void setUpper(float upper) {
  28.         this.upper = upper;
  29.     }
  30.  
  31.     public float getLower() {
  32.         return lower;
  33.     }
  34.  
  35.     public void setLower(float lower) {
  36.         this.lower = lower;
  37.     }
  38.  
  39.     public String getTime() {
  40.         return time;
  41.     }
  42.  
  43.     public void setTime(String time) {
  44.         this.time = time;
  45.     }
  46.  
  47.     public RectF getRect() {
  48.         return mRect;
  49.     }
  50.  
  51.     public void setRect(RectF rect) {
  52.         mRect = rect;
  53.     }
  54. }
  55. 复制代码

我们在给 ChartView 设置数据的时候需要做一些额外处理。例如，获得最大值和最小值的坐标，保存为 mLowerIndex 和 mUpperIndex：

  1. public void setHealthDatas(List<HealthData> healthDatas) {
  2.     mHealthDatas = healthDatas;
  3.     float minLower = healthDatas.get(0).getLower();
  4.     float maxUpper = healthDatas.get(0).getUpper();
  5.     mLowerIndex = 0;
  6.     mUpperIndex = 0;
  7.     //获取数据中的最大值与最小值
  8.     for (int i = 1; i < mHealthDatas.size(); i++) {
  9.         HealthData healthData = mHealthDatas.get(i);
  10.         if (healthData.getLower() < minLower) {
  11.             minLower = healthData.getLower();
  12.             mLowerIndex = i;
  13.         }
  14.         if (healthData.getUpper() > maxUpper) {
  15.             maxUpper = healthData.getUpper();
  16.             mUpperIndex = i;
  17.         }
  18.     }
  19. }
  20. 复制代码

再来是一些帮助方法，主要是通过初始速度获取最终滑动距离，sp转换为px，dp转换为px：

  1. @Override
  2. protected void onAttachedToWindow() {
  3.     super.onAttachedToWindow();
  4.     final float ppi = getContext().getResources().getDisplayMetrics().density * 160.0f;
  5.     mPhysicalCoeff = SensorManager.GRAVITY_EARTH // g (m/s^2)
  6.             * 39.37f // inch/meter
  7.             * ppi
  8.             * 0.84f; // look and feel tuning
  9. }
  10.  
  11. private static final float INFLEXION = 0.35f; // Tension lines cross at (INFLEXION, 1)
  12.  
  13. // A context-specific coefficient adjusted to physical values.
  14. private float mPhysicalCoeff;
  15.  
  16.  
  17. private static float DECELERATION_RATE = (float) (Math.log(0.78) / Math.log(0.9));
  18.  
  19. // Fling friction
  20. private float mFlingFriction = ViewConfiguration.getScrollFriction();
  21.  
  22. /* Returns the duration, expressed in milliseconds */
  23. //通过初始速度获取最终滑动距离
  24. private int getSplineFlingDuration(int velocit) {
  25.     final double l = getSplineDeceleration(velocit);
  26.     final double decelMinusOne = DECELERATION_RATE - 1.0;
  27.     return (int) (1000.0 * Math.exp(l / decelMinusOne));
  28. }
  29.  
  30. private double getSplineDeceleration(float velocity) {
  31.     return Math.log(INFLEXION * Math.abs(velocity) / (mFlingFriction * mPhysicalCoeff));
  32. }
  33.  
  34. private float dp2px(float dp) {
  35.     return TypedValue.applyDimension(
  36.             TypedValue.COMPLEX_UNIT_DIP,
  37.             dp,
  38.             getResources().getDisplayMetrics()
  39.     );
  40. }
  41.  
  42. private float sp2px(float sp) {
  43.     return TypedValue.applyDimension(
  44.             TypedValue.COMPLEX_UNIT_SP,
  45.             sp,
  46.             getResources().getDisplayMetrics()
  47.     );
  48. }
  49. 复制代码

绘制周期

接下来就是进入绘制周期了，首先是 onSizeChanged 方法：

  1. @Override
  2. protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  3.     super.onSizeChanged(w, h, oldw, oldh);
  4.     //获取ChartView上方具体显示时间的控件。用来显示详情
  5.     RelativeLayout parent = (RelativeLayout) getParent();
  6.     int childCount = parent.getChildCount();
  7.     for (int i = 0; i < childCount; i++) {
  8.         View child = parent.getChildAt(i);
  9.         if (child.getId() == R.id.time_move) {
  10.             mMoveHeight = child.getMeasuredHeight();
  11.             break;
  12.         }
  13.     }
  14.     //记录ChartView的宽高
  15.     mWidth = w;
  16.     mHeight = h - mMoveHeight;//高度要减去ChartView上方具体显示时间的控件。用来显示详情
  17.     //记录下纵坐标的坐标数的最大宽度和横坐标的坐标数的最大高度
  18.     calculateTextSize();
  19.     //计算坐标轴和长度和宽度
  20.     mVCoordinate = mWidth - mMaxHCoordinateTextWidth;
  21.     mHCoordinate = mHeight - mMaxHCoordinateTextHeight;
  22.     //计算坐标轴可以滑动的最大距离
  23.     calculateDistanceY();
  24.     //计算出纵坐标坐标数的1代表多少像素
  25.     int step = (int) (mHCoordinate / mHCoordinateNum);
  26.     mPxToOne = step / mHCoordinateInternalSize;
  27.     //内容显示的范围。包括横坐标的坐标数与坐标系的内容。因为要将canvas下移mMoveHeight，所以这边要对应的扩大绘制范围以显示详情
  28.     mContentRect = new Rect(0, -mMoveHeight, mWidth - mMaxHCoordinateTextWidth, mHeight + mMoveHeight);
  29. }
  30. 复制代码

接着是 onDraw 方法：

  1. @Override
  2. protected void onDraw(Canvas canvas) {
  3.     super.onDraw(canvas);
  4.     canvas.translate(0, mMoveHeight);//下移mMoveHeight以显示详情
  5.     drawBackgroud(canvas);//绘制背景
  6.     drawVerticleNum(canvas);//绘制纵轴
  7.     canvas.clipRect(mContentRect);//裁剪显示范围
  8.     drawHealthData(canvas);//绘制数据
  9.     drawCoordinateAxes(canvas);//绘制坐标轴
  10. }
  11. 复制代码

绘制背景：

  1. private void drawBackgroud(Canvas canvas) {
  2.     int step = (int) mBgInternalSize;//每根背景线的距离
  3.     int width = (int) mVCoordinate;
  4.     int height = (int) mHCoordinate;
  5.  
  6.     int widthLineNums = width / step;//绘制的背景纵线
  7.     for (int i = 0; i <= widthLineNums; i++) {
  8.         canvas.drawLine(step * i, 0, step * i, height, mBgPaint);
  9.     }
  10.     int heightLineNums = height / step;
  11.     for (int i = 0; i <= heightLineNums; i++) {//绘制的背景横线
  12.         canvas.drawLine(0, step * i, width, step * i, mBgPaint);
  13.     }
  14. }
  15. 复制代码

绘制纵轴： 

  1. private void drawVerticleNum(Canvas canvas) {
  2.     int step = (int) (mHCoordinate / mHCoordinateNum);
  3.     for (int i = 0; i < mHCoordinateNum; i++) {
  4.         //画文字
  5.         canvas.drawText(String.valueOf(mHCoordinateStartNum + i * mHCoordinateInternalSize), mVCoordinate + mMaxHCoordinateTextWidth / 2, step * (mHCoordinateNum - i), mHCoordinatePaint);
  6.     }
  7. }
  8. 复制代码

绘制数据： 

  1.     private void drawHealthData(Canvas canvas) {
  2.         //遍历设置的数据集
  3.         for (int i = 0; i < mHealthDatas.size(); i++) {
  4.             HealthData healthData = mHealthDatas.get(i);
  5.             float lower = healthData.getLower();//最低值
  6.             float upper = healthData.getUpper();//最高值
  7.             String time = healthData.getTime();//横坐标时间
  8.             float startX = mVCoordinate / mVCoordinateInternalNum * (i + 1) - mDistanceX;//绘制的横坐标
  9.             float startY = mHCoordinate - (lower - mHCoordinateStartNum) * mPxToOne;//绘制的纵坐标的低点
  10.             float endY = startY - (upper - lower) * mPxToOne;//绘制的纵坐标的高点
  11.             //绘制竖线
  12.             canvas.drawLine(startX, startY, startX, endY, mHealthPaint);
  13.             //设置点击范围
  14.             RectF rect = new RectF(startX - dp2px(mSelectedMargin), endY - dp2px(mSelectedMargin) + mMoveHeight, startX + dp2px(mSelectedMargin), startY + dp2px(mSelectedMargin) + mMoveHeight);
  15.             healthData.setRect(rect);
  16.             //绘制最大值和最小值
  17.             if (i == mLowerIndex) {
  18.                 canvas.drawText("最低" + (int)lower, startX, startY + mMaxHCoordinateTextHeight, mHealthNumPaint);
  19.             }
  20.             if (i == mUpperIndex) {
  21.                 canvas.drawText("最高" + (int)upper, startX, endY - mMaxHCoordinateTextHeight / 2, mHealthNumPaint);
  22.             }
  23.             //绘制底部文字
  24.             canvas.drawText(time, startX, mHCoordinate + mMaxHCoordinateTextHeight - mBgInternalSize, mVCoordinatePaint);
  25.         }
  26.         //如果有点击记录则显示详情
  27.         if (mSelected != -1) {
  28.             HealthData healthData = mHealthDatas.get(mSelected);
  29.             float startX = mVCoordinate / mVCoordinateInternalNum * (mSelected + 1) - mDistanceX;//绘制的横坐标
  30.             //绘制竖线
  31.             canvas.drawLine(startX, 0, startX, mHCoordinate, mSelectedPaint);
  32.             //移动回原点
  33.             canvas.translate(0, -mMoveHeight);
  34.             if (startX < mVCoordinate/4) {
  35.                 startX = mVCoordinate/4;
  36.             }
  37.             if (mVCoordinate - startX < mVCoordinate/4) {
  38.                 startX = mVCoordinate - mVCoordinate/4;
  39.             }
  40.             //绘制详细数据
  41.             canvas.drawRoundRect(startX - mVCoordinate/4, 0, startX + mVCoordinate/4, mMoveHeight, dp2px(5), dp2px(5), mSelectedPaint);
  42.  
  43.             canvas.drawText(healthData.getTime2(), startX - mVCoordinate/4, mMoveHeight/2, mSelectedDetailPaint);
  44.             canvas.drawText(healthData.getTime(), startX - mVCoordinate/4, mMoveHeight, mSelectedDetailPaint);
  45.  
  46.             canvas.drawLine(startX - mVCoordinate/4 + mVCoordinate/8 * 1.5f, 0, startX - mVCoordinate/4 + mVCoordinate/8 * 1.5f, mMoveHeight, mSelectedDetailPaint);
  47.  
  48.             canvas.drawText("最低", startX - mVCoordinate/4 + mVCoordinate/8*2, mMoveHeight/2, mSelectedDetailPaint);
  49.             canvas.drawText(healthData.getLower()+"", startX - mVCoordinate/4 + mVCoordinate/8*2, mMoveHeight, mSelectedDetailPaint);
  50.  
  51.             canvas.drawText("最高", startX - mVCoordinate/4 + mVCoordinate/8*3, mMoveHeight/2, mSelectedDetailPaint);
  52.             canvas.drawText(healthData.getUpper()+"", startX - mVCoordinate/4 + mVCoordinate/8*3, mMoveHeight, mSelectedDetailPaint);
  53.             //移动回原位
  54.             canvas.translate(0, mMoveHeight);
  55.         }
  56.     }
  57. }
  58. 复制代码

绘制坐标轴： 

  1. private void drawCoordinateAxes(Canvas canvas) {
  2.     mBgPaint.setStrokeWidth(mBgInternalSize);
  3.     canvas.drawLine(0, mHCoordinate, mVCoordinate, mHCoordinate, mBgPaint);
  4.     canvas.drawLine(mVCoordinate, 0, mVCoordinate, mHCoordinate, mBgPaint);
  5.     mBgPaint.setStrokeWidth(mBgPaintWidth);
  6. }
  7. 复制代码

动效监听

ACTION_DOWN：

  1. initOrResetVelocityTracker();//初始化或重置速度跟踪器
  2. mIsBeingFling = false;//不处于fling状态
  3. // OverScroller 并不会为我们进行滚动处理，它只是提供了计算的模型，
  4. // 通过调用 computeScrollOffset 进行计算，如果返回 true，表示计算还没结束，
  5. // 然后通过 getCurrX 或 getCurrY 获取计算后的值，最后进行真正的滚动处理，比如调用 scrollTo 等等，
  6. // 这里需要注意的是，需要调用 invalidate 来确保进行下一次的 computeScroll 调用，
  7. // 这里使用的 postInvalidateOnAnimation 其作用是类似的。
  8. mScroller.computeScrollOffset();
  9. //确保每次点击会停止滑动
  10. if (mIsBeingDragged = !mScroller.isFinished()) {
  11.     mScroller.abortAnimation();
  12. }
  13. //请求父控件不拦截点击事件接下去的事件
  14. if (mIsBeingDragged) {
  15.     ViewParent parent = getParent();
  16.     if (parent != null) {
  17.         parent.requestDisallowInterceptTouchEvent(true);
  18.     }
  19. }
  20. //获取第一个手势，支持多手势
  21. mActivePointerId = event.getPointerId(0);
  22. //获取点击的横坐标并记录为上一次坐标
  23. mDownX = event.getX(0);
  24. mLastX = mDownX;
  25. break;
  26. 复制代码

ACTION_POINTER_DOWN：

  1. //当有新的手指按下时分发的事件
  2. final int actionIndex = event.getActionIndex();
  3. mActivePointerId = event.getPointerId(actionIndex);
  4. //获取点击的横坐标并记录为上一次坐标
  5. mDownX = event.getX(actionIndex);
  6. mLastX = mDownX;
  7. 复制代码

ACTION_MOVE：

  1. //判断手势是否合法
  2. final int activePointerId = mActivePointerId;
  3. if (activePointerId == INVALID_POINTER) {
  4.     break;
  5. }
  6. final int pointerIndex = event.findPointerIndex(activePointerId);
  7. if (pointerIndex == -1) {
  8.     Logger.e("onTouchEvent: invalid pointer index");
  9.     break;
  10. }
  11. //获取滑动时的横坐标
  12. final float moveX = event.getX(pointerIndex);
  13. //之前不处于滑动状态且当前滑动的横坐标的值与之前记录的值的差的绝对值大于最小滑动值则视为滑动
  14. if (!mIsBeingDragged && Math.abs(mDownX - moveX) > mTouchSlop) {
  15.     mIsBeingDragged = true;//置状态为滑动
  16.     //请求父控件不拦截点击事件接下去的事件
  17.     ViewParent parent = getParent();
  18.     if (parent != null) {
  19.         parent.requestDisallowInterceptTouchEvent(true);
  20.     }
  21. }
  22. //处于滑动状态
  23. if (mIsBeingDragged) {
  24.     //计算滑动的距离，不能超过设置的最大值和小于最小值
  25.     mDistanceX += mLastX - moveX;
  26.     if (mDistanceX > mMaximumDistanceX) {
  27.         mDistanceX = mMaximumDistanceX;
  28.     }
  29.     if (mDistanceX < mMinimumDistanceX) {
  30.         mDistanceX = mMinimumDistanceX;
  31.     }
  32.     //处理滑动更新。主要依靠 mDistanceX 来进行 onDraw 方法内容的更新
  33.     postInvalidateOnAnimation();
  34. }
  35. //记录旧值
  36. mLastX = moveX;
  37. 复制代码

ACTION_POINTER_UP：

  1. //这个为多指触摸时，某个手指抬起时分发的事件。这段代码处理的是，当某个手指抬起时，而这个手指刚好是我们当前使用的，则重新初始化资源
  2. int actionIndex = event.getActionIndex();
  3. int pointerId = event.getPointerId(actionIndex);
  4. if (pointerId == mActivePointerId) {
  5.     actionIndex = actionIndex == 0 ? 1 : 0;
  6.     mActivePointerId = event.getPointerId(actionIndex);
  7.     mDownX = event.getX(actionIndex);
  8.     mLastX = mDownX;
  9.     mVelocityTracker.clear();
  10. }
  11. 复制代码

ACTION_UP：

  1. final VelocityTracker velocityTracker = mVelocityTracker;//获取速度跟踪器
  2. // 设置VelocityTracker单位.1000表示1秒时间内运动的像素
  3. velocityTracker.computeCurrentVelocity(1000, mMaximumFlingVelocity);
  4. // 判断在1秒内X方向所滑动像素值是否大于最小的fling状态的速度
  5. if (Math.abs(velocityTracker.getXVelocity()) > mMinimumFlingVelocity) {
  6.     // 获取在1秒内X方向所滑动像素值 
  7.     final int xVelocity = (int) velocityTracker.getXVelocity();
  8.     //获取最终滑动距离
  9.     mFlingDuration = Math.max(
  10.             MAXIMUM_FLING_DURATION,
  11.             getSplineFlingDuration(xVelocity)
  12.     );
  13.     //使用 OverScroll 的fling方法进行手指抬起后的滑动处理
  14.     mScroller.fling(
  15.             0,
  16.             0,
  17.             xVelocity,
  18.             0,
  19.             Integer.MIN_VALUE,
  20.             Integer.MAX_VALUE,
  21.             0,
  22.             0
  23.     );
  24.     //OverScroll 使用fling方法后滑动的距离
  25.     mFlingX = mScroller.getStartX();
  26.     // 进行滑动距离的规范
  27.     if (Math.abs(mMaximumDistanceX - mDistanceX) < getWidth()) {
  28.         mFlingDuration = mFlingDuration / 3;
  29.     }
  30.     mIsBeingFling = true;//处于fling状态
  31.     mStartFlingTime = SystemClock.elapsedRealtime();
  32.     postInvalidateOnAnimation();//更新fling状态
  33. }
  34. mActivePointerId = INVALID_POINTER;
  35. mIsBeingDragged = false;
  36. resetVelocityTracker();
  37. PointF tup = new PointF(event.getX(), event.getY());
  38. clickWhere(tup);//判断是否点击到条状数据
  39. invalidate();//更新
  40. 复制代码

ACTION_CANCEL：

  1. mIsBeingFling = false;
  2. mActivePointerId = INVALID_POINTER;
  3. mIsBeingDragged = false;
  4. resetVelocityTracker();
  5. 复制代码

onTouchEvent 方法的前置和后处理：

  1. @Override
  2. public boolean onTouchEvent(MotionEvent event) {
  3.     if (!hasDataSource()) {
  4.         return super.onTouchEvent(event);
  5.     }
  6.     ...//手势处理
  7.     if (mVelocityTracker != null) {
  8.         mVelocityTracker.addMovement(event);
  9.     }
  10.     return true;//返回 true 代表消费了事件
  11. }
  12. 复制代码

根据点击的横纵坐标是否处于数据柱子的范围内，判断是否点击到条状数据，并记录下标：

  1. private void clickWhere(PointF tup) {
  2.     for (int i = 0; i < mHealthDatas.size(); i++) {
  3.         HealthData healthData = mHealthDatas.get(i);
  4.         RectF rect = healthData.getRect();
  5.         if (tup.x > rect.left && tup.x < rect.right && tup.y > rect.top && tup.y < rect.bottom) {
  6.             mSelected = i;
  7.             break;
  8.         }
  9.         mSelected = -1;
  10.     }
  11. }
  12. 复制代码

处理fling方法的计算过程：

  1. @Override
  2. public void computeScroll() {
  3.     super.computeScroll();
  4.     if (mScroller.computeScrollOffset()) {
  5.         final int currX = mScroller.getCurrX();
  6.         mDistanceX += mFlingX - currX;
  7.         if (mDistanceX > mMaximumDistanceX) {
  8.             mDistanceX = mMaximumDistanceX;
  9.         }
  10.         if (mDistanceX < mMinimumDistanceX) {
  11.             mDistanceX = mMinimumDistanceX;
  12.         }
  13.         mFlingX = currX;
  14.         if ((SystemClock.elapsedRealtime() - mStartFlingTime) >= mFlingDuration || currX == mScroller.getFinalX()) {
  15.             mScroller.abortAnimation();
  16.         }
  17.         postInvalidateOnAnimation();
  18.     } else if (mIsBeingFling) {
  19.         mIsBeingFling = false;
  20.     }
  21. }
  22. 复制代码

到此即完成所有东西的绘制。 代码上传至：https://github.com/jackzhengpinwen/kiwiViews/blob/master/app/src/main/java/com/zpw/views/exercise10/ChartView.java

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/254804
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号