flyme5.0增加了很多優(yōu)美的動(dòng)畫和交互,界面也變得相當(dāng)精致。我手頭現(xiàn)在就用著魅族MX5,感覺還不錯(cuò)哇!經(jīng)常會(huì)打開它的日歷看計(jì)劃等,感覺它首頁的滑動(dòng)效果還不錯(cuò),就試著實(shí)現(xiàn)一把。

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