縱享絲滑滑動切換的周月日曆，水滴效果，豐富自定義日曆樣式，仿小米日曆（ViewDragHelper實現）

艾米1發表於2019-03-04
View

本文已授權微信公眾號：鴻洋（hongyangAndroid）在微信公眾號平臺原創首發

老規矩先貼效果圖

樣式.gif
水滴效果.gif
p1.jpg
p2.jpg

github地址，覺得有幫助的可以給個 star 唄

github.com/idic779/mon…

新增依賴

compile `com.github.idic779:monthweekmaterialcalendarview:1.7`

具體如何使用看這裡

這個庫可以做什麼？

  • 可以控制是否允許左右滑動，上下滑動，切換年月

  • 流暢的上下週月模式切換

  • 自定義日曆樣式

  • 基於material-calendarview 這個庫實現，可以根據需求定製效果

    之前開發任務中有涉及到年月日日曆的切換效果，由於是需要聯動，想到的方向大概有3種，要麼通過處理view的touch事件，要麼是通過自定義behavior去實現，要麼是通過ViewDragHelper這個神器去實現，網上比較多的是通過自定義behavior去實現，本文使用的是第三種方法，實現的是一個可高度定製自由切換的周月日曆檢視,提供一種思路去實現頁面聯動效果。
    ##準備
    由於重點實現的是年月切換的效果，本來想著說可以自己寫一個日曆元件然後再加上ViewDragHelper,應該可以實現周月聯動的效果吧？後面想了想，重點在切換那就乾脆直接找個開源庫穩定性好點的日曆元件，所以用github.com/prolificint…快4000start的庫吧，
    ViewDragHelper，作為一個神器可以做很多的事情，官方的DrawerLayout ，BottomSheetBehavior用他來實現，為什麼用它？對於拖動某個View,如果是自己去重寫touch事件的，計算滑動距離再去移動View會需要處理比較多繁瑣的程式碼去實現。如果我們用ViewDragHelper的話能很輕易的實現這樣的效果。
    簡單的介紹下ViewDragHelper

   ViewDragHelper helper= ViewDragHelper.create(this, 1.0f, new ViewDragHelper.Callback() {
        @Override
        public boolean tryCaptureView(View child, int pointerId) {
            return true;
        }
        @Override
        public int clampViewPositionHorizontal(View child, int left, int dx)
        {
            return left;
        }

        @Override
        public int clampViewPositionVertical(View child, int top, int dy)
        {
            return top;
        }
        @Override
        public int getViewHorizontalDragRange(View child) {
            return super.getViewHorizontalDragRange(child);
        }

        @Override
        public int getViewVerticalDragRange(View child) {
            return super.getViewVerticalDragRange(child);
        }

        @Override
        public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
            super.onViewPositionChanged(changedView, left, top, dx, dy);
        }

        @Override
        public void onViewReleased(View releasedChild, float xvel, float yvel) {
            super.onViewReleased(releasedChild, xvel, yvel);
        }
    });
複製程式碼
  • tryCaptureView()：如果返回true，則說明可以捕獲該view，我們可以在這裡設定捕獲的條件
  • clampViewPositionHorizontal ()``clampViewPositionVertical()：
    分別對child水平和豎直方向移動的邊界進行控制，例如限制周月移動的距離可以在這裡做處理
  • onViewPositionChanged() ： 當child的位置發生移動時候會回撥這個方法
  • onViewReleased()：手指釋放時候的回撥
  • getViewHorizontalDragRange()``getViewVerticalDragRange()：返回child橫向或者縱向移動的範圍，大於0才能捕獲。

更多的可以參考鴻洋的Android ViewDragHelper完全解析 自定義ViewGroup神器

如何實現

既然選擇ViewDragHelper要實現周月聯動呢，我們來理一理要實現的效果，在月檢視的時候，能夠把下面的recyclerView上移拖到到周檢視的高度，上移過程如果超過一定距離就預設滾動到周檢視。
在周檢視的的時候又能把recyclerView下移拖動到月檢視的高度位置，下移過程如果超過一定距離就預設滾動到月檢視。

整體分析

整個頁面是由頂部的周名字的View、周模式的MaterialCalendarView、月模式的MaterialCalendarView和最下面的recyclerView組成
需要注意的是MaterialCalendarView 這個庫原來是有周名字還有頂部顯示日期的，
需要注意的是這裡稍微做了下修改把這些給隱藏掉了，具體可以看MaterialCalendarView.setTopbarVisible（）。並且做了下修改增加了獲得單行的高度方法MaterialCalendarView.getItemHeight() ，即為周模式時顯示的高度。

具體實現

  • 拖動前處理
    整個頁面只有recyclerView ，月模式下如果向上拖動時候如果recyclerView不是滾動到了頂部的話那麼就不允許拖動,相關程式碼
        @Override
        public boolean tryCaptureView(View child, int pointerId) {
            return !mDragHelper.continueSettling(true)
                    &&child == mRecyclerView && !animatStart
                    && isAtTop(mRecyclerView) &&                              
                          !ViewCompat.canScrollVertically(mRecyclerView, -1);
        }

