UI系列一Android多子view嵌套通用解決方案
原創(chuàng) zhanghao 百度App技術(shù)
轉(zhuǎn)載自掘金：https://juejin.im/post/5e5e1145f265da5741120b5a
1.多子view嵌套應(yīng)用背景
百度App在17年的版本中實現(xiàn)2個子view嵌套滾動，用于Feed落地頁(webview呈現(xiàn)文章詳情 + recycle呈現(xiàn)Native評論)。原理是在外層提供一個UI容器（我們稱之為”聯(lián)動容器”）處理WebView和Recyclerview連貫嵌套滾動。
當(dāng)時的聯(lián)動容器對子view限制比較大，僅支持WebView和Recyclerview進(jìn)行聯(lián)動滾動，數(shù)量也只支持2個子View。
隨著組件化進(jìn)程的推進(jìn)，為方便各業(yè)務(wù)解耦，對聯(lián)動容器提出了更高的要求，需要支持任意類型、任意數(shù)量的子view進(jìn)行聯(lián)動滾動，也就是本文要闡述的多子view嵌套滾動通用解決方案。
先直觀感受下聯(lián)動容器嵌套滾動的Demo效果：
2. 多子view嵌套實現(xiàn)原理
同大多數(shù)自定義控件類似，聯(lián)動容器也需要處理子view的測量、布局以及手勢處理。測量和布局對聯(lián)動容器的場景來說非常簡單，手勢處理相對復(fù)雜些。
從demo效果可以看出，聯(lián)動容器需要處理好和子view嵌套滑動問題。嵌套滑動的處理方案有兩種
基于Google的NestedScrolling機制實現(xiàn)嵌套滑動；
是由聯(lián)動容器內(nèi)部處理和子view嵌套滑動的邏輯。
百度App早期版本的聯(lián)動容器采用的方案2實現(xiàn)的，下圖為方案2聯(lián)動容器手勢處理流程：
筆者對方案2聯(lián)動容器的實現(xiàn)代碼做了開源，感興趣的同學(xué)可以參考：github.com/baiduapp-te…?基于google的NestedScrolling實現(xiàn)多子view嵌套能節(jié)省不少開發(fā)量，故筆者對多子view嵌套的實現(xiàn)采用方案一。
3. 核心邏輯
3.1 Google嵌套滑動機制
Google在Android 5.0推出了一套NestedScrolling機制，這套機制滾動打破了對之前Android傳統(tǒng)的事件處理的認(rèn)知，是按照逆向事件傳遞機制來處理嵌套滾動，事件傳遞可參考下圖：
網(wǎng)上有很多關(guān)于NestedScrolling的文章，如果沒接觸過NestedScrolling的同學(xué)可參考下張鴻洋的這篇文章：blog.csdn.net/lmj62356579…
3.2 接口設(shè)計
為了保證聯(lián)動容器中子view的任意性，聯(lián)動容器需提供完善的接口抽象供子view去實現(xiàn)。下圖為聯(lián)動容器暴露的接口類圖：
ILinkageScroll是置于聯(lián)動容器中的子view必須要實現(xiàn)的接口，聯(lián)動容器在初始化時如果發(fā)現(xiàn)某個子view沒實現(xiàn)該接口，會拋出異常。ILinkageScroll中又會涉及兩個接口：LinkageScrollHandler、ChildLinkageEvent。
LinkageScrollHandler接口中的方法聯(lián)動容器會在需要時主動調(diào)用，以通知子view完成一些功能，比如：獲取子view是否可滾動，獲取子view滾動條相關(guān)數(shù)據(jù)等。
ChildLinkageEvent接口定義了子view的一些事件信息，比如子view的內(nèi)容滾動到頂部或底部。當(dāng)發(fā)生這些事件后，子view主動調(diào)用對應(yīng)方法，這樣聯(lián)動容器收到子view一些事件后會做出相應(yīng)的反應(yīng)，保證正常的聯(lián)動效果。
上面僅簡單說明了下接口功能，想更加深入了解的同學(xué)請參考：github.com/baiduapp-te…
接下來我們詳細(xì)分析下聯(lián)動容器對手勢處理細(xì)節(jié)，根據(jù)手勢類型，將嵌套滑動分為兩種情況來分析：1. scroll手勢；2. fling手勢；
3.3 scroll手勢
先給出scroll手勢處理的核心代碼：
public class ELinkageScrollLayout extends ViewGroup implements NestedScrollingParent {
? ? @Override
? ? public void onNestedPreScroll(View target, int dx, int dy, int[] consumed) {
? ? ? ? boolean moveUp = dy > 0;
? ? ? ? boolean moveDown = !moveUp;
? ? ? ? int scrollY = getScrollY();
? ? ? ? int topEdge = target.getTop();
? ? ? ? LinkageScrollHandler targetScrollHandler
? ? ? ? ? ? ? ? = ((ILinkageScroll)target).provideScrollHandler();
? ? ? ? if (scrollY == topEdge) {? ? // 聯(lián)動容器scrollY與當(dāng)前子view的top坐標(biāo)重合? ? ? ? ? ?
? ? ? ? ? ? if ((moveDown && !targetScrollHandler.canScrollVertically(-1))
? ? ? ? ? ? ? ? ? ? || (moveUp && !targetScrollHandler.canScrollVertically(1))) {
? ? ? ? ? ? ? ? // 在對應(yīng)的滑動方向上，如果子view不能垂直滑動，則由聯(lián)動容器消費滾動距離
? ? ? ? ? ? ? ? scrollBy(0, dy);
? ? ? ? ? ? ? ? consumed[1] = dy;
? ? ? ? ? ? }
? ? ? ? } else if (scrollY > topEdge) {? ? // 聯(lián)動容器scrollY大于當(dāng)前子view的top坐標(biāo)，也就是說，子view頭部已經(jīng)滑出聯(lián)動容器
? ? ? ? ? ? if (moveUp) {
? ? ? ? ? ? ? ? // 如果手指上滑，則由聯(lián)動容器消費滾動距離
? ? ? ? ? ? ? ? scrollBy(0, dy);
? ? ? ? ? ? ? ? consumed[1] = dy;
? ? ? ? ? ? }
? ? ? ? ? ? if (moveDown) {
? ? ? ? ? ? ? ? // 如果手指下滑，聯(lián)動容器會先消費部分距離，此時聯(lián)動容器的scrollY會不斷減小，
? ? ? ? ? ? ? ? // 直到等于子view的top坐標(biāo)后，剩余的滑動距離則由子view繼續(xù)消費。
? ? ? ? ? ? ? ? int end = scrollY + dy;
? ? ? ? ? ? ? ? int deltaY;
? ? ? ? ? ? ? ? deltaY = end > topEdge ? dy : (topEdge - scrollY);
? ? ? ? ? ? ? ? scrollBy(0, deltaY);
? ? ? ? ? ? ? ? consumed[1] = deltaY;
? ? ? ? ? ? }
? ? ? ? } else if (scrollY < topEdge) {? ? // 聯(lián)動容器scrollY小于當(dāng)前子view的top坐標(biāo)，也就是說，子view還沒有完全露出
? ? ? ? ? ? if (moveDown) {
? ? ? ? ? ? ? ? // 如果手指下滑，則由聯(lián)動容器消費滾動距離
? ? ? ? ? ? ? ? scrollBy(0, dy);
? ? ? ? ? ? ? ? consumed[1] = dy;
? ? ? ? ? ? }
? ? ? ? ? ? if (moveUp) {
? ? ? ? ? ? ? ? // 如果手指上滑，聯(lián)動容器會先消費部分距離，此時聯(lián)動容器的scrollY會不斷增大，
? ? ? ? ? ? ? ? // 直到等于子view的top坐標(biāo)后，剩余的滑動距離則由子view繼續(xù)消費。
? ? ? ? ? ? ? ? int end = scrollY + dy;
? ? ? ? ? ? ? ? int deltaY;
? ? ? ? ? ? ? ? deltaY = end < topEdge ? dy : (topEdge - scrollY);
? ? ? ? ? ? ? ? scrollBy(0, deltaY);
? ? ? ? ? ? ? ? consumed[1] = deltaY;
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? @Override
? ? public void scrollBy(int x, int y) {
? ? ? ? // 邊界檢查
? ? ? ? int scrollY = getScrollY();
? ? ? ? int deltaY;
? ? ? ? if (y < 0) {
? ? ? ? ? ? deltaY = (scrollY + y) < 0 ? (-scrollY) : y;
? ? ? ? } else {
? ? ? ? ? ? deltaY = (scrollY + y) > mScrollRange ?
? ? ? ? ? ? ? ? ? ? (mScrollRange - scrollY) : y;
? ? ? ? }
? ? ? ? if (deltaY != 0) {
? ? ? ? ? ? super.scrollBy(x, deltaY);
? ? ? ? }
? ? }
}
onNestedPreScroll()回調(diào)是google嵌套滑動機制NestedScrollingParent接口中的方法。當(dāng)子view滾動時，會先通過此方法詢問父view是否消費這段滾動距離，父view根據(jù)自身情況決定是否消費以及消費多少，并將消費的距離放入數(shù)組consumed中，子view再根據(jù)數(shù)組中的內(nèi)容決定自己的滾動距離。
代碼注釋比較詳細(xì)，這里整體再做個解釋：通過對子view的上邊沿閾值和聯(lián)動容器的scrollY進(jìn)行比較，處理了3種case下的滾動情況。
第10行，當(dāng)scrollY == topEdge時，只要子view沒有滾動到頂或者底，都由子view正常消費滾動距離，否則由聯(lián)動容器消費滾動距離，并將消費的距離通過consumed變量通知子view，子view會根據(jù)consumed變量中的內(nèi)容決定自己的滑動距離。
第17行，當(dāng)scrollY > topEdge時，也就是說當(dāng)觸摸的子view頭部已經(jīng)滑出聯(lián)動容器，此時如果手指向上滑動，滑動距離全部由聯(lián)動容器消費，如果手指向下滑動，聯(lián)動容器會先消費部分距離，當(dāng)聯(lián)動容器的scrollY達(dá)到topEdge后，剩余的滑動距離由子view繼續(xù)消費。
第32行，當(dāng)scrollY < topEdge這個和上一個第17行判斷類似，這里不做過多解釋。scroll手勢處理流程圖如下：
3.4 fling手勢
聯(lián)動容器對fling手勢的處理大致思路如下：如果聯(lián)動容器的scrollY等于子view的top坐標(biāo)，則由子view自身處理fling手勢，否則由聯(lián)動容器處理fling手勢。
而且在一次完整的fling周期中，聯(lián)動容器和各子view將會交替去完成滑動行為，直到速度降為0，聯(lián)動容器需要處理好交替滑動時的速度銜接，保證整個fling的流暢行。接下來看下詳細(xì)實現(xiàn)：
public class ELinkageScrollLayout extends ViewGroup implements NestedScrollingParent {
? ? @Override
? ? public boolean onNestedPreFling(View target, float velocityX, float velocityY) {
? ? ? ? int scrollY = getScrollY();
? ? ? ? int targetTop = target.getTop();
? ? ? ? mFlingOrientation = velocityY > 0 ? FLING_ORIENTATION_UP : FLING_ORIENTATION_DOWN;
? ? ? ? if (scrollY == targetTop) {? ? // 當(dāng)聯(lián)動容器的scrollY等于子view的top坐標(biāo)，則由子view自身處理fling手勢
? ? ? ? ? ? // 跟蹤velocity，當(dāng)target滾動到頂或底，保證parent繼續(xù)fling
? ? ? ? ? ? trackVelocity(velocityY);
? ? ? ? ? ? return false;
? ? ? ? } else {? ? // 由聯(lián)動容器消費fling手勢
? ? ? ? ? ? parentFling(velocityY);
? ? ? ? ? ? return true;
? ? ? ? }
? ? }
}
onNestedPreFling()回調(diào)是google嵌套滑動機制NestedScrollingParent接口中的方法。當(dāng)子view發(fā)生fling行為時，會先通過此方法詢問父view是否要消費這次fling手勢，如果返回true，表示父view要消費這次fling手勢，反之不消費。
第6行根據(jù)velocityY正負(fù)值記錄本次的fling的方向；
第7行，當(dāng)聯(lián)動容器scrollY值等于觸摸子view的top值，fling手勢由子view處理，同時聯(lián)動容器對本次fling手勢的速度進(jìn)行追蹤，目的是當(dāng)子view內(nèi)容滾到頂或者底時，能夠獲得剩余速度以讓聯(lián)動容器繼續(xù)fling；
第12行，由聯(lián)動容器消費本次fling手勢。下面看下聯(lián)動容器和子view交替fling的細(xì)節(jié)：
public class ELinkageScrollLayout extends ViewGroup implements NestedScrollingParent {
? ? @Override
? ? public void computeScroll() {
? ? ? ? if (mScroller.computeScrollOffset()) {
? ? ? ? ? ? int y = mScroller.getCurrY();
? ? ? ? ? ? y = y < 0 ? 0 : y;
? ? ? ? ? ? y = y > mScrollRange ? mScrollRange : y;
? ? ? ? ? ? // 獲取聯(lián)動容器下個滾動邊界值，如果達(dá)到邊界值，速度會傳給下個子view，讓子view繼續(xù)快速滑動
? ? ? ? ? ? int edge = getNextEdge();
? ? ? ? ? ? // 邊界檢查
? ? ? ? ? ? if (mFlingOrientation == FLING_ORIENTATION_UP) {
? ? ? ? ? ? ? ? y = y > edge ? edge : y;
? ? ? ? ? ? }
? ? ? ? ? ? // 邊界檢查
? ? ? ? ? ? if (mFlingOrientation == FLING_ORIENTATION_DOWN) {
? ? ? ? ? ? ? ? y = y < edge ? edge : y;
? ? ? ? ? ? }
? ? ? ? ? ? // 聯(lián)動容器滾動子view
? ? ? ? ? ? scrollTo(x, y);
? ? ? ? ? ? int scrollY = getScrollY();
? ? ? ? ? ? // 聯(lián)動容器最新的scrollY是否達(dá)到了邊界值
? ? ? ? ? ? if (scrollY == edge) {
? ? ? ? ? ? ? ? // 獲取剩余的速度
? ? ? ? ? ? ? ? int velocity = (int) mScroller.getCurrVelocity();
? ? ? ? ? ? ? ? if (mFlingOrientation == FLING_ORIENTATION_UP) {
? ? ? ? ? ? ? ? ? ? velocity = velocity > 0? velocity : - velocity;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (mFlingOrientation == FLING_ORIENTATION_DOWN) {
? ? ? ? ? ? ? ? ? ? velocity = velocity < 0? velocity : - velocity;
? ? ? ? ? ? ? ? }? ?
? ? ? ? ? ? ? ? // 獲取top為edge的子view
? ? ? ? ? ? ? ? View target = getTargetByEdge(edge);
? ? ? ? ? ? ? ? // 子view根據(jù)剩余的速度繼續(xù)fling
? ? ? ? ? ? ? ? ((ILinkageScroll) target).provideScrollHandler()
? ? ? ? ? ? ? ? ? ? ? ? .flingContent(target, velocity);
? ? ? ? ? ? ? ? trackVelocity(velocity);
? ? ? ? ? ? }
? ? ? ? ? ? invalidate();
? ? ? ? }
? ? }
? ? /**
? ? * 根據(jù)fling的方向獲取下一個滾動邊界，
? ? * 內(nèi)部會判斷下一個子View是否isScrollable，
? ? * 如果為false，會順延取下一個target的edge。
? ? */
? ? private int getNextEdge() {
? ? ? ? int scrollY = getScrollY();
? ? ? ? if (mFlingOrientation == FLING_ORIENTATION_UP) {
? ? ? ? ? ? for (View target : mLinkageChildren) {
? ? ? ? ? ? ? ? LinkageScrollHandler handler
? ? ? ? ? ? ? ? ? ? ? ? = ((ILinkageScroll)target).provideScrollHandler();
? ? ? ? ? ? ? ? int topEdge = target.getTop();
? ? ? ? ? ? ? ? if (topEdge > scrollY
? ? ? ? ? ? ? ? ? ? ? ? && isTargetScrollable(target)
? ? ? ? ? ? ? ? ? ? ? ? && handler.canScrollVertically(1)) {
? ? ? ? ? ? ? ? ? ? return topEdge;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? } else if (mFlingOrientation == FLING_ORIENTATION_DOWN) {
? ? ? ? ? ? for (View target : mLinkageChildren) {
? ? ? ? ? ? ? ? LinkageScrollHandler handler
? ? ? ? ? ? ? ? ? ? ? ? = ((ILinkageScroll)target).provideScrollHandler();
? ? ? ? ? ? ? ? int bottomEdge = target.getBottom();
? ? ? ? ? ? ? ? if (bottomEdge >= scrollY
? ? ? ? ? ? ? ? ? ? ? ? && isTargetScrollable(target)
? ? ? ? ? ? ? ? ? ? ? ? && handler.canScrollVertically(-1)) {
? ? ? ? ? ? ? ? ? ? return target.getTop();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? return mFlingOrientation == FLING_ORIENTATION_UP ? mScrollRange : 0;
? ? }
? ? /**
? ? * child view的滾動事件
? ? */
? ? private ChildLinkageEvent mChildLinkageEvent = new ChildLinkageEvent() {
? ? ? ? @Override
? ? ? ? public void onContentScrollToTop(View target) {
? ? ? ? ? ? // 子view內(nèi)容滾動到頂部回調(diào)
? ? ? ? ? ? if (mVelocityScroller.computeScrollOffset()) {
? ? ? ? ? ? ? ? // 從速度追蹤器中獲取剩余速度
? ? ? ? ? ? ? ? float currVelocity = mVelocityScroller.getCurrVelocity();
? ? ? ? ? ? ? ? currVelocity = currVelocity < 0 ? currVelocity : - currVelocity;
? ? ? ? ? ? ? ? mVelocityScroller.abortAnimation();
? ? ? ? ? ? ? ? // 聯(lián)動容器根據(jù)剩余速度繼續(xù)fling
? ? ? ? ? ? ? ? parentFling(currVelocity);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? @Override
? ? ? ? public void onContentScrollToBottom(View target) {
? ? ? ? ? ? // 子view內(nèi)容滾動到底部回調(diào)
? ? ? ? ? ? if (mVelocityScroller.computeScrollOffset()) {
? ? ? ? ? ? ? ? // 從速度追蹤器中獲取剩余速度
? ? ? ? ? ? ? ? float currVelocity = mVelocityScroller.getCurrVelocity();
? ? ? ? ? ? ? ? currVelocity = currVelocity > 0 ? currVelocity : - currVelocity;
? ? ? ? ? ? ? ? mVelocityScroller.abortAnimation();
? ? ? ? ? ? ? ? // 聯(lián)動容器根據(jù)剩余速度繼續(xù)fling
? ? ? ? ? ? ? ? parentFling(currVelocity);
? ? ? ? ? ? }
? ? ? ? }
? ? };
}
fling的速度傳遞分為：
從聯(lián)動容器向子view傳遞；2. 從子view向聯(lián)動容器傳遞。
先看速度從聯(lián)動容器向子view傳遞。核心代碼在computeScroll()回調(diào)方法中。第9行，獲取聯(lián)動容器下一個滾動邊界值，如果達(dá)到下一個滾動邊界值，聯(lián)動容器需要將剩余速度傳給下個子view，讓其繼續(xù)滾動。
第46行，getNextEdge()方法內(nèi)部整體邏輯：遍歷所有子view，將聯(lián)動容器當(dāng)前的scrollY與子view的top/bottom進(jìn)行比較來獲取下一個滑動邊界。
第34行，當(dāng)聯(lián)動容器檢測到滑動到下個邊界時，則調(diào)用ILinkageScroll.flingContent()讓子view根據(jù)剩余速度繼續(xù)滾動。
再看速度從子view向聯(lián)動容器傳遞，核心代碼在第76行。當(dāng)子view內(nèi)容滾動到頂或者底，會回調(diào)onContentScrollToTop()方法或者onContentScrollToBottom()方法，聯(lián)動容器收到回調(diào)后，在第86行和第98行，繼續(xù)執(zhí)行后續(xù)滾動。fling手勢處理流程圖如下：
4. 滾動條
4.1 Android系統(tǒng)的ScrollBar
對于內(nèi)容可滾動的頁面，ScrollBar則是一個不可或缺的UI組件，所以，ScrollBar也是聯(lián)動容器必須要實現(xiàn)的功能。
好在Android系統(tǒng)對滾動條的抽象非常友好，自定義控件只需要重寫View中的幾個方法，Android系統(tǒng)就能幫助你正確繪制出滾動條。我們先看下View中的相關(guān)方法：
/** *
Compute the vertical offset of the vertical scrollbar's thumb within the horizontal range. This value is used to compute the position
* of the thumb within the scrollbar's track. * *
The range is expressedinarbitrary units that must be the same as the units used by {@link#computeVerticalScrollRange()} and* {@link#computeVerticalScrollExtent()}.</p>* * @returnthe vertical offset of the scrollbar's thumb
*/
protected int computeVerticalScrollOffset() {
? ? return mScrollY;
}
/**
* <p>Compute the vertical extent of the vertical scrollbar's thumb within the vertical range. This value is used to compute the length * of the thumb within the scrollbar's track.</p>
*
* <p>The range is expressed in arbitrary units that must be the same as the units used by {@link #computeVerticalScrollRange()} and
* {@link #computeVerticalScrollOffset()}.</p>
*
* @return the vertical extent of the scrollbar's thumb */protected intcomputeVerticalScrollExtent() {returngetHeight();}/** *
Compute the vertical range that the vertical scrollbar represents.
* *The range is expressedinarbitrary units that must be the same as the units used by {@link#computeVerticalScrollExtent()} and* {@link#computeVerticalScrollOffset()}.</p>* * @returnthe total vertical range represented by the vertical scrollbar */protected intcomputeVerticalScrollRange() {returngetHeight();}
對于垂直Scrollbar，我們只需要重寫computeVerticalScrollOffset()，computeVerticalScrollExtent()，computeVerticalScrollRange()這三個方法即可。Android對這三個方法注釋已經(jīng)非常詳細(xì)了，這里再簡單解釋下：
computeVerticalScrollOffset()表示當(dāng)前頁面內(nèi)容滾動的偏移值，這個值是用來控制Scrollbar的位置。缺省值為當(dāng)前頁面Y方向上的滾動值。
computeVerticalScrollExtent()表示滾動條的范圍，也就是滾動條在垂直方向上所能觸及的最大界限，這個值也會被系統(tǒng)用來計算滾動條的長度。缺省值是View的實際高度。
computeVerticalScrollRange()表示整個頁面內(nèi)容可滾動的數(shù)值范圍，缺省值為View的實際高度。
需要注意的是：offset，extent，range三個值在單位上必須保持一致。
4.2 聯(lián)動容器實現(xiàn)ScrollBar
聯(lián)動容器是由系統(tǒng)中可滾動的子view組成的，這些子view(ListView、RecyclerView、WebView)肯定都實現(xiàn)了ScrollBar功能，那么聯(lián)動容器實現(xiàn)ScrollBar就非常簡單了，聯(lián)動容器只需拿到所有子view的offset，extent，range值，然后再根據(jù)聯(lián)動容器的滑動邏輯把所有子view的這些值轉(zhuǎn)換成聯(lián)動容器對應(yīng)的offset，extent，range即可。接口設(shè)計如下：
public interface LinkageScrollHandler {
? ? // ...省略無關(guān)代碼
? ? /**
? ? * get scrollbar extent value
? ? *
? ? * @return extent
? ? */
? ? int getVerticalScrollExtent();
? ? /**
? ? * get scrollbar offset value
? ? *
? ? * @return extent
? ? */
? ? int getVerticalScrollOffset();
? ? /**
? ? * get scrollbar range value
? ? *
? ? * @return extent
? ? */
? ? int getVerticalScrollRange();
}
LinkageScrollHandler接口在3.2小節(jié)解釋過，這里不在贅述。這里面三個方法由子view去實現(xiàn)，聯(lián)動容器會通過這三個方法獲取子view與滾動條相關(guān)的值。下面看下聯(lián)動容器中關(guān)于ScrollBar的詳細(xì)邏輯：
public class ELinkageScrollLayout extends ViewGroup implements NestedScrollingParent {
? ? /** 構(gòu)造方法 */
? ? public ELinkageScrollLayout(Context context, AttributeSet attrs, int defStyleAttr) {
? ? ? ? // ...省略了無關(guān)代碼
? ? ? ? // 確保聯(lián)動容器調(diào)用onDraw()方法
? ? ? ? setWillNotDraw(false);
? ? ? ? // enable vertical scrollbar
? ? ? ? setVerticalScrollBarEnabled(true);
? ? }
? ? /** child view的滾動事件 */
? ? private ChildLinkageEvent mChildLinkageEvent = new ChildLinkageEvent() {
? ? ? ? // ...省略了無關(guān)代碼
? ? ? ? @Override
? ? ? ? public void onContentScroll(View target) {
? ? ? ? ? ? // 收到子view滾動事件，顯示滾動條
? ? ? ? ? ? awakenScrollBars();
? ? ? ? }
? ? }
? ? @Override
? ? protected int computeVerticalScrollExtent() {
? ? ? ? // 使用缺省的extent值
? ? ? ? return super.computeVerticalScrollExtent();
? ? }
? ? @Override
? ? protected int computeVerticalScrollRange() {
? ? ? ? int range = 0;
? ? ? ? // 遍歷所有子view，獲取子view的Range
? ? ? ? for (View child : mLinkageChildren) {
? ? ? ? ? ? ILinkageScroll linkageScroll = (ILinkageScroll) child;
? ? ? ? ? ? int childRange = linkageScroll.provideScrollHandler().getVerticalScrollRange();
? ? ? ? ? ? range += childRange;
? ? ? ? }
? ? ? ? return range;
? ? }
? ? @Override
? ? protected int computeVerticalScrollOffset() {
? ? ? ? int offset = 0;
? ? ? ? // 遍歷所有子view，獲取子view的offset
? ? ? ? for (View child : mLinkageChildren) {
? ? ? ? ? ? ILinkageScroll linkageScroll = (ILinkageScroll) child;
? ? ? ? ? ? int childOffset = linkageScroll.provideScrollHandler().getVerticalScrollOffset();
? ? ? ? ? ? offset += childOffset;
? ? ? ? }
? ? ? ? // 加上聯(lián)動容器自身在Y方向上的滾動偏移
? ? ? ? offset += getScrollY();
? ? ? ? return offset;
? ? }
}
以上就是聯(lián)動容器實現(xiàn)ScrollBar的核心代碼，注釋也非常詳細(xì)，這里再重點強調(diào)幾點：
系統(tǒng)為了提高效率，ViewGroup默認(rèn)不調(diào)用onDraw()方法，這樣就不會走ScrollBar的繪制邏輯。所以在第6行，需要調(diào)用setWillNotDraw(false)打開ViewGroup繪制流程；
第16行，收到子view的滾動回調(diào)，調(diào)用awakenScrollBars()觸發(fā)滾動條的繪制；
對于extent，直接使用缺省的extent，即聯(lián)動容器的高度；
對于range，對所有子view的range進(jìn)行求和，最后得到值即為聯(lián)動容器的range；
對于offset，同樣先對所有子view的offset進(jìn)行求和，之后還需要加上聯(lián)動容器自身的scrollY值，最終得到的值即為聯(lián)動容器的offset。
大家可以返回到文章開頭，再看下Demo中滾動條的效果，相比于市面上其它使用類似聯(lián)動技術(shù)的App，本文對滾動條的實現(xiàn)非常接近原生了。
5. 注意事項
聯(lián)動容器執(zhí)行fling操作時，借助OverScroller工具類完成的。代碼如下：
private void parentFling(float velocityY) {
? ? // ... 省略了無關(guān)代碼
? ? mScroller.fling(0, getScrollY(),
? ? ? ? ? ? ? ? 0, (int) velocityY,
? ? ? ? ? ? ? ? 0, 0,
? ? ? ? ? ? ? ? Integer.MIN_VALUE, Integer.MAX_VALUE);
? ? invalidate();
}
借助OverScroller.fling()方法完成聯(lián)動容器的fling行為，這段代碼在小米手機上運行聯(lián)動會出現(xiàn)問題，mScroller.getCurrVelocity()一直是0。
原因是小米手機Rom重寫了OverScroller，當(dāng)fling()方法第三個參數(shù)傳0時，OverScroller.mCurrVelocity一直為NaN，導(dǎo)致無法計算出正確剩余速度。
為了解決小米手機的問題，我們需要將第三個參數(shù)傳個非0值，這里給1即可。
private void parentFling(float velocityY) {
? ? // ... 省略了無關(guān)代碼
? ? mScroller.fling(0, getScrollY(),
? ? ? ? ? ? ? ? 1, (int) velocityY,
? ? ? ? ? ? ? ? 0, 0,
? ? ? ? ? ? ? ? Integer.MIN_VALUE, Integer.MAX_VALUE);
? ? invalidate();
}
6. 總結(jié)
多子view嵌套實現(xiàn)原理并不復(fù)雜，對手勢處理的邊界條件比較瑣碎，需要來回調(diào)試完善，歡迎業(yè)內(nèi)的朋友一起交流學(xué)習(xí)。
Sample地址:?github.com/baiduapp-te…
