上个章节我们使用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线面板(三)
网友评论