複製程式碼
  • 限制recyclerView移動的高度在周模式和月模式之間
       @Override
       public int clampViewPositionVertical(View child, int top, int dy) {
           //決定豎直方向上能移動的距離為 finalWeekModeHeight到finalMonthModeHeight
           int topBound = finalWeekModeHeight;
           int bottomBound = finalMonthModeHeight;
           int newTop = Math.min(Math.max(top, topBound), bottomBound);
           return newTop;
       }
複製程式碼
  • 在onMeasure獲得初始的一些資料值，包括周模式的高度,月模式的高度，最大移動的距離，單行的高度
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
     super.onMeasure(widthMeasureSpec, heightMeasureSpec);
     calendarItemHight = mCalendarViewMonth.getItemHeight();
     calendarWeekHight = calendarItemHight;
     if (defaultStopHeight == 0) {
         defaultStopHeight = getCurrentItemPosition(CalendarDay.today()) * calendarItemHight;
     }
     calendarMonthHight = mCalendarViewMonth.getMeasuredHeight();
     weekViewHight = mTopWeekView.getMeasuredHeight();
     finalMonthModeHeight = weekViewHight + calendarMonthHight;
     finalWeekModeHeight = calendarItemHight + weekViewHight;
     maxOffset = calendarMonthHight - calendarItemHight;
 }
複製程式碼

  • 然後在onlayout()把佈局裡的View繪製到對應的位置上面

  • 最大移動的距離defaultStopHeight在選中日期時候就會通過 getCurrentItemPosition()計算出它點選所在的行數再呼叫setStopItemPosition()就可以得到要停止下來的高度，

  • 接下來說下最關鍵的地方
    既然是周月聯動我們發現在拖動recyclerView檢視的時候我們會不停回撥onViewPositionChanged()這個方法，我們在這個方法裡面就可以根據recyclerView移動的距離來移動對應的月檢視，

//滑動處理
       private void HandlerOffset(View changedView, int left, int top, int dx, int dy) {
           //獲取日曆相對手指移動的相對距離 dy向上移動小於0
           transY = transY + dy;
           if (transY > 0) {
               transY = 0;
           }
           if (transY < -calendarMonthHight - calendarItemHight) {
               transY = -calendarMonthHight - calendarItemHight;
           }

           float abstransY = Math.abs(transY);
           if (dy < 0) {
               //如果上滑動，並且滑向動的絕對值距離在超過calendarHight-defaultStopHeight
               // 並且小於可以滑動的距離calendarHight-calendarItemHight之間的話
               if (abstransY >= (calendarMonthHight - defaultStopHeight) && abstransY < calendarMonthHight - calendarItemHight) {
                   if (!animatStart) {
                       mCalendarViewMonth.setTranslationY(getOffset((int) mCalendarViewMonth.getTranslationY() + dy, calendarItemHight - defaultStopHeight));
                   }
               }
           }
           if (dy > 0) {
               if (abstransY < maxOffset
                       && currentMode.equals(Mode.WEEK)) {
                   mCalendarViewWeek.setVisibility(INVISIBLE);
               }
               if (abstransY < maxOffset) {
                   mCalendarViewMonth.setTranslationY(getOffset((int) mCalendarViewMonth.getTranslationY() + dy, 0));
               }

           }

       }
複製程式碼

月檢視的移動我們是通過setTranslationY來移動的，為了防止滑動時候過快通過getOffset()限制一下它滑動的最大距離。

  • 在鬆開手指的時候我們在onViewReleased()做相關狀態的改變，如果滑動的距離超過一定的值就把當前檢視置為月模式還是周模式 
       @Override
      public void onViewReleased(View releasedChild, float xvel, float yvel) {
          int moveY = finalMonthModeHeight - mRecyclerView.getTop();
          //周模式距離滑動為一行的高度，超過就滑動到周位置
          int weekdistance = calendarItemHight;
          //最大滑動距離
          int maxDistance = calendarMonthHight;
          if (currentMode == Mode.MONTH) {
              //如果滑動距離超過當前選中項和最大滑動距離之間的距離
              if (moveY > weekdistance && moveY < maxDistance) {
                  //變為周模式
                  setMode(Mode.WEEK);
              } else if (moveY <= weekdistance) {
                  //變為月模式
                  setMode(Mode.MONTH);
              }
          } else {
              //周模式下距離頂部選中日期的距離小於最大滑動距離-10的話就讓它變為月模式
              if (moveY > maxOffset - 10) {
                  //變為周模式
                  setMode(Mode.WEEK);
              } else if (moveY <= maxOffset - 10) {
                  //變為月模式
                  setMode(Mode.MONTH);
              }
          }
      }
複製程式碼

需要注意的是在onInterceptTouchEvent()如果是月模式並且可以拖動的時候，
底部的recyclerView是不允許滑動的

if (currentMode == Mode.MONTH&& canDrag) {
               setRecyclerViewCanScroll(false);
}
複製程式碼

還可以怎麼用

接下來說下你可以怎麼去定製？如果你想替換專案中的月和周檢視的話，不想用Material-calendarview ，很簡單，只需要你自己的周月檢視必須有一個方法獲得單行日曆的高度(例如我的庫中的MaterialCalendarView.getItemHeight() )，然後把這個月檢視和周檢視，分別在MonthWeekMaterialCalendarView裡面按照順序放到對應位置即可。然後再setListener()裡面設定相關的回撥處理，例如日期選中或者月份切換的回撥等。

好的大工告成。

相關文章