自定義 Behavior，實現嵌套滑動、平滑切換周月視圖的日曆

時間  2019-11-17
標籤 自定義 behavior 實現 嵌套 滑動 平滑 切換 視圖 日曆 简体版
原文   原文鏈接

使用 CoordinateLayout 能夠協調它的子佈局，實現滑動效果的聯動，它的滑動效果由 Behavior 實現。之前用太小米日曆，對它滑動平滑切換日月視圖的效果印象深入。本文嘗試用自定義 Behavior 實現一個帶有這種效果的日曆。php

簡介

先上個小米日曆的圖，讓你們知道要作一個什麼效果：java

這是小米日曆的效果，在用戶操做列表的時候，將日曆摺疊成周視圖，擴大列表的顯示區域，同時也不影響日曆部分的功能使用，有趣且實用。android

下面利用 CoordinateLayout.Behavior，簡單實現一個相似的效果。git

日曆控件

我並不打算本身再寫一個日曆控件。本來想用原生的 CalendarView，可是 CalendarView 不支持周視圖，可自定義程度也不高。github

在 GitHub 搜了一下，決定使用 MaterialCalendarView。這個庫比較流行，它支持周月視圖的切換，符合 Material Design，也能夠自定義顯示效果。數組

引入該庫，在佈局文件中使用：app

<com.prolificinteractive.materialcalendarview.MaterialCalendarView android:id="@+id/calendar" android:layout_width="match_parent" android:layout_height="wrap_content" app:mcv_showOtherDates="all" />
複製代碼

切換視圖代碼以下：ide

calendarView.state().edit()
    .setCalendarDisplayMode(CalendarMode.WEEKS)
    .commit();
複製代碼

Behavior

寫代碼以前，還有些東西須要先了解一下。佈局

用 CoordinatorLayout 做爲根佈局，就能夠協調它子控件之間的聯動效果，至於如何聯動，是由它的內部類 Behavior 實現的。在佈局中，對子控件配置 app:layout_behavior 屬性，實現對應的聯動效果。因此這裏咱們須要自定義日曆和列表的兩個 Behavior。post

Behavior 有兩種實現聯動的方式。一種是經過創建依賴關係，一種是經過 RecyclerView 或 NextedScrollView 的嵌套滑動機制，後面都會講到。咱們要先分析想要實現的效果，肯定各個子控件之間的依賴關係，避免循環依賴等錯誤。

另外，因爲 CoordinatorLayout 的佈局相似於 FrameLayout，因此還須要考慮擺放控件位置的問題。

摺疊效果

你們可能有看過 RecyclerView 和 AppBarLayout 聯動的效果，這種效果須要給 RecyclerView 配置 Behavior：

app:layout_behavior="@string/appbar_scrolling_view_behavior"
複製代碼

但爲何只要給 RecyclerView 配不用給 AppBarLayout 配？看一下 AppBarLayout 的源碼就知道了，它默認已經給本身配了：

@CoordinatorLayout.DefaultBehavior(AppBarLayout.Behavior.class)
public class AppBarLayout extends LinearLayout {
    // ...
}
複製代碼

看它 Behavior 源碼發現，它繼承了 ViewOffsetBehavior。ViewOffsetBehavior 的做用是方便改變控件的位置和獲取偏移量。因此這裏我再偷個懶，把源碼裏的 ViewOffsetBehavior 直接拷出來用了。

咱們自定義兩個 Behavior，列表控件的 CalendarScrollBehavior 和日曆控件的 CalendarBehavior，都繼承 ViewOffsetBehavior。

CalendarScrollBehavior

在 Behavior 中，經過 layoutDependsOn 方法來創建依賴關係，一個控件能夠依賴多個其餘控件，但不可循環依賴。當被依賴的控件屬性發生變化時，會調用 onDependentViewChanged 方法。

爲了下降複雜程度，我將全部摺疊操做都放到 CalendarBehavior 裏作，而 CalendarScrollBehavior 裏面作一件事，就是把列表置於日曆之下。參考了源碼 ScrollingViewBehavior，CalendarScrollBehavior 代碼以下：

public class CalendarScrollBehavior extends ViewOffsetBehavior<RecyclerView> {

    private int calendarHeight;

    public CalendarScrollBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, RecyclerView child, View dependency) {
        return dependency instanceof MaterialCalendarView;
    }

    @Override
    protected void layoutChild(CoordinatorLayout parent, RecyclerView child, int layoutDirection) {
        super.layoutChild(parent, child, layoutDirection);
        if (calendarHeight == 0) {
            final List<View> dependencies = parent.getDependencies(child);
            for (int i = 0, z = dependencies.size(); i < z; i++) {
                View view = dependencies.get(i);
                if (view instanceof MaterialCalendarView) {
                    calendarHeight = view.getMeasuredHeight();
                }
            }
        }
        child.setTop(calendarHeight);
        child.setBottom(child.getBottom() + calendarHeight);
    }
}
複製代碼

這裏沒有用到 onDependentViewChanged 方法，全部聯動操做都將經過嵌套滑動機制實現。

