flyme5.0增加了很多優美的動畫和交互,界面也變得相當精致。我手頭現在就用著魅族MX5,感覺還不錯哇!經常會打開它的日歷看計劃等,感覺它首頁的滑動效果還不錯,就試著實現一把。

效果分析
1 該首頁由兩部分組成:GridView展示的日歷視圖,下方的內容視圖
2 當選中日歷的某一天后,向上滑動,內容視圖會不斷的向上移動,直到只含有選中日期的那一行顯示為止
3 伴隨著內容視圖向上移動,日歷視圖也會跟隨向上移動
4 還有一個效果該圖沒能體現:當為向上滑動,松手后,視圖會自動向上隱藏;當為向上滑動時,松手后,視圖會自動向下展開
實現邏輯
該view繼承LinearLayout,日歷視圖和內容視圖上下放置
1 寬高計算
// 內容視圖的實際高度為該控件高度減去gridview一行的高度// 這個不難得出結論,因為向上移動時,內容視圖可以移動直到只含有選中日期的那一行顯示為止int heightSpec = MeasureSpec.makeMeasureSpec( getMeasuredHeight() - Tool.dip2px(mContext, 60), MeasureSpec.EXACTLY);contentView.measure(widthMeasureSpec, heightSpec);
2 獲取可滑動的距離
// 當視圖大小發生變化時,會回調該方法,可在這個方法獲取GridView的高度// 而內容視圖可滑動的距離就是:GridView的高度減去其一行的高度@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); swipHeight = gridView.getMeasuredHeight() - Tool.dip2px(mContext, 60);}3 事件處理
3.1 事件攔截
// 有兩種情況需要攔截:1 向上滑動,并且contentView還沒達到最大的滑動距離時2 向下滑動,并且contentView還沒有滑動到到底時case MotionEvent.ACTION_MOVE: float dy = y - mLastY; if (Math.abs(dy) > mTouchSlop) { if ((dy > 0 && contentView.getTranslationY() <= 0) || (dy < 0 && contentView.getTranslationY() >= -swipHeight)) { mLastY = y; return true; } } break;3.2 onTouchEvent的處理
case MotionEvent.ACTION_MOVE: float dy = y - mLastY; // 邊界的判斷,保證下滑只能移動到原來的位置 if (dy > 0 && contentView.getTranslationY() + dy >= 0) { contentView.setTranslationY(0); translationSwipView(); return true; } // 邊界的判斷,保證移動的位置最大為可滑動距離 if (dy < 0 && contentView.getTranslationY() + dy <= -swipHeight) { contentView.setTranslationY(-swipHeight); translationSwipView(); return true; } // 根據滑動的距離,移動contentView contentView.setTranslationY(contentView.getTranslationY() + dy); // 主要是讓日歷視圖伴隨contentView的移動而發生偏移 translationSwipView(); mLastY = y; break;3.3 日歷視圖的偏移
// 通過內容視圖滑動的比例,計算出日歷視圖需要移動的距離,并進行移動(保證等比移動)private void translationSwipView() { float percent = contentView.getTranslationY() * 1.0f / swipHeight; gridView.setTranslationY(translatDirection * percent);}3.4 ACTION_UP事件處理
case MotionEvent.ACTION_UP: // 假如已經是隱藏狀態或者是顯示狀態,不用處理 if (contentView.getTranslationY() == 0 || contentView.getTranslationY() == swipHeight) { break; } // 假如松手的坐標比ACTION_DOWN的坐標要大,證明是向下滑動,通過動畫顯示日歷視圖 if (event.getY() - downY > 0) { animateShow(); } else { // 假如松手的坐標比ACTION_DOWN的坐標要小,證明是向上滑動,通過動畫隱藏日歷視圖 animateHide(); } break;}3.5 對外處理
// 通過該方法通知該view,日歷視圖選擇的item為哪個,通過這個設置計算出日歷視圖需要移動的距離public void setSelectPosition(int selectPosition) { int line = (selectPosition + 7) / 7; translatDirection = (line - 1) * Tool.dip2px(mContext, 60);}結語
哈哈,一個仿魅族日歷的視圖就這樣搞定啦。感謝大家對武林網的支持。
|
新聞熱點
疑難解答