上个章节我们使用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线面板（三）
