美文网首页
MPAndroidChart实现K线面板(二)

MPAndroidChart实现K线面板(二)

作者: NJNJ | 来源:发表于2018-03-14 00:19 被阅读384次

    上个章节我们使用MPAndroidChart完成了一个静态的K线面板,这个章节我们将介绍如何在K线面板中处理用户的手势操作。

    处理用户的手势操作

    在K线面板中,需要处理的手势操作主要包括:
    1.单次点击(加载失败时重新加载)
    2.匀速滑动(K线图左右滚动)
    3.快速滑动(前后切换股票)
    4.长按后滑动(高亮显示被选中的数据)

    如果你对上述手势操作不是太了解,可以下载apk体验一下 apk下载地址

    1.设计思路

    写代码之前我们首先来谈一下设计思路,上述的手势操作并不复杂,但是结合到一起容易引起重叠,造成不好的用户体验。所以这次我们的设计思路是:

    首先判断长按事件,在长按状态下被选中数据高亮显示;
    在非长按状态下,通过判断滑动速率和滑动时间区分快速滑动和匀速滑动;
    在匀速滑动状态下,每滑动一个单位都重新获取手指的位置。

    2.继承CandleStickChart类

    开始编写代码,我们首先继承CandleStickChart类,CandleStickChart是MPAndroidChart提供的用于展示K线图的控件,在上个章节实现静态K线图的时候我们有用到:

    public class TsCandleStickChart extends CandleStickChart {
        public TsCandleStickChart(Context context) {
            super(context);
        }
    
        public TsCandleStickChart(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        public TsCandleStickChart(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
        }
    }
    

    创建OnTsGestureListener接口:

    public interface OnTsGestureListener {
        /**
         * 单次点击
         */
        void onChartSingleTapped();
        /**
         * 多次点击
         */
        void onChartDoubleTapped();
        /**
         * 快速滑动
         * @param direction 滑动方向
         */
        void onChartFastSlide(int direction);
        /**
         * 匀速滑动
         * @param direction 滑动方向
         */
        void onChartSlowSlide(int direction);
        /**
         * 长按后滑动
         * @param position 当前位置
         */
        void onChartSlideLongClick(int position);
    }
    

    3.长按后滑动

    按照最初的构思,我们先区分将长按事件跟非长按事件,这里我们复写setOnChartGestureListener,在onChartLongPressed中处理长按事件,其中变量isLongPressed用来记录当前是否处于长按状态:

    @Override
    public void onChartLongPressed(MotionEvent me) {
        //为了避免滑动事件与高亮时间冲突,高亮事件只在长按后显示,优先消费滑动事件
        if (me.getFlags() == 0) {
            isLongPressed = true;
            setHighlightPerDragEnabled(true);
            highlightValue(getHighlightByTouchPoint(me.getX(), me.getY()).getXIndex(),0);
        }
    }
    

    接着我们复写setOnChartValueSelectedListener来获取当前被选中的数据,当前处于长按状态时,将被选中的数据高亮显示:

    setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
        @Override
        public void onValueSelected(Entry e, int dataSetIndex, Highlight h) {
            if (isLongPressed && onTsGestureListener != null) {
                onTsGestureListener.onChartSlideLongClick(e.getXIndex());
            }
        }
    });
    

    4.快速滑动

    在非长按状态下,我们用滑动时间和滑动速率来区分快速滑动和匀速滑动:

    @Override
    public void onChartFling(MotionEvent me1, MotionEvent me2, float velocityX, float velocityY) {
        if (!isLongPressed && onTsGestureListener != null) {
            if((me2.getEventTime() - me2.getDownTime()) < FLIP_PERIOD){
                if (velocityX > FLIP_DISTANCE) {
                    onTsGestureListener.onChartFastSlide(-1);
                } else if (velocityX < -FLIP_DISTANCE) {
                    onTsGestureListener.onChartFastSlide(1);
                }
            }
        }
    }
    

    5.匀速滑动

    这里使用setOnTouchListener实现匀速滑动,对于onTouchListener想必大家都比较熟悉,手指按下时记录点击的位置:

    case MotionEvent.ACTION_DOWN:
        currentDownindex = motionEvent.getRawX();
        break;
    

    每当用户滑动的距离达到默认值时,我们会通知接口用户滑动了一个单位。
    实际操作中用户滑动的距离可能会超过默认值,超过的情况也统一按照滑动了一个单位进行处理,这样可以使得滑动过程更加平顺:

    case MotionEvent.ACTION_MOVE:
        if(!isLongPressed && onTsGestureListener != null){
          if((motionEvent.getEventTime() - motionEvent.getDownTime()) > SLIDE_PERIOD){
          float rawX = motionEvent.getRawX();
          int distance = (int)(rawX - currentDownindex);
          if(Math.abs(distance) > INSERTDATAPIXELS){
              currentDownindex = rawX;
              int num = distance/INSERTDATAPIXELS;
              int change = num > 0?1:-1;
              onTsGestureListener.onChartSlowSlide(change);
          }
        }
    }
    break;
    

    编写完TsCandleStickChart类后,我们在布局中使用TsCandleStickChart代替之前的CandleStickChart:

    <com.system.ts.android.utils.view.TsCandleStickChart
        android:id="@+id/ts_candler_chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/top_line"
        android:layout_above="@+id/rl_bottom_view" />
    

    最后,在Activity中调用setOnTsGestureListener方法实现上述的手势操作:

    @Bind(R.id.ts_candler_chart)
    TsCandleStickChart mChart;
    
    mChart.setOnTsGestureListener(new OnTsGestureListener() {
        @Override
         public void onChartDoubleTapped() { //多次点击
             if (loadError) {
                 String tkCode = SharedPreferencesUtils.getCurrentTkCode();
                 loadStickData(tkCode, true);
             }
         }
    
         @Override
         public void onChartFastSlide(int direction) { //快速滑动
              String code = TkCodeUtils.getNextCode(SharedPreferencesUtils.getCurrentTkCode(), direction);
              if (!TextUtils.isEmpty(code)) {
                  loadStickData(code, true);
              }
          }
    
          @Override
          public void onChartSlowSlide(int direction) { //匀速滑动
              onTranslateUI(direction);
          }
    
          @Override
          public void onChartSlideLongClick(int position) { //长按后滑动
              updateTopView(position);
          }
      });
    

    到此为止,我们已经实现了K线面板中的各种手势操作,下个章节 MPAndroidChart实现K线面板(三)

    相关文章

      网友评论

          本文标题:MPAndroidChart实现K线面板(二)

          本文链接:https://www.haomeiwen.com/subject/ksrxqftx.html