從 Android 5.0 Lollipop 開始提供一套 API 來支援嵌入的滑動效果。同樣在最新的 Support V4 包中也提供了前向的相容。有了嵌入滑動機制,就能實現很多很複雜的滑動效果。在 Android Design Support 庫中非常重要的 CoordinatorLayout
元件就是使用了這套機制,實現了 Toolbar 的收起和展開功能,如下圖所示:
NestedScrolling 提供了一套父 View 和子 View 滑動互動機制。要完成這樣的互動,父 View 需要實現 NestedScrollingParent
介面,而子 View 需要實現 NestedScrollingChild
介面。
實現 NestedScrollingChild
首先來說 NestedScrollingChild
。如果你有一個可以滑動的 View,需要被用來作為嵌入滑動的子 View,就必須實現本介面。在此 View 中,包含一個 NestedScrollingChildHelper
輔助類。NestedScrollingChild
介面的實現,基本上就是呼叫本 Helper 類的對應的函式即可,因為 Helper 類中已經實現好了 Child 和 Parent 互動的邏輯。原來的 View 的處理 Touch 事件,並實現滑動的邏輯大體上不需要改變。
需要做的就是,如果要準備開始滑動了,需要告訴 Parent,你要準備進入滑動狀態了,呼叫 startNestedScroll()
。你在滑動之前,先問一下你的 Parent 是否需要滑動,也就是呼叫 dispatchNestedPreScroll()
。如果父類滑動了一定距離,你需要重新計算一下父類滑動後剩下給你的滑動距離餘量。然後,你自己進行餘下的滑動。最後,如果滑動距離還有剩餘,你就再問一下,Parent 是否需要在繼續滑動你剩下的距離,也就是呼叫 dispatchNestedScroll()
。
以上是一些基本原理,有了上面的基本思路,可以參考這篇文章,這裡面有原理的詳細解析。如果還是不清楚,這裡有對應的程式碼可以參考。
實現 NestedScrollingParent
作為一個可以嵌入 NestedScrollingChild 的父 View,需要實現 NestedScrollingParent
,這個介面方法和 NestedScrollingChild
大致有一一對應的關係。同樣,也有一個 NestedScrollingParentHelper
輔助類來默默的幫助你實現和 Child 互動的邏輯。滑動動作是 Child 主動發起,Parent 就收滑動回撥並作出響應。
從上面的 Child 分析可知,滑動開始的呼叫 startNestedScroll()
,Parent 收到 onStartNestedScroll()
回撥,決定是否需要配合 Child 一起進行處理滑動,如果需要配合,還會回撥 onNestedScrollAccepted()
。
每次滑動前,Child 先詢問 Parent 是否需要滑動,即 dispatchNestedPreScroll()
,這就回撥到 Parent 的 onNestedPreScroll()
,Parent 可以在這個回撥中“劫持”掉 Child 的滑動,也就是先於 Child 滑動。
Child 滑動以後,會呼叫 onNestedScroll()
,回撥到 Parent 的 onNestedScroll()
,這裡就是 Child 滑動後,剩下的給 Parent 處理,也就是 後於 Child 滑動。
最後,滑動結束,呼叫 onStopNestedScroll()
表示本次處理結束。
其實,除了上面的 Scroll 相關的呼叫和回撥,還有 Fling 相關的呼叫和回撥,處理邏輯基本一致。
實戰
有了這一套官方的巢狀滑動的解決方案,打算把我的 FlyRefresh 的滑動和下來部分用 NestedScrolling 來實現。我在這篇部落格中講了,之前是通過在 PullHeaderLayout
的 dispatchTouchEvent()
中小心處理 Touch 事件來實現的。現在回想起來,這種方法相對複雜,需要清楚知道 Parent 和 Child 的滑動狀態,這就導致了,只能支援有限的 Child 型別,例如當時只支援 ListView 和 RecyclerView,為了支援更多的型別,還定義了一個 IScrollHandler
介面來支援。
讓 FlyRefresh 實現 NestedScrollingParent
,就可以支援所有的 NestedScrollingChild
作為FlyRefreshLayout
的子 View。另外,因為 CoordinatorLayout
是如此的重要,大部分的 App 都需要使用它作為頂層的 Layout,為了讓 FlyRefreshLayout
能夠在 CoordinatorLayout 也能使用,所以我還打算同時實現 NestedScrollingChild
介面。關鍵實現程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 |
public class PullHeaderLayout extends ViewGroup implements NestedScrollingParent, NestedScrollingChild { private final int[] mScrollOffset = new int[2]; private final int[] mScrollConsumed = new int[2]; private final NestedScrollingParentHelper mParentHelper; private final NestedScrollingChildHelper mChildHelper; ... // NestedScrollingChild @Override public void setNestedScrollingEnabled(boolean enabled) { mChildHelper.setNestedScrollingEnabled(enabled); } @Override public boolean isNestedScrollingEnabled() { return mChildHelper.isNestedScrollingEnabled(); } @Override public boolean startNestedScroll(int axes) { return mChildHelper.startNestedScroll(axes); } @Override public void stopNestedScroll() { mChildHelper.stopNestedScroll(); } @Override public boolean hasNestedScrollingParent() { return mChildHelper.hasNestedScrollingParent(); } @Override public boolean dispatchNestedScroll(int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed, int[] offsetInWindow) { return mChildHelper.dispatchNestedScroll(dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, offsetInWindow); } @Override public boolean dispatchNestedPreScroll(int dx, int dy, int[] consumed, int[] offsetInWindow) { return mChildHelper.dispatchNestedPreScroll(dx, dy, consumed, offsetInWindow); } @Override public boolean dispatchNestedFling(float velocityX, float velocityY, boolean consumed) { return mChildHelper.dispatchNestedFling(velocityX, velocityY, consumed); } @Override public boolean dispatchNestedPreFling(float velocityX, float velocityY) { return mChildHelper.dispatchNestedPreFling(velocityX, velocityY); } // NestedScrollingParent @Override public boolean onStartNestedScroll(View child, View target, int nestedScrollAxes) { return (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0; } @Override public void onNestedScrollAccepted(View child, View target, int nestedScrollAxes) { mParentHelper.onNestedScrollAccepted(child, target, nestedScrollAxes); startNestedScroll(ViewCompat.SCROLL_AXIS_VERTICAL); } @Override public void onStopNestedScroll(View target) { stopNestedScroll(); } @Override public void onNestedScroll(View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) { final int myConsumed = moveBy(dyUnconsumed); final int myUnconsumed = dyUnconsumed - myConsumed; dispatchNestedScroll(0, myConsumed, 0, myUnconsumed, null); } @Override public void onNestedPreScroll(View target, int dx, int dy, int[] consumed) { if (dy > 0 && mHeaderController.canScrollUp()) { final int delta = moveBy(dy); consumed[0] = 0; consumed[1] = delta; //dispatchNestedScroll(0, myConsumed, 0, consumed[1], null); } } @Override public boolean onNestedFling(View target, float velocityX, float velocityY, boolean consumed) { if (!consumed) { flingWithNestedDispatch((int) velocityY); return true; } return false; } private boolean flingWithNestedDispatch(int velocityY) { final boolean canFling = (mHeaderController.canScrollUp() && velocityY > 0) || (mHeaderController.canScrollDown() && velocityY < 0); if (!dispatchNestedPreFling(0, velocityY)) { dispatchNestedFling(0, velocityY, canFling); if (canFling) { fling(velocityY); } } return canFling; } @Override public boolean onNestedPreFling(View target, float velocityX, float velocityY) { return flingWithNestedDispatch((int) velocityY); } @Override public int getNestedScrollAxes() { return mParentHelper.getNestedScrollAxes(); } // Touch event hanlder @Override public boolean onTouchEvent(MotionEvent ev) { MotionEvent vtev = MotionEvent.obtain(ev); final int actionMasked = MotionEventCompat.getActionMasked(ev); if (actionMasked == MotionEvent.ACTION_DOWN) { mNestedYOffset = 0; } vtev.offsetLocation(0, mNestedYOffset); switch (actionMasked) { ... case MotionEvent.ACTION_MOVE: ... final int y = (int) MotionEventCompat.getY(ev, activePointerIndex); int deltaY = mLastMotionY - y; if (dispatchNestedPreScroll(0, deltaY, mScrollConsumed, mScrollOffset)) { deltaY -= mScrollConsumed[1]; vtev.offsetLocation(0, mScrollOffset[1]); mNestedYOffset += mScrollOffset[1]; } if (!mIsBeingDragged && Math.abs(deltaY) > mTouchSlop) { final ViewParent parent = getParent(); if (parent != null) { parent.requestDisallowInterceptTouchEvent(true); } mIsBeingDragged = true; if (deltaY > 0) { deltaY -= mTouchSlop; } else { deltaY += mTouchSlop; } } if (mIsBeingDragged) { // Scroll to follow the motion event mLastMotionY = y - mScrollOffset[1]; final int scrolledDeltaY = moveBy(deltaY); final int unconsumedY = deltaY - scrolledDeltaY; if (dispatchNestedScroll(0, scrolledDeltaY, 0, unconsumedY, mScrollOffset)) { mLastMotionY -= mScrollOffset[1]; vtev.offsetLocation(0, mScrollOffset[1]); mNestedYOffset += mScrollOffset[1]; } } break; ... } ... return true; } ... } |
完整的修改,可以看這個 commit。整個修改下來,程式碼減少了不少,而且更加整潔了。
總結
總體來說,NestedScroll 初看起來有些讓人費解,但是真的理解以後,就發現這種設計的優秀之處。把滑動整體封裝起來,通過 Helper 來實現 Child 和 Parent 之間的連線和互動。通過介面來回撥,實現了 Child 和 Parent 的邏輯獨立。
Android 5.0的大部分可以滑動的控制元件都支援了 NestScrolling 介面,最新的 Support V4 中也一樣,相信以後越來越多的第三方庫都會支援,到時候各種控制元件的巢狀滑動就能無縫整合了。