MPAndroidChart实现K线面板（二）

上个章节我们使用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：

最后，在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线面板（三）