CalendarBehavior

接下來是本文的重點，咱們使用的嵌套滑動機制，主要涉及到如下幾個方法：

  • onStartNestedScroll
  • onNestedPreScroll
  • onStopNestedScroll
  • onNestedPreFling

當 RecyclerView 或 NestedScrollView 滑動時，CoordinatorLayout 的子控件 Behavior 能夠接收到對應的回調。看方法名應該大概知道它的用途了，下面都會提到。

onStartNestedScroll 的返回值決定是否接收嵌套滑動事件。咱們判斷，只要是上下滑動，就接收：

@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, MaterialCalendarView child, View directTargetChild, View target, int axes, int type) {
    return (axes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;
}
複製代碼

onNestedPreScroll 這個方法是在準備滾動以前調用的，它帶有滾動偏移量 dy。

@Override
public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, final MaterialCalendarView child, View target, int dx, int dy, int[] consumed, int type) 複製代碼

咱們要作的，就是在恰當的時候，消費掉這個偏移量，轉化成摺疊的效果。

分析一下這個摺疊效果。滾動時，日曆也向上滾動，最多到當前選中日期那一行，滾動範圍和當前選中日期有關。向上移動是負值，因此日曆的滾動範圍是從 0 到 -calendarLineHeight * (weekOfMonth - 1)，減 1 是由於要多留一行顯示星期的標題。列表的滾動範圍則是固定的，最多向上移動 5 倍的日曆行高，也就是從 0 到 -calendarLineHeight * 5。

判斷偏移量是否在這個範圍內，用 ViewOffsetBehavior 的 setTopAndBottomOffset 方法來改變控件位置。因此還要拿到 CalendarScrollBehavior 進行操做。參數 target 是觸發嵌套滑動的控件，在這裏就是 RecyclerView，經過 target.getLayoutParams()).getBehavior() 就能夠拿到 CalendarScrollBehavior 了。

摺疊過程當中，要將偏移量消費掉，這就用到了 consumed 這個參數，它是一個長度爲 2 的數組，存放的是要消費掉的 x 和 y 軸偏移量。

最終代碼以下：

@Override
public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, final MaterialCalendarView child, View target, int dx, int dy, int[] consumed, int type) {
    // 列表未滑動到頂部時，不處理
    if (target.canScrollVertically(-1)) {
        return;
    }
    // 切換月視圖
    setMonthMode(child);
    if (calendarMode == CalendarMode.MONTHS) {
        if (calendarLineHeight == 0) {
            calendarLineHeight = child.getMeasuredHeight() / 7;
            weekCalendarHeight = calendarLineHeight * 2;
            monthCalendarHeight = calendarLineHeight * 7;
            listMaxOffset = calendarLineHeight * 5;
        }
        // 移動日曆
        int calendarMinOffset = -calendarLineHeight * (weekOfMonth - 1);
        int calendarOffset = MathUtils.clamp(
            getTopAndBottomOffset() - dy, calendarMinOffset, 0);
        setTopAndBottomOffset(calendarOffset);
        // 移動列表
        final CoordinatorLayout.Behavior behavior =
                ((CoordinatorLayout.LayoutParams) target.getLayoutParams()).getBehavior();
        if (behavior instanceof CalendarScrollBehavior) {
            final CalendarScrollBehavior listBehavior = (CalendarScrollBehavior) behavior;
            int listMinOffset = -listMaxOffset;
            int listOffset = MathUtils.clamp(
                listBehavior.getTopAndBottomOffset() - dy, -listMaxOffset, 0);
            listBehavior.setTopAndBottomOffset(listOffset);
            if (listOffset > -listMaxOffset && listOffset < 0) {
                consumed[1] = dy;
            }
        }
    }
}
複製代碼

如今咱們能夠把佈局參數配一下，看一下效果了，佈局以下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent">

    <com.prolificinteractive.materialcalendarview.MaterialCalendarView android:id="@+id/calendar" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_behavior="@string/calendar_behavior" app:mcv_showOtherDates="all" />

    <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="110dp" android:background="@color/color_ee" app:layout_behavior="@string/calendar_scrolling_behavior" />

</android.support.design.widget.CoordinatorLayout>
複製代碼

在選中其餘日期的時候，記得通知 Behvior 選中的是該月的第幾個星期：

calendarView.setOnDateChangedListener(new OnDateSelectedListener() {
    @Override
    public void onDateSelected(MaterialCalendarView widget, CalendarDay date, boolean selected) {
        Calendar calendar = date.getCalendar();
        calendarBehavior.setWeekOfMonth(calendar.get(Calendar.WEEK_OF_MONTH));
    }
});
複製代碼

效果以下：

星期標題

上面效果能夠看到，顯示星期的標題也一塊兒向上移動了，並且 MaterialCalendarView 是沒辦法隱藏這個標題的。

