UI系列一Android多子view嵌套通用解決方案
原創(chuàng) zhanghao 百度App技術(shù)
轉(zhuǎn)載自掘金：https://juejin.im/post/5e5e1145f265da5741120b5a
1.多子view嵌套應(yīng)用背景
百度App在17年的版本中實(shí)現(xiàn)2個(gè)子view嵌套滾動(dòng)雇寇，用于Feed落地頁(yè)(webview呈現(xiàn)文章詳情 + recycle呈現(xiàn)Native評(píng)論)吩屹。原理是在外層提供一個(gè)UI容器（我們稱之為”聯(lián)動(dòng)容器”）處理WebView和Recyclerview連貫嵌套滾動(dòng)喂很。
當(dāng)時(shí)的聯(lián)動(dòng)容器對(duì)子view限制比較大堪澎，僅支持WebView和Recyclerview進(jìn)行聯(lián)動(dòng)滾動(dòng)萍丐，數(shù)量也只支持2個(gè)子View揪荣。
隨著組件化進(jìn)程的推進(jìn)帜慢，為方便各業(yè)務(wù)解耦，對(duì)聯(lián)動(dòng)容器提出了更高的要求属铁，需要支持任意類型、任意數(shù)量的子view進(jìn)行聯(lián)動(dòng)滾動(dòng)毅糟，也就是本文要闡述的多子view嵌套滾動(dòng)通用解決方案红选。
先直觀感受下聯(lián)動(dòng)容器嵌套滾動(dòng)的Demo效果：
2. 多子view嵌套實(shí)現(xiàn)原理
同大多數(shù)自定義控件類似，聯(lián)動(dòng)容器也需要處理子view的測(cè)量姆另、布局以及手勢(shì)處理喇肋。測(cè)量和布局對(duì)聯(lián)動(dòng)容器的場(chǎng)景來(lái)說(shuō)非常簡(jiǎn)單，手勢(shì)處理相對(duì)復(fù)雜些迹辐。
從demo效果可以看出蝶防，聯(lián)動(dòng)容器需要處理好和子view嵌套滑動(dòng)問(wèn)題。嵌套滑動(dòng)的處理方案有兩種
基于Google的NestedScrolling機(jī)制實(shí)現(xiàn)嵌套滑動(dòng)明吩；
是由聯(lián)動(dòng)容器內(nèi)部處理和子view嵌套滑動(dòng)的邏輯间学。
百度App早期版本的聯(lián)動(dòng)容器采用的方案2實(shí)現(xiàn)的，下圖為方案2聯(lián)動(dòng)容器手勢(shì)處理流程：
筆者對(duì)方案2聯(lián)動(dòng)容器的實(shí)現(xiàn)代碼做了開(kāi)源印荔，感興趣的同學(xué)可以參考：github.com/baiduapp-te…?基于google的NestedScrolling實(shí)現(xiàn)多子view嵌套能節(jié)省不少開(kāi)發(fā)量低葫，故筆者對(duì)多子view嵌套的實(shí)現(xiàn)采用方案一。
3. 核心邏輯
3.1 Google嵌套滑動(dòng)機(jī)制
Google在Android 5.0推出了一套NestedScrolling機(jī)制仍律，這套機(jī)制滾動(dòng)打破了對(duì)之前Android傳統(tǒng)的事件處理的認(rèn)知嘿悬，是按照逆向事件傳遞機(jī)制來(lái)處理嵌套滾動(dòng)，事件傳遞可參考下圖：
網(wǎng)上有很多關(guān)于NestedScrolling的文章水泉，如果沒(méi)接觸過(guò)NestedScrolling的同學(xué)可參考下張鴻洋的這篇文章：blog.csdn.net/lmj62356579…
3.2 接口設(shè)計(jì)
為了保證聯(lián)動(dòng)容器中子view的任意性善涨，聯(lián)動(dòng)容器需提供完善的接口抽象供子view去實(shí)現(xiàn)。下圖為聯(lián)動(dòng)容器暴露的接口類圖：
ILinkageScroll是置于聯(lián)動(dòng)容器中的子view必須要實(shí)現(xiàn)的接口草则，聯(lián)動(dòng)容器在初始化時(shí)如果發(fā)現(xiàn)某個(gè)子view沒(méi)實(shí)現(xiàn)該接口钢拧，會(huì)拋出異常。ILinkageScroll中又會(huì)涉及兩個(gè)接口：LinkageScrollHandler炕横、ChildLinkageEvent源内。
LinkageScrollHandler接口中的方法聯(lián)動(dòng)容器會(huì)在需要時(shí)主動(dòng)調(diào)用，以通知子view完成一些功能看锉，比如：獲取子view是否可滾動(dòng)姿锭，獲取子view滾動(dòng)條相關(guān)數(shù)據(jù)等。
ChildLinkageEvent接口定義了子view的一些事件信息伯铣，比如子view的內(nèi)容滾動(dòng)到頂部或底部呻此。當(dāng)發(fā)生這些事件后，子view主動(dòng)調(diào)用對(duì)應(yīng)方法腔寡，這樣聯(lián)動(dòng)容器收到子view一些事件后會(huì)做出相應(yīng)的反應(yīng)焚鲜，保證正常的聯(lián)動(dòng)效果。
上面僅簡(jiǎn)單說(shuō)明了下接口功能，想更加深入了解的同學(xué)請(qǐng)參考：github.com/baiduapp-te…
接下來(lái)我們?cè)敿?xì)分析下聯(lián)動(dòng)容器對(duì)手勢(shì)處理細(xì)節(jié)忿磅，根據(jù)手勢(shì)類型糯彬，將嵌套滑動(dòng)分為兩種情況來(lái)分析：1. scroll手勢(shì)；2. fling手勢(shì)葱她；
3.3 scroll手勢(shì)
先給出scroll手勢(shì)處理的核心代碼：
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)動(dòng)容器scrollY與當(dāng)前子view的top坐標(biāo)重合? ? ? ? ? ?
? ? ? ? ? ? if ((moveDown && !targetScrollHandler.canScrollVertically(-1))
? ? ? ? ? ? ? ? ? ? || (moveUp && !targetScrollHandler.canScrollVertically(1))) {
? ? ? ? ? ? ? ? // 在對(duì)應(yīng)的滑動(dòng)方向上撩扒，如果子view不能垂直滑動(dòng)，則由聯(lián)動(dòng)容器消費(fèi)滾動(dòng)距離
? ? ? ? ? ? ? ? scrollBy(0, dy);
? ? ? ? ? ? ? ? consumed[1] = dy;
? ? ? ? ? ? }
? ? ? ? } else if (scrollY > topEdge) {? ? // 聯(lián)動(dòng)容器scrollY大于當(dāng)前子view的top坐標(biāo)吨些，也就是說(shuō)搓谆，子view頭部已經(jīng)滑出聯(lián)動(dòng)容器
? ? ? ? ? ? if (moveUp) {
? ? ? ? ? ? ? ? // 如果手指上滑，則由聯(lián)動(dòng)容器消費(fèi)滾動(dòng)距離
? ? ? ? ? ? ? ? scrollBy(0, dy);
? ? ? ? ? ? ? ? consumed[1] = dy;
? ? ? ? ? ? }
? ? ? ? ? ? if (moveDown) {
? ? ? ? ? ? ? ? // 如果手指下滑豪墅，聯(lián)動(dòng)容器會(huì)先消費(fèi)部分距離泉手，此時(shí)聯(lián)動(dòng)容器的scrollY會(huì)不斷減小，
? ? ? ? ? ? ? ? // 直到等于子view的top坐標(biāo)后偶器，剩余的滑動(dòng)距離則由子view繼續(xù)消費(fèi)斩萌。
? ? ? ? ? ? ? ? int end = scrollY + dy;
? ? ? ? ? ? ? ? int deltaY;
? ? ? ? ? ? ? ? deltaY = end > topEdge ? dy : (topEdge - scrollY);
? ? ? ? ? ? ? ? scrollBy(0, deltaY);
? ? ? ? ? ? ? ? consumed[1] = deltaY;
? ? ? ? ? ? }
? ? ? ? } else if (scrollY < topEdge) {? ? // 聯(lián)動(dòng)容器scrollY小于當(dāng)前子view的top坐標(biāo)，也就是說(shuō)屏轰，子view還沒(méi)有完全露出
? ? ? ? ? ? if (moveDown) {
? ? ? ? ? ? ? ? // 如果手指下滑颊郎，則由聯(lián)動(dòng)容器消費(fèi)滾動(dòng)距離
? ? ? ? ? ? ? ? scrollBy(0, dy);
? ? ? ? ? ? ? ? consumed[1] = dy;
? ? ? ? ? ? }
? ? ? ? ? ? if (moveUp) {
? ? ? ? ? ? ? ? // 如果手指上滑，聯(lián)動(dòng)容器會(huì)先消費(fèi)部分距離霎苗，此時(shí)聯(lián)動(dòng)容器的scrollY會(huì)不斷增大袭艺，
? ? ? ? ? ? ? ? // 直到等于子view的top坐標(biāo)后，剩余的滑動(dòng)距離則由子view繼續(xù)消費(fèi)叨粘。
? ? ? ? ? ? ? ? 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嵌套滑動(dòng)機(jī)制NestedScrollingParent接口中的方法。當(dāng)子view滾動(dòng)時(shí)瘤睹，會(huì)先通過(guò)此方法詢問(wèn)父view是否消費(fèi)這段滾動(dòng)距離升敲，父view根據(jù)自身情況決定是否消費(fèi)以及消費(fèi)多少，并將消費(fèi)的距離放入數(shù)組consumed中轰传，子view再根據(jù)數(shù)組中的內(nèi)容決定自己的滾動(dòng)距離驴党。
代碼注釋比較詳細(xì)，這里整體再做個(gè)解釋：通過(guò)對(duì)子view的上邊沿閾值和聯(lián)動(dòng)容器的scrollY進(jìn)行比較获茬，處理了3種case下的滾動(dòng)情況港庄。
第10行，當(dāng)scrollY == topEdge時(shí)恕曲，只要子view沒(méi)有滾動(dòng)到頂或者底鹏氧，都由子view正常消費(fèi)滾動(dòng)距離，否則由聯(lián)動(dòng)容器消費(fèi)滾動(dòng)距離佩谣，并將消費(fèi)的距離通過(guò)consumed變量通知子view把还，子view會(huì)根據(jù)consumed變量中的內(nèi)容決定自己的滑動(dòng)距離。
第17行，當(dāng)scrollY > topEdge時(shí)吊履，也就是說(shuō)當(dāng)觸摸的子view頭部已經(jīng)滑出聯(lián)動(dòng)容器安皱，此時(shí)如果手指向上滑動(dòng)，滑動(dòng)距離全部由聯(lián)動(dòng)容器消費(fèi)艇炎，如果手指向下滑動(dòng)酌伊，聯(lián)動(dòng)容器會(huì)先消費(fèi)部分距離，當(dāng)聯(lián)動(dòng)容器的scrollY達(dá)到topEdge后缀踪，剩余的滑動(dòng)距離由子view繼續(xù)消費(fèi)居砖。
第32行，當(dāng)scrollY < topEdge這個(gè)和上一個(gè)第17行判斷類似辜贵，這里不做過(guò)多解釋悯蝉。scroll手勢(shì)處理流程圖如下：
3.4 fling手勢(shì)
聯(lián)動(dòng)容器對(duì)fling手勢(shì)的處理大致思路如下：如果聯(lián)動(dòng)容器的scrollY等于子view的top坐標(biāo)，則由子view自身處理fling手勢(shì)托慨，否則由聯(lián)動(dòng)容器處理fling手勢(shì)鼻由。
而且在一次完整的fling周期中，聯(lián)動(dòng)容器和各子view將會(huì)交替去完成滑動(dòng)行為厚棵，直到速度降為0蕉世，聯(lián)動(dòng)容器需要處理好交替滑動(dòng)時(shí)的速度銜接，保證整個(gè)fling的流暢行婆硬。接下來(lái)看下詳細(xì)實(shí)現(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)動(dòng)容器的scrollY等于子view的top坐標(biāo)狠轻，則由子view自身處理fling手勢(shì)
? ? ? ? ? ? // 跟蹤velocity，當(dāng)target滾動(dòng)到頂或底彬犯，保證parent繼續(xù)fling
? ? ? ? ? ? trackVelocity(velocityY);
? ? ? ? ? ? return false;
? ? ? ? } else {? ? // 由聯(lián)動(dòng)容器消費(fèi)fling手勢(shì)
? ? ? ? ? ? parentFling(velocityY);
? ? ? ? ? ? return true;
? ? ? ? }
? ? }
}
onNestedPreFling()回調(diào)是google嵌套滑動(dòng)機(jī)制NestedScrollingParent接口中的方法向楼。當(dāng)子view發(fā)生fling行為時(shí)，會(huì)先通過(guò)此方法詢問(wèn)父view是否要消費(fèi)這次fling手勢(shì)谐区，如果返回true湖蜕，表示父view要消費(fèi)這次fling手勢(shì)，反之不消費(fèi)宋列。
第6行根據(jù)velocityY正負(fù)值記錄本次的fling的方向昭抒；
第7行，當(dāng)聯(lián)動(dòng)容器scrollY值等于觸摸子view的top值炼杖，fling手勢(shì)由子view處理灭返，同時(shí)聯(lián)動(dòng)容器對(duì)本次fling手勢(shì)的速度進(jìn)行追蹤，目的是當(dāng)子view內(nèi)容滾到頂或者底時(shí)坤邪，能夠獲得剩余速度以讓聯(lián)動(dòng)容器繼續(xù)fling熙含；
第12行，由聯(lián)動(dòng)容器消費(fèi)本次fling手勢(shì)艇纺。下面看下聯(lián)動(dòng)容器和子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òng)容器下個(gè)滾動(dòng)邊界值婆芦，如果達(dá)到邊界值怕磨，速度會(huì)傳給下個(gè)子view，讓子view繼續(xù)快速滑動(dòng)
? ? ? ? ? ? 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)動(dòng)容器滾動(dòng)子view
? ? ? ? ? ? scrollTo(x, y);
? ? ? ? ? ? int scrollY = getScrollY();
? ? ? ? ? ? // 聯(lián)動(dòng)容器最新的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的方向獲取下一個(gè)滾動(dòng)邊界消约，
? ? * 內(nèi)部會(huì)判斷下一個(gè)子View是否isScrollable肠鲫，
? ? * 如果為false，會(huì)順延取下一個(gè)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的滾動(dòng)事件
? ? */
? ? private ChildLinkageEvent mChildLinkageEvent = new ChildLinkageEvent() {
? ? ? ? @Override
? ? ? ? public void onContentScrollToTop(View target) {
? ? ? ? ? ? // 子view內(nèi)容滾動(dòng)到頂部回調(diào)
? ? ? ? ? ? if (mVelocityScroller.computeScrollOffset()) {
? ? ? ? ? ? ? ? // 從速度追蹤器中獲取剩余速度
? ? ? ? ? ? ? ? float currVelocity = mVelocityScroller.getCurrVelocity();
? ? ? ? ? ? ? ? currVelocity = currVelocity < 0 ? currVelocity : - currVelocity;
? ? ? ? ? ? ? ? mVelocityScroller.abortAnimation();
? ? ? ? ? ? ? ? // 聯(lián)動(dòng)容器根據(jù)剩余速度繼續(xù)fling
? ? ? ? ? ? ? ? parentFling(currVelocity);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? @Override
? ? ? ? public void onContentScrollToBottom(View target) {
? ? ? ? ? ? // 子view內(nèi)容滾動(dòng)到底部回調(diào)
? ? ? ? ? ? if (mVelocityScroller.computeScrollOffset()) {
? ? ? ? ? ? ? ? // 從速度追蹤器中獲取剩余速度
? ? ? ? ? ? ? ? float currVelocity = mVelocityScroller.getCurrVelocity();
? ? ? ? ? ? ? ? currVelocity = currVelocity > 0 ? currVelocity : - currVelocity;
? ? ? ? ? ? ? ? mVelocityScroller.abortAnimation();
? ? ? ? ? ? ? ? // 聯(lián)動(dòng)容器根據(jù)剩余速度繼續(xù)fling
? ? ? ? ? ? ? ? parentFling(currVelocity);
? ? ? ? ? ? }
? ? ? ? }
? ? };
}
fling的速度傳遞分為：
從聯(lián)動(dòng)容器向子view傳遞导饲；2. 從子view向聯(lián)動(dòng)容器傳遞。
先看速度從聯(lián)動(dòng)容器向子view傳遞氯材。核心代碼在computeScroll()回調(diào)方法中渣锦。第9行，獲取聯(lián)動(dòng)容器下一個(gè)滾動(dòng)邊界值氢哮，如果達(dá)到下一個(gè)滾動(dòng)邊界值袋毙，聯(lián)動(dòng)容器需要將剩余速度傳給下個(gè)子view，讓其繼續(xù)滾動(dòng)冗尤。
第46行听盖，getNextEdge()方法內(nèi)部整體邏輯：遍歷所有子view，將聯(lián)動(dòng)容器當(dāng)前的scrollY與子view的top/bottom進(jìn)行比較來(lái)獲取下一個(gè)滑動(dòng)邊界裂七。
第34行皆看，當(dāng)聯(lián)動(dòng)容器檢測(cè)到滑動(dòng)到下個(gè)邊界時(shí)，則調(diào)用ILinkageScroll.flingContent()讓子view根據(jù)剩余速度繼續(xù)滾動(dòng)背零。
再看速度從子view向聯(lián)動(dòng)容器傳遞腰吟，核心代碼在第76行。當(dāng)子view內(nèi)容滾動(dòng)到頂或者底徙瓶，會(huì)回調(diào)onContentScrollToTop()方法或者onContentScrollToBottom()方法毛雇，聯(lián)動(dòng)容器收到回調(diào)后，在第86行和第98行侦镇，繼續(xù)執(zhí)行后續(xù)滾動(dòng)禾乘。fling手勢(shì)處理流程圖如下：
4. 滾動(dòng)條
4.1 Android系統(tǒng)的ScrollBar
對(duì)于內(nèi)容可滾動(dòng)的頁(yè)面，ScrollBar則是一個(gè)不可或缺的UI組件虽缕，所以，ScrollBar也是聯(lián)動(dòng)容器必須要實(shí)現(xiàn)的功能蒲稳。
好在Android系統(tǒng)對(duì)滾動(dòng)條的抽象非常友好氮趋，自定義控件只需要重寫View中的幾個(gè)方法，Android系統(tǒng)就能幫助你正確繪制出滾動(dò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();}
對(duì)于垂直Scrollbar剩胁，我們只需要重寫computeVerticalScrollOffset()，computeVerticalScrollExtent()祥国，computeVerticalScrollRange()這三個(gè)方法即可昵观。Android對(duì)這三個(gè)方法注釋已經(jīng)非常詳細(xì)了晾腔，這里再簡(jiǎn)單解釋下：
computeVerticalScrollOffset()表示當(dāng)前頁(yè)面內(nèi)容滾動(dòng)的偏移值，這個(gè)值是用來(lái)控制Scrollbar的位置啊犬。缺省值為當(dāng)前頁(yè)面Y方向上的滾動(dòng)值灼擂。
computeVerticalScrollExtent()表示滾動(dòng)條的范圍，也就是滾動(dòng)條在垂直方向上所能觸及的最大界限觉至，這個(gè)值也會(huì)被系統(tǒng)用來(lái)計(jì)算滾動(dòng)條的長(zhǎng)度剔应。缺省值是View的實(shí)際高度。
computeVerticalScrollRange()表示整個(gè)頁(yè)面內(nèi)容可滾動(dòng)的數(shù)值范圍语御，缺省值為View的實(shí)際高度峻贮。
需要注意的是：offset，extent应闯，range三個(gè)值在單位上必須保持一致纤控。
4.2 聯(lián)動(dòng)容器實(shí)現(xiàn)ScrollBar
聯(lián)動(dòng)容器是由系統(tǒng)中可滾動(dòng)的子view組成的，這些子view(ListView碉纺、RecyclerView船万、WebView)肯定都實(shí)現(xiàn)了ScrollBar功能，那么聯(lián)動(dòng)容器實(shí)現(xiàn)ScrollBar就非常簡(jiǎn)單了惜辑，聯(lián)動(dòng)容器只需拿到所有子view的offset唬涧，extent，range值盛撑，然后再根據(jù)聯(lián)動(dòng)容器的滑動(dòng)邏輯把所有子view的這些值轉(zhuǎn)換成聯(lián)動(dòng)容器對(duì)應(yīng)的offset碎节，extent，range即可抵卫。接口設(shè)計(jì)如下：
public interface LinkageScrollHandler {
? ? // ...省略無(wú)關(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é)解釋過(guò)狮荔，這里不在贅述。這里面三個(gè)方法由子view去實(shí)現(xiàn)介粘，聯(lián)動(dòng)容器會(huì)通過(guò)這三個(gè)方法獲取子view與滾動(dòng)條相關(guān)的值殖氏。下面看下聯(lián)動(dòng)容器中關(guān)于ScrollBar的詳細(xì)邏輯：
public class ELinkageScrollLayout extends ViewGroup implements NestedScrollingParent {
? ? /** 構(gòu)造方法 */
? ? public ELinkageScrollLayout(Context context, AttributeSet attrs, int defStyleAttr) {
? ? ? ? // ...省略了無(wú)關(guān)代碼
? ? ? ? // 確保聯(lián)動(dòng)容器調(diào)用onDraw()方法
? ? ? ? setWillNotDraw(false);
? ? ? ? // enable vertical scrollbar
? ? ? ? setVerticalScrollBarEnabled(true);
? ? }
? ? /** child view的滾動(dòng)事件 */
? ? private ChildLinkageEvent mChildLinkageEvent = new ChildLinkageEvent() {
? ? ? ? // ...省略了無(wú)關(guān)代碼
? ? ? ? @Override
? ? ? ? public void onContentScroll(View target) {
? ? ? ? ? ? // 收到子view滾動(dòng)事件，顯示滾動(dòng)條
? ? ? ? ? ? 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)動(dòng)容器自身在Y方向上的滾動(dòng)偏移
? ? ? ? offset += getScrollY();
? ? ? ? return offset;
? ? }
}
以上就是聯(lián)動(dòng)容器實(shí)現(xiàn)ScrollBar的核心代碼，注釋也非常詳細(xì)慨亲，這里再重點(diǎn)強(qiáng)調(diào)幾點(diǎn)：
系統(tǒng)為了提高效率婚瓜，ViewGroup默認(rèn)不調(diào)用onDraw()方法，這樣就不會(huì)走ScrollBar的繪制邏輯刑棵。所以在第6行巴刻，需要調(diào)用setWillNotDraw(false)打開(kāi)ViewGroup繪制流程；
第16行蛉签，收到子view的滾動(dòng)回調(diào)胡陪，調(diào)用awakenScrollBars()觸發(fā)滾動(dòng)條的繪制沥寥；
對(duì)于extent，直接使用缺省的extent柠座，即聯(lián)動(dòng)容器的高度邑雅；
對(duì)于range，對(duì)所有子view的range進(jìn)行求和愚隧，最后得到值即為聯(lián)動(dòng)容器的range蒂阱；
對(duì)于offset，同樣先對(duì)所有子view的offset進(jìn)行求和狂塘，之后還需要加上聯(lián)動(dòng)容器自身的scrollY值录煤，最終得到的值即為聯(lián)動(dòng)容器的offset。
大家可以返回到文章開(kāi)頭荞胡，再看下Demo中滾動(dòng)條的效果妈踊，相比于市面上其它使用類似聯(lián)動(dòng)技術(shù)的App，本文對(duì)滾動(dòng)條的實(shí)現(xiàn)非常接近原生了泪漂。
5. 注意事項(xiàng)
聯(lián)動(dòng)容器執(zhí)行fling操作時(shí)廊营，借助OverScroller工具類完成的。代碼如下：
private void parentFling(float velocityY) {
? ? // ... 省略了無(wú)關(guān)代碼
? ? mScroller.fling(0, getScrollY(),
? ? ? ? ? ? ? ? 0, (int) velocityY,
? ? ? ? ? ? ? ? 0, 0,
? ? ? ? ? ? ? ? Integer.MIN_VALUE, Integer.MAX_VALUE);
? ? invalidate();
}
借助OverScroller.fling()方法完成聯(lián)動(dòng)容器的fling行為萝勤，這段代碼在小米手機(jī)上運(yùn)行聯(lián)動(dòng)會(huì)出現(xiàn)問(wèn)題露筒，mScroller.getCurrVelocity()一直是0。
原因是小米手機(jī)Rom重寫了OverScroller敌卓，當(dāng)fling()方法第三個(gè)參數(shù)傳0時(shí)慎式，OverScroller.mCurrVelocity一直為NaN，導(dǎo)致無(wú)法計(jì)算出正確剩余速度趟径。
為了解決小米手機(jī)的問(wèn)題瘪吏，我們需要將第三個(gè)參數(shù)傳個(gè)非0值，這里給1即可蜗巧。
private void parentFling(float velocityY) {
? ? // ... 省略了無(wú)關(guān)代碼
? ? mScroller.fling(0, getScrollY(),
? ? ? ? ? ? ? ? 1, (int) velocityY,
? ? ? ? ? ? ? ? 0, 0,
? ? ? ? ? ? ? ? Integer.MIN_VALUE, Integer.MAX_VALUE);
? ? invalidate();
}
6. 總結(jié)
多子view嵌套實(shí)現(xiàn)原理并不復(fù)雜掌眠，對(duì)手勢(shì)處理的邊界條件比較瑣碎，需要來(lái)回調(diào)試完善幕屹，歡迎業(yè)內(nèi)的朋友一起交流學(xué)習(xí)蓝丙。
Sample地址:?github.com/baiduapp-te…
