快捷導(dǎo)航

Android實(shí)現(xiàn)仿魅族日歷首頁功能

更新時(shí)間：2018年02月07日 15:18:52 投稿：laozhang

這篇文章主要介紹了Android實(shí)現(xiàn)仿魅族日歷首頁功能的實(shí)現(xiàn)過程以及相關(guān)代碼講解分享，對(duì)此有興趣的朋友參考下。

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的高度減去其一行的高度
@Override
protected 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ì)腳本之家的支持。