上個章節(jié)我們使用MPAndroidChart完成了一個靜態(tài)的K線面板洽腺,這個章節(jié)我們將介紹如何在K線面板中處理用戶的手勢操作。
處理用戶的手勢操作
在K線面板中,需要處理的手勢操作主要包括:
1.單次點擊(加載失敗時重新加載)
2.勻速滑動(K線圖左右滾動)
3.快速滑動(前后切換股票)
4.長按后滑動(高亮顯示被選中的數(shù)據(jù))
如果你對上述手勢操作不是太了解,可以下載apk體驗一下 apk下載地址
1.設計思路
寫代碼之前我們首先來談一下設計思路,上述的手勢操作并不復雜拷况,但是結(jié)合到一起容易引起重疊,造成不好的用戶體驗掘殴。所以這次我們的設計思路是:
首先判斷長按事件赚瘦,在長按狀態(tài)下被選中數(shù)據(jù)高亮顯示;
在非長按狀態(tài)下杯巨,通過判斷滑動速率和滑動時間區(qū)分快速滑動和勻速滑動蚤告;
在勻速滑動狀態(tài)下,每滑動一個單位都重新獲取手指的位置服爷。
2.繼承CandleStickChart類
開始編寫代碼杜恰,我們首先繼承CandleStickChart類,CandleStickChart是MPAndroidChart提供的用于展示K線圖的控件仍源,在上個章節(jié)實現(xiàn)靜態(tài)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);
}
}
創(chuàng)建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.長按后滑動
按照最初的構思心褐,我們先區(qū)分將長按事件跟非長按事件,這里我們復寫setOnChartGestureListener笼踩,在onChartLongPressed中處理長按事件逗爹,其中變量isLongPressed用來記錄當前是否處于長按狀態(tài):
@Override
public void onChartLongPressed(MotionEvent me) {
//為了避免滑動事件與高亮時間沖突,高亮事件只在長按后顯示嚎于,優(yōu)先消費滑動事件
if (me.getFlags() == 0) {
isLongPressed = true;
setHighlightPerDragEnabled(true);
highlightValue(getHighlightByTouchPoint(me.getX(), me.getY()).getXIndex(),0);
}
}
接著我們復寫setOnChartValueSelectedListener來獲取當前被選中的數(shù)據(jù)掘而,當前處于長按狀態(tài)時,將被選中的數(shù)據(jù)高亮顯示:
setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
@Override
public void onValueSelected(Entry e, int dataSetIndex, Highlight h) {
if (isLongPressed && onTsGestureListener != null) {
onTsGestureListener.onChartSlideLongClick(e.getXIndex());
}
}
});
4.快速滑動
在非長按狀態(tài)下于购,我們用滑動時間和滑動速率來區(qū)分快速滑動和勻速滑動:
@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實現(xiàn)勻速滑動袍睡,對于onTouchListener想必大家都比較熟悉,手指按下時記錄點擊的位置:
case MotionEvent.ACTION_DOWN:
currentDownindex = motionEvent.getRawX();
break;
每當用戶滑動的距離達到默認值時肋僧,我們會通知接口用戶滑動了一個單位斑胜。
實際操作中用戶滑動的距離可能會超過默認值控淡,超過的情況也統(tǒng)一按照滑動了一個單位進行處理,這樣可以使得滑動過程更加平順:
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中調(diào)用setOnTsGestureListener方法實現(xiàn)上述的手勢操作:
@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);
}
});
到此為止,我們已經(jīng)實現(xiàn)了K線面板中的各種手勢操作凭戴,下個章節(jié) MPAndroidChart實現(xiàn)K線面板(三)