Android進階寶典 -- NestedScroll巢狀滑動機制實現吸頂效果
在上一篇文章Android進階寶典 -- 事件衝突怎麼解決?先從Android事件分發機制開始說起中,我們詳細地介紹了Android事件分發機制,其實只要頁面結構複雜,聯動眾多就會產生事件衝突,處理不得當就是bug,e.g. 我畫了一張很醜的圖
其實這種互動形式在很多電商、支付平臺都非常常見,頁面整體是可滑動的(scrollable),當頁面整體往上滑時,是外部滑動元件,e.g. NestedScrollView,當TabBar滑動到頂部的時候吸頂,緊接著ListView自身特性繼續往上滑。
其實這種效果,系統已經幫我們實現好了,尤其是像NestScrollView;如果我們在自定義View的時候,沒有系統能力的加持,會有問題嗎?如果熟悉Android事件分發機制,因為整體上滑的時候,外部元件消費了DOWM事件和MOVE事件,等到Tabbar吸頂之後,再次滑動ListView的時候,因為事件都在外部攔截,此時 mFirstTouchTarget還是父容器,沒有機會讓父容器取消事件再轉換到ListView,導致ListView不可滑動。
那麼我們只有鬆開手,再次滑動ListView,讓DOWN事件傳遞到ListView當中,這樣列表會繼續滑動,顯得沒有那麼順滑,從使用者體驗上來說是不可接受的。
1 自定義滑動佈局,實現吸頂效果
首先我們如果想要實現這個效果,其實辦法有很多,CoordinateLayout就是其中之一,但是如果我們想要自定義一個可滑動的佈局,而且還需要實現Tabbar的吸頂效果,我們需要注意兩點:
(1)在頭部沒有被移出螢幕的時候,事件需要被外部攔截,只能滑動外部佈局,ListView不可滑動;
(2)當頭部被移出到螢幕之外時,事件需要被ListView消費(繼續上滑時),如果下滑時則是同樣會先把頭部拉出來然後才可以滑動ListView
1.1 滑動容器實現
因為我們知道,要控制view移動,可以呼叫scrollBy或者scrollTo兩個方法,其中兩個方法的區別在於,前者是滑動的相對上一次的距離,而後者是滑動到具體位置。
```kotlin class MyNestScrollView @JvmOverloads constructor( val mContext: Context, val attributeSet: AttributeSet? = null, val flag: Int = 0 ) : LinearLayout(mContext, attributeSet, flag) {
private var mTouchSlop = 0
private var startY = 0f
init {
mTouchSlop = ViewConfiguration.get(context).scaledPagingTouchSlop
}
override fun onInterceptTouchEvent(ev: MotionEvent?): Boolean {
/**什麼時候攔截事件呢,當頭部還沒有消失的時候*/
return super.onInterceptTouchEvent(ev)
}
override fun onTouchEvent(event: MotionEvent?): Boolean {
when (event?.action) {
MotionEvent.ACTION_DOWN -> {
Log.e("TAG", "MyNestScrollView ACTION_DOWN")
startY = event.y
}
MotionEvent.ACTION_MOVE -> {
Log.e("TAG", "MyNestScrollView ACTION_MOVE")
val endY = event.y
if (abs(endY - startY) > mTouchSlop) {
//滑動了
scrollBy(0, (startY - endY).toInt())
}
startY = endY
}
}
return super.onTouchEvent(event)
}
override fun scrollTo(x: Int, y: Int) {
var finalY = 0
if (y < 0) {
} else {
finalY = y
}
super.scrollTo(x, finalY)
}
}
所以在事件消費的時候,會呼叫scrollBy,來進行頁面的滑動,如果我們看scrollBy的原始碼,會明白最終呼叫就是通過scrollTo實現的,只不過是在上次pos的基礎上進行累計。
java
public void scrollBy(int x, int y) {
scrollTo(mScrollX + x, mScrollY + y);
}
```
所以這裡重寫了scrollTo方法,來判斷y(縱向)滑動的位置,因為當y小於0的時候,按照Android的座標系,我們知道如果一直往下滑,那麼△Y(豎直方向滑動距離) < 0,如果一直向下滑,最終totalY也會小於0,所以這裡也是做一次邊界的處理。
接下來我們需要處理下吸頂效果,所以我們需要知道,頂部View的高度,以便控制滑動的距離,也是一次邊界處理。 ```kotlin override fun scrollTo(x: Int, y: Int) {
var finalY = 0
if (y < 0) {
} else {
finalY = y
}
if (y > mTopViewHeight) {
finalY = mTopViewHeight
}
super.scrollTo(x, finalY)
}
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { super.onSizeChanged(w, h, oldw, oldh) //頂部view是第一個View mTopViewHeight = getChildAt(0).measuredHeight } ``` 所以這裡需要和我們寫的佈局相對應,頂部view是容器中第一個子View,通過在onSizeChanged或者onMeasure中獲取第一個子View的高度,在滑動時,如果滑動的距離超過 mTopViewHeight(頂部View的高度),那麼滑動時也就不會再繼續滑動了,這樣就實現了TabBar的吸頂效果。
基礎工作完成了,接下來我們完成需要注意的第一點,先看下面的圖:
當我們上滑的時候,頭部是準備逐漸隱藏的,所以這裡會有幾個條件,首先 mStartX - nowX > 0 而且 scrollY < mTopViewHeight,而且此時scrollY是大於0的
/**
* 頭部View逐漸消失
* @param dy 手指滑動的相對距離 dy >0 上滑 dy < 0 下滑
*/
private fun isViewHidden(dy: Int): Boolean {
return dy > 0 && scrollY < mTopViewHeight
}
當我們向下滑動的時候,此時 mStartX - nowX < 0,因為此時頭部隱藏了,所以ScrollY > 0,而且此時是能夠滑動的,如果到了下面這個邊界條件(不會有這種情況發生,因此在滑動時做了邊界處理),此時scrollY < 0
kotlin
private fun isViewShow(dy: Int):Boolean{
return dy < 0 && scrollY > 0 && !canScrollVertically(-1)
}
此時還有一個條件,就是canScrollVertically,這個相信夥伴們也很熟悉,意味著當前View是能夠往下滑動的,如果返回了false,那麼就是不能繼續往下滑動了。
```kotlin override fun onInterceptTouchEvent(ev: MotionEvent?): Boolean {
var intercepted = false
/**什麼時候攔截事件呢,當頭部還沒有消失的時候*/
when (ev?.action) {
MotionEvent.ACTION_DOWN -> {
startY = ev.rawY
}
MotionEvent.ACTION_MOVE -> {
val endY = ev.rawY
if (abs(startY - endY) > mTouchSlop) {
if (isViewHidden((startY - endY).toInt())
|| isViewShow((startY - endY).toInt())
) {
Log.e("TAG","此時就需要攔截,外部進行消費事件")
//此時就需要攔截,外部進行消費事件
intercepted = true
}
}
startY = endY
}
}
return intercepted
} ``` 所以在外部攔截的時候,通過判斷這兩種狀態,如果滿足其中一個條件就會攔截事件完全由外部容器處理,這樣就完成了吸頂效果的處理。
1.2 巢狀滑動機制完成互動優化
通過上面的gif,我們看效果貌似還可以,但是有一個問題就是,當完成吸頂之後,ListView並不能跟隨手指繼續向上滑動,而是需要鬆開手指之後,再次滑動即可,其實我們從Android事件分發機制中就能夠知道,此時mFirstTouchTarget == 父容器,此時再次上滑並沒有給父容器Cancel的機會,所以才導致事件沒有被ListView接收。
因為傳統的事件衝突解決方案,會導致滑動不流暢,此時就需要巢狀滑動機制解決這個問題。在前面我們提到過,NestedScrollView其實就是已經處理過巢狀滑動了,所以我們前面去看一下NestedScrollView到底幹了什麼事?
java
public class NestedScrollView extends FrameLayout implements NestedScrollingParent3,
NestedScrollingChild3, ScrollingView
我們看到,NestedScrollView是實現了NestedScrollingParent3、NestedScrollingChild3等介面,挺有意思的,這幾個介面貌似都是根據數字做了升級,既然有3,那麼必然有1和2,所以我們看下這幾個介面的作用。
1.2.1 NestedScrollingParent介面和NestedScrollingChild介面
對於NestedScrollingParent介面,如果可滑動的ViewGroup,e.g. 我們在1.1中定義的容器作為父View,那麼就需要實現這個介面;如果是作為可滑動的子View,那麼就需要實現NestedScrollingChild介面,因為我們在自定義控制元件的時候,它既可能作為子View也可能作為父View,因此這倆介面都需要實現。
```java public interface NestedScrollingChild { /* * Enable or disable nested scrolling for this view. * * 啟動或者禁用巢狀滑動,如果返回ture,那麼說明當前佈局存在巢狀滑動的場景,反之沒有 * 使用場景:NestedScrollingParent巢狀NestedScrollingChild * 在此介面中的方法,都是交給NestedScrollingChildHelper代理類實現 / void setNestedScrollingEnabled(boolean enabled);
/**
* Returns true if nested scrolling is enabled for this view.
* 其實就是返回setNestedScrollingEnabled中設定的值
*/
boolean isNestedScrollingEnabled();
/**
* Begin a nestable scroll operation along the given axes.
* 表示view開始滾動了,一般是在ACTION_DOWN中呼叫,如果返回true則表示父佈局支援巢狀滾動。
* 一般也是直接代理給NestedScrollingChildHelper的同名方法即可。這個時候正常情況會觸發Parent的onStartNestedScroll()方法
*/
boolean startNestedScroll(@ScrollAxis int axes);
/**
* Stop a nested scroll in progress.
* 停止巢狀滾動,一般在UP或者CANCEL事件中執行,告訴父容器已經停止了巢狀滑動
*/
void stopNestedScroll();
/**
* Returns true if this view has a nested scrolling parent.
* 判斷當前View是否存在巢狀滑動的Parent
*/
boolean hasNestedScrollingParent();
/**
* 當前View消費滑動事件之後,滾動一段距離之後,把剩餘的距離回撥給父容器,父容器知道當前剩餘距離
* dxConsumed:x軸滾動的距離
* dyConsumed:y軸滾動的距離
* dxUnconsumed:x軸未消費的距離
* dyUnconsumed:y軸未消費的距離
* 這個方法是巢狀滑動的時候呼叫才有用,返回值 true分發成功;false 分發失敗
*/
boolean dispatchNestedScroll(int dxConsumed, int dyConsumed,
int dxUnconsumed, int dyUnconsumed, @Nullable int[] offsetInWindow);
/**
* Dispatch one step of a nested scroll in progress before this view consumes any portion of it.
* 在子View消費滑動距離之前,將滑動距離傳遞給父容器,相當於把消費權交給parent
* dx:當前水平方向滑動的距離
* dy:當前垂直方向滑動的距離
* consumed:輸出引數,會將Parent消費掉的距離封裝進該引數consumed[0]代表水平方向,consumed[1]代表垂直方向
* @return true:代表Parent消費了滾動距離
*/
boolean dispatchNestedPreScroll(int dx, int dy, @Nullable int[] consumed,
@Nullable int[] offsetInWindow);
/**
* Dispatch one step of a nested scroll in progress.
* 處理慣性事件,與dispatchNestedScroll類似,也是在消費事件之後,將消費和未消費的距離都傳遞給父容器
*/
boolean dispatchNestedFling(float velocityX, float velocityY, boolean consumed);
/**
* Dispatch a fling to a nested scrolling parent before it is processed by this view.
* 與dispatchNestedPreScroll類似,在消費之前首先會傳遞給父容器,把優先處理權交給父容器
*/
boolean dispatchNestedPreFling(float velocityX, float velocityY);
} ```
```java public interface NestedScrollingParent { /** * React to a descendant view initiating a nestable scroll operation, claiming the * nested scroll operation if appropriate.
* 當子View呼叫startNestedScroll方法的時候,父容器會在這個方法中獲取回撥
*/
boolean onStartNestedScroll(@NonNull View child, @NonNull View target, @ScrollAxis int axes);
/**
* React to the successful claiming of a nested scroll operation.
* 在onStartNestedScroll呼叫之後,就緊接著呼叫這個方法
*/
void onNestedScrollAccepted(@NonNull View child, @NonNull View target, @ScrollAxis int axes);
/**
* React to a nested scroll operation ending.
* 當子View呼叫 stopNestedScroll方法的時候回撥
*/
void onStopNestedScroll(@NonNull View target);
/**
* React to a nested scroll in progress.
*
*/
void onNestedScroll(@NonNull View target, int dxConsumed, int dyConsumed,
int dxUnconsumed, int dyUnconsumed);
/**
* React to a nested scroll in progress before the target view consumes a portion of the scroll.
* 在子View呼叫dispatchNestedPreScroll之後,這個方法拿到了回撥
*
*/
void onNestedPreScroll(@NonNull View target, int dx, int dy, @NonNull int[] consumed);
/**
* Request a fling from a nested scroll.
*
*/
boolean onNestedFling(@NonNull View target, float velocityX, float velocityY, boolean consumed);
/**
* React to a nested fling before the target view consumes it.
*
*/
boolean onNestedPreFling(@NonNull View target, float velocityX, float velocityY);
/**
* Return the current axes of nested scrolling for this NestedScrollingParent.
* 返回當前滑動的方向
*/
@ScrollAxis
int getNestedScrollAxes();
} ```
通過這兩個介面,我們大概就能夠明白,其實巢狀滑動機制完全是子View在做主導,通過子View能夠決定Parent是否能夠優先消費事件(dispatchNestedPreScroll),所以我們先從子View開始,開啟巢狀滑動之旅。
1.2.2 預滾動階段實現
在這個示例中,需要與parent巢狀滑動的就是RecyclerView,所以RecyclerView就需要實現child介面。前面我們看到child介面好多方法,該怎麼呼叫呢?其實這個介面中大部分的方法都可以交給一個helper代理類實現,e.g. NestedScrollingChildHelper.
因為所有的巢狀滑動都是由子View主導,所以我們先看子View消費事件,也就是onTouchEvent中,如果當手指按下的時候,首先獲取滑動的是x軸還是y軸,這裡我們就認為是豎向滑動,然後呼叫NestedScrollingChild的startNestedScroll方法,這個方法就代表開始滑動了。
``` override fun onTouchEvent(e: MotionEvent?): Boolean {
when(e?.action){
MotionEvent.ACTION_DOWN->{
mStartX = e.y.toInt()
//子View開始巢狀滑動
var axis = ViewCompat.SCROLL_AXIS_NONE
axis = axis or ViewCompat.SCROLL_AXIS_VERTICAL
nestedScrollingChildHelper.startNestedScroll(axis)
}
MotionEvent.ACTION_MOVE->{
}
}
return super.onTouchEvent(e)
} ```
我們看下startNestedScroll內部的原始碼:
java
public boolean startNestedScroll(@ScrollAxis int axes, @NestedScrollType int type) {
if (hasNestedScrollingParent(type)) {
// Already in progress
return true;
}
if (isNestedScrollingEnabled()) {
ViewParent p = mView.getParent();
View child = mView;
while (p != null) {
if (ViewParentCompat.onStartNestedScroll(p, child, mView, axes, type)) {
setNestedScrollingParentForType(type, p);
ViewParentCompat.onNestedScrollAccepted(p, child, mView, axes, type);
return true;
}
if (p instanceof View) {
child = (View) p;
}
p = p.getParent();
}
}
return false;
}
從原始碼中 我們可以看到,首先如果有巢狀滑動的父容器,直接返回true,此時代表巢狀滑動成功;
```java
public boolean hasNestedScrollingParent(@NestedScrollType int type) {
return getNestedScrollingParentForType(type) != null;
private ViewParent getNestedScrollingParentForType(@NestedScrollType int type) { switch (type) { case TYPE_TOUCH: return mNestedScrollingParentTouch; case TYPE_NON_TOUCH: return mNestedScrollingParentNonTouch; } return null; } ``` 在判斷的時候,會判斷mNestedScrollingParentTouch是否為空,因為第一次進來的時候肯定是空的,所以會繼續往下走;如果支援巢狀滑動,那麼就會進入到while迴圈中。
核心程式碼1: ```java while (p != null) {
//---------- 判斷條件1 -------------//
if (ViewParentCompat.onStartNestedScroll(p, child, mView, axes, type)) {
setNestedScrollingParentForType(type, p);
ViewParentCompat.onNestedScrollAccepted(p, child, mView, axes, type);
return true;
}
if (p instanceof View) {
child = (View) p;
}
p = p.getParent();
}
首先呼叫ViewParentCompat的onStartNestedScroll方法如下:
java
public static boolean onStartNestedScroll(@NonNull ViewParent parent, @NonNull View child,
@NonNull View target, int nestedScrollAxes, int type) {
if (parent instanceof NestedScrollingParent2) {
// First try the NestedScrollingParent2 API
return ((NestedScrollingParent2) parent).onStartNestedScroll(child, target,
nestedScrollAxes, type);
} else if (type == ViewCompat.TYPE_TOUCH) {
// Else if the type is the default (touch), try the NestedScrollingParent API
if (Build.VERSION.SDK_INT >= 21) {
try {
return Api21Impl.onStartNestedScroll(parent, child, target, nestedScrollAxes);
} catch (AbstractMethodError e) {
Log.e(TAG, "ViewParent " + parent + " does not implement interface "
+ "method onStartNestedScroll", e);
}
} else if (parent instanceof NestedScrollingParent) {
return ((NestedScrollingParent) parent).onStartNestedScroll(child, target,
nestedScrollAxes);
}
}
return false;
}
```
其實在這個方法中,就是判斷parent是否實現了NestedScrollingParent(2 3)介面,如果實現了此介面,那麼返回值就是parent中onStartNestedScroll的返回值。
這裡需要注意的是,如果parent中onStartNestedScroll的返回值為false,那麼就不會進入程式碼塊的條件判斷,所以在實現parent介面的時候,onStartNestedScroll需要返回true。進入程式碼塊中呼叫setNestedScrollingParentForType方法,將父容器給mNestedScrollingParentTouch賦值,那麼此時hasNestedScrollingParent方法就返回true,不需要遍歷View層級了。
java
private void setNestedScrollingParentForType(@NestedScrollType int type, ViewParent p) {
switch (type) {
case TYPE_TOUCH:
mNestedScrollingParentTouch = p;
break;
case TYPE_NON_TOUCH:
mNestedScrollingParentNonTouch = p;
break;
}
}
然後又緊接著呼叫了parent的onNestedScrollAccepted方法,這兩者一前一後,這樣預滾動階段就算是完成了。
在父容器中,預滾動節點就需要處理這兩個回撥即可,關鍵在於onStartNestedScroll的返回值。 ```kotlin override fun onStartNestedScroll(child: View, target: View, axes: Int): Boolean { Log.e("TAG","onStartNestedScroll") //這裡需要return true,否則在子View中分發事件就不會成功 return true }
override fun onNestedScrollAccepted(child: View, target: View, axes: Int) { Log.e("TAG","onNestedScrollAccepted") } ```
1.2.3 滾動階段實現
然後MOVE事件來了,這個時候我們需要記住,即便是滑動了子View,但是子View依然是需要將事件扔給父類,這裡就需要呼叫dispatchNestedPreScroll方法,這裡在1.2.1中介紹過,需要跟dispatchNestedScroll區分,dispatchNestedPreScroll是在子View消費事件之前就交給父類優先處理。 ```java public boolean dispatchNestedPreScroll(int dx, int dy, @Nullable int[] consumed, @Nullable int[] offsetInWindow, @NestedScrollType int type) { if (isNestedScrollingEnabled()) { //這裡不為空了 final ViewParent parent = getNestedScrollingParentForType(type); if (parent == null) { return false; }
if (dx != 0 || dy != 0) {
int startX = 0;
int startY = 0;
if (offsetInWindow != null) {
mView.getLocationInWindow(offsetInWindow);
startX = offsetInWindow[0];
startY = offsetInWindow[1];
}
if (consumed == null) {
consumed = getTempNestedScrollConsumed();
}
consumed[0] = 0;
consumed[1] = 0;
ViewParentCompat.onNestedPreScroll(parent, mView, dx, dy, consumed, type);
if (offsetInWindow != null) {
mView.getLocationInWindow(offsetInWindow);
offsetInWindow[0] -= startX;
offsetInWindow[1] -= startY;
}
//-------- 由父容器是否消費決定返回值 -------//
return consumed[0] != 0 || consumed[1] != 0;
} else if (offsetInWindow != null) {
offsetInWindow[0] = 0;
offsetInWindow[1] = 0;
}
}
return false;
} ``` 在子View呼叫dispatchNestedPreScroll方法時,需要傳入四個引數,這裡我們再次詳細介紹一下:\ dx、dy指的是x軸和y軸滑動的距離;\ consumed在子View呼叫時,其實只需要傳入一個空陣列即可,具體的賦值是需要在父容器中進行,父view消費了多少距離,就傳入多少,consumed[0]代表x軸,consumed[1]代表y軸;
看上面的原始碼,當dx或者dy不為0的時候,說明有滑動了,那麼此時就會做一些初始化的配置,把consumed陣列清空,然後會呼叫父容器的onNestedPreScroll方法,父容器決定是否消費這個事件,因為在父容器中會對consumed陣列進行復制,所以這個方法的返回值代表著父容器是否消費過事件;如果消費過,那麼就返回true,沒有消費過,那麼就返回false.
所以我們先看父容器的處理:
kotlin
override fun onNestedPreScroll(target: View, dx: Int, dy: Int, consumed: IntArray) {
Log.e("TAG", "onNestedPreScroll")
//父容器什麼時候 消費呢?
if (isViewShow(dy) || isViewHidden(dy)) {
//假設這個時候把事件全消費了
consumed[1] = dy
scrollBy(0, dy)
}
}
其實我們這裡就是直接將之前在onTouchEvent中的處理邏輯放在了onNestedPreScroll中,如果在上拉或者下滑時,首先頭部優先,假設父容器把距離全部消費,這個時候給consumed[1]賦值為dy。
```kotlin MotionEvent.ACTION_MOVE -> { val endY = e.y.toInt() val endX = e.x.toInt() var dx = mStartX - endX var dy = mStartY - endY //進行事件分發,優先給parent if (dispatchNestedPreScroll(dx, dy, cosumed, null)) { //如果父容器消費過事件,這個時候,cosumed有值了,我們只關心dy dy -= cosumed[1] if (dy == 0) { //代表父容器全給消費了 return true } } else { //如果沒有消費事件,那麼就子view消費吧 smoothScrollBy(dx, dy) }
} ``` 再來看子View,這裡是在MOVE事件中進行事件分發,呼叫dispatchNestedPreScroll方法,判斷如果父容器有事件消費,看消費了多少,剩下的就是子View消費;如果父容器沒有消費,dispatchNestedPreScroll返回了false,那麼子View自行處理事件。
所以如果子View使用的是RecyclerView,那麼在父容器做完處理之後,其實就能夠實現巢狀滑動吸頂的完美效果,為什麼呢?是因為RecyclerView本來就實現了parent介面,所以如果在自定義子View(可滑動)時,子View處理的這部分程式碼就需要特別關心。
1.2.4 滾動結束
在手指擡起之後,呼叫stopNestedScroll方法。
kotlin
MotionEvent.ACTION_UP->{
nestedScrollingChildHelper.stopNestedScroll()
}
從原始碼中看,其實就是回到父容器的onStopNestedScroll方法,然後將滑動的標誌位(mNestedScrollingParentTouch)置為空,在下次按下的時候,重新初始化。
java
public void stopNestedScroll(@NestedScrollType int type) {
ViewParent parent = getNestedScrollingParentForType(type);
if (parent != null) {
ViewParentCompat.onStopNestedScroll(parent, mView, type);
setNestedScrollingParentForType(type, null);
}
}