沒辦法，只好本身寫一個星期標題的控件蓋在上面，簡單寫了一個 WeekTitleView，代碼就不貼了，在佈局里加上：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent">

    <com.prolificinteractive.materialcalendarview.MaterialCalendarView android:id="@+id/calendar" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_behavior="@string/calendar_behavior" app:mcv_showOtherDates="all" />

    <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="110dp" android:background="@color/color_ee" app:layout_behavior="@string/calendar_scrolling_behavior" tools:listitem="@layout/item_list" />

    <com.southernbox.nestedcalendar.view.WeekTitleView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#fafafa" />

</android.support.design.widget.CoordinatorLayout>
複製代碼

效果以下：

平滑切換視圖

接下來處理周月視圖切換的問題。

當嵌套滑動結束時會回調 onStopNestedScroll 方法，能夠在這裏根據當前控件的位置，判斷是否要切換視圖。當滑動到最上面的時候切換爲周視圖，其他的狀況都是月視圖：

@Override
public void onStopNestedScroll(final CoordinatorLayout coordinatorLayout, final MaterialCalendarView child, final View target, int type) {
    if (calendarLineHeight == 0) {
        return;
    }
    if (target.getTop() == weekCalendarHeight) {
        setWeekMode(child);
    } else {
        setMonthMode(child);
    }
}
複製代碼

效果以下：

MaterialCalendarView 的視圖切換會有一點點卡頓，但仍是能接受的。

慣性滑動

上面效果能夠看出一個問題，當滑動到一半的時候鬆手，應該要恢復到完整視圖的位置。這裏包含了，快速滑動後慣性滑動到指定位置的效果，和沒有快速滑動時，往就近的指定位置滑動這兩種效果。

咱們能夠從 onNestedPreFling 拿到滑動速度，方法的返回值決定了是否進行慣性嵌套滑動：

@Override
public boolean onNestedPreFling(CoordinatorLayout coordinatorLayout, MaterialCalendarView child, View target, float velocityX, float velocityY) {
    this.velocityY = velocityY;
    return !(target.getTop() == weekCalendarHeight ||
            target.getTop() == monthCalendarHeight);
}
複製代碼

在 onStopNestedScroll 裏判斷並執行滾動。因爲咱們的滾動摺疊效果是在 onNestedPreScroll 實現的，因此要想辦法觸發這個方法。經過源碼能夠知道，onNestedPreScroll 是在 dispatchNestedPreScroll 裏調用的，前提是 startNestedScroll 爲 true。因此能夠這樣觸發：

recyclerView.startNestedScroll(ViewCompat.SCROLL_AXIS_VERTICAL, TYPE_TOUCH);
recyclerView.dispatchNestedPreScroll(0, dy, new int[2], new int[2], TYPE_TOUCH);
複製代碼

最終 onStopNestedScroll 的完整代碼以下：

@Override
public void onStopNestedScroll(final CoordinatorLayout coordinatorLayout, final MaterialCalendarView child, final View target, int type) {
    if (calendarLineHeight == 0) {
        return;
    }
    if (target.getTop() == weekCalendarHeight) {
        setWeekMode(child);
        return;
    } else if (target.getTop() == monthCalendarHeight) {
        setMonthMode(child);
        return;
    }
    if (!canAutoScroll) {
        return;
    }
    if (calendarMode == CalendarMode.MONTHS) {
        final Scroller scroller = new Scroller(coordinatorLayout.getContext());
        int offset;
        int duration = 800;
        if (Math.abs(velocityY) < 1000) {
            if (target.getTop() > calendarLineHeight * 4) {
                offset = monthCalendarHeight - target.getTop();
            } else {
                offset = weekCalendarHeight - target.getTop();
            }
        } else {
            if (velocityY > 0) {
                offset = weekCalendarHeight - target.getTop();
            } else {
                offset = monthCalendarHeight - target.getTop();
            }
        }
        velocityY = 0;
        duration = duration * Math.abs(offset) / (listMaxOffset);
        scroller.startScroll(
                0, target.getTop(),
                0, offset,
                duration);
        ViewCompat.postOnAnimation(child, new Runnable() {
            @Override
            public void run() {
                if (scroller.computeScrollOffset() &&
                        target instanceof RecyclerView) {
                    canAutoScroll = false;
                    RecyclerView recyclerView = (RecyclerView) target;
                    int delta = target.getTop() - scroller.getCurrY();
                    recyclerView.startNestedScroll(ViewCompat.SCROLL_AXIS_VERTICAL, TYPE_TOUCH);
                    recyclerView.dispatchNestedPreScroll(
                            0, delta, new int[2], new int[2], TYPE_TOUCH);
                    ViewCompat.postOnAnimation(child, this);
                } else {
                    canAutoScroll = true;
                    if (target.getTop() == weekCalendarHeight) {
                        setWeekMode(child);
                    } else if (target.getTop() == monthCalendarHeight) {
                        setMonthMode(child);
                    }
                }
            }
        });
    }
}
複製代碼

到這裏，自定義 Behavior 就算完成了。

效果

看一下最終的效果：

這種實現方式的優勢是代碼量少，用起來方便。使用了 MaterialCalendarView 而且沒有修改它的源碼，意味着支持它的全部功能。

但願經過本文，你們對 Behavior 有一個大概的瞭解。

項目地址

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程