使用CoordinatorLayout過程當中遇到的兩個問題以及淺析CoordinatorLayout工做機制
在使用CoordinatorLayout來實現Android中的一種吸頂的時候，遇到了兩個CoordinatorLayout的滑動問題，這裏作下記錄。android
這裏使用CoordinatorLayout實現的是一個tab吸頂的效果，相似淘寶，京東首頁的一個效果。 頭部區域展現各類類型banner卡片，中間是相似TabLayout的可點擊tab，下面是feed卡片，能夠一直下拉加載，而且feed卡片區域使用ViewPager能夠支持左右橫滑切換tab，另外，就是tab滾動到頂部以後會有個吸頂的效果。bash
咱們在項目中也要實現的效果，一開始個人想法是使用嵌套RecycleView的形式來實現，由於我去調研了下京東和淘寶的首頁佈局都是這麼實現的，京東和淘寶首頁實現方式和下面的圖相似，外部的整個RecycleView嵌套ViewPager，ViewPager中再有多個RecycleView，這個實現起來稍微有點麻煩，難點是要處理好外部的RecycleView和ViewPager中內部RecycleView的滑動事件傳遞，這裏咱們只是簡單介紹下，後面我會專門來介紹相似這樣的嵌套RecycleView如何實現。app
接下來是如何採用其餘方便的方式來實現相似需求？我想到了CoordinatorLayout，CoordinatorLayout在處理吸頂是有一套已經成熟的方案的。ide
網上關於CoordinatorLayout的使用有不少不錯的文章，這裏就不介紹如何使用，關於CoordinatorLayout和Behavior我推薦看看這篇文章針對 CoordinatorLayout 及 Behavior 的一次細節較真佈局
而咱們這篇文章主要是講使用CoordinatorLayout中遇到的問題，問題如何解決以及CoordinatorLayout爲何會有這樣的問題。動畫
實現這個大概是像上面這樣相似的佈局結構，來看下佈局文件。ui
<?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"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
app:layout_scrollFlags="scroll"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
app:layout_scrollFlags="scroll"
app:scrimVisibleHeightTrigger="45dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:background="@drawable/header"
app:layout_scrollFlags="scroll"
android:layout_width="match_parent"
android:layout_height="450dp" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
app:layout_collapseMode="pin"
app:tabMode="scrollable"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.CoordinatorLayout>
複製代碼
這樣的佈局，接着填充數據基本上就能實現tab吸頂效果，feed卡片區採用RecycleView實現，能夠一直下拉，而且可以支持左右橫滑，基本實現了相似京東，淘寶首頁的一個效果。this
可是在使用這種方式來實現發現兩個很明顯的問題。spa
第一，抖動問題
該問題場景描述：咱們觸摸AppBarLayout使AppBarLayout總體向上滑動，，即手指上滑，當AppBarLayout fling的同時，咱們觸摸下部ViewPager中的RecycleView區域，使RecycleView區域總體向下滑動，即手指下滑，這個時候會發現一個明顯頁面動畫現象，這個問題幾乎是必現。.net
來看下gif效果：
接下來咱們來看問題的緣由，其實這個要搞清楚緣由須要對CoordinatorLayout的工做機制有個比較清晰的理解，然而CoordinatorLayout這裏牽扯到嵌套滾動以及Behavior這些，
咱們這裏嘗試簡單地介紹下CoordinatorLayout的工做機制。
- CoordinatorLayout實現NestedScrollingParent2接口，用於處理與滑動子View的聯動交互，實際上交由Behavior進行處理。
- AppBarLayout中默認使用了AppBarLayout.Behavior，主要功能是接收CoordinatorLayout傳輸過來的滑動事件，而且相對應的進行處理，如RecycleView往上滑動到頭時候，繼續滑動移動AppBarLayout到頭。
- RecycleView實現了NestedScrollingChild2接口，用於傳輸給CoordinatorLayout，而且消費CoordinatorLayout不消費的觸摸事件，其中仍是使用了AppBarLayout.ScrollingViewBehavior，功能是進行監聽AppBarLayout的位移變化，從而進行相對應的變化，最明顯的例子就是AppBarLayout上移過程當中，RecycleView一塊兒上移。
CoordinatorLayout中Behavior
其實CoordinatorLayout就是經過Behavior這個機制來協調各個子View的滾動。好比咱們來看CoordinatorLayout的onStartNestedScroll方法，這個實際上是NestedScrollingParent2中的方法。
當CoordinatorLayout子view的調用NestedScrollingChild2的方法startNestedScroll時,會調用到該方法 該方法決定了當前控件是否能接收到其內部View（並不是是直接子View）滑動時的參數。
//CoordinatorLayout中的onStartNestedScroll方法：
@Override
public boolean onStartNestedScroll(View child, View target, int nestedScrollAxes) {
return onStartNestedScroll(child, target, nestedScrollAxes, ViewCompat.TYPE_TOUCH);
}
@Override
public boolean onStartNestedScroll(View child, View target, int axes, int type) {
boolean handled = false;
final int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
final View view = getChildAt(i);
if (view.getVisibility() == View.GONE) {
// If it's GONE, don't dispatch
continue;
}
final LayoutParams lp = (LayoutParams) view.getLayoutParams();
final Behavior viewBehavior = lp.getBehavior();
if (viewBehavior != null) {
final boolean accepted = viewBehavior.onStartNestedScroll(this, view, child,
target, axes, type);
handled |= accepted;
lp.setNestedScrollAccepted(type, accepted);
} else {
lp.setNestedScrollAccepted(type, false);
}
}
return handled;
}
複製代碼
CoordinatorLayout中的onStartNestedScroll方法基本都會調用到每一個子View的Behavior中相應的方法中去。
關於Nested嵌套滾動機制能夠看看下面這篇博客。
嵌套滾動機制NestedScrollingParent2和NestedScrollingChild2的各個回調方法調用流程以下圖所示：
上圖列出來手指從按下到擡起時的整個流程，固然這些都是在子View的onTouchEvent()中完成的，因此父View必定不能攔截子View的事件，不然這套機制就失效了。
除此以外，箭頭的左邊分別都是NestedScrollingChild2中的各類方法，右邊則是NestedScrollingParent2對應的方法。使用時，通常是子View經過dispatchXXX()來通知父View，而後父View經過onXXX()來進行迴應。
方法調用的前後時機也有區別，對應到上圖中，圖越往下，調用的時機越晚。
AppBarLayout中的Behavior
接着咱們來看看AppBarLayout中的Behavior，ApprBarLayout的默認Behavior就是AppBarLayout.Behavior這個類，而AppBarLayout.Behavior繼承自HeaderBehavior，HeaderBehavior又繼承自ViewOffsetBehavior，這裏先總結一下兩個類的做用。
- ViewOffsetBehavior：該Behavior主要運用於View的移動，從名字就能夠看出來，該類中提供了上下移動，左右移動的方法。
- HeaderBehavior：該類主要用於View處理觸摸事件以及觸摸後的fling事件。
因爲上面兩個類功能的實現，使得AppBarLayout.Behavior具備了同時移動自己以及處理觸摸事件的功能。
public boolean onTouchEvent(CoordinatorLayout parent, V child, MotionEvent ev) {
...
switch (ev.getActionMasked()) {
...
case MotionEvent.ACTION_MOVE: {
final int activePointerIndex = ev.findPointerIndex(mActivePointerId);
if (activePointerIndex == -1) {
return false;
}
final int y = (int) ev.getY(activePointerIndex);
int dy = mLastMotionY - y;
if (!mIsBeingDragged && Math.abs(dy) > mTouchSlop) {
mIsBeingDragged = true;
if (dy > 0) {
dy -= mTouchSlop;
} else {
dy += mTouchSlop;
}
}
if (mIsBeingDragged) {
mLastMotionY = y;
// We're being dragged so scroll the ABL scroll(parent, child, dy, getMaxDragOffset(child), 0); } break; } case MotionEvent.ACTION_UP: if (mVelocityTracker != null) { mVelocityTracker.addMovement(ev); mVelocityTracker.computeCurrentVelocity(1000); float yvel = mVelocityTracker.getYVelocity(mActivePointerId); fling(parent, child, -getScrollRangeForDragFling(child), 0, yvel); } ... return true; } 複製代碼
咱們來看onTouchEvent的方法，主要邏輯仍是在ACTION_MOVE中，能夠看到在滑動過程當中調用了scroll(...)方法，scroll(...)方法在HeaderBehavior中進行實現，最終調用到了額setHeaderTopBottomOffset(...)方法，該方法在AppBarLayout.Behavior中進行了重寫，因此，咱們直接看AppBarLayout.Behavior中的源碼便可：
@Override
//newOffeset傳入了dy，也就是咱們手指移動距離上一次移動的距離，
//minOffset等於AppBarLayout的負的height，maxOffset等於0。
int setHeaderTopBottomOffset(CoordinatorLayout coordinatorLayout,
AppBarLayout appBarLayout, int newOffset, int minOffset, int maxOffset) {
final int curOffset = getTopBottomOffsetForScrollingSibling();//獲取當前的滑動Offset
int consumed = 0;
//AppBarLayout滑動的距離若是超出了minOffset或者maxOffset，則直接返回0
if (minOffset != 0 && curOffset >= minOffset && curOffset <= maxOffset) {
//矯正newOffset，使其minOffset<=newOffset<=maxOffset
newOffset = MathUtils.clamp(newOffset, minOffset, maxOffset);
//因爲默認沒設置Interpolator，因此interpolatedOffset=newOffset;
if (curOffset != newOffset) {
final int interpolatedOffset = appBarLayout.hasChildWithInterpolator()
? interpolateOffset(appBarLayout, newOffset)
: newOffset;
//調用ViewOffsetBehvaior的方法setTopAndBottomOffset(...)，最終經過
//ViewCompat.offsetTopAndBottom()移動AppBarLayout
final boolean offsetChanged = setTopAndBottomOffset(interpolatedOffset);
//記錄下消費了多少的dy。
consumed = curOffset - newOffset;
//沒設置Interpolator的狀況， mOffsetDelta永遠=0
mOffsetDelta = newOffset - interpolatedOffset;
....
//分發回調OnOffsetChangedListener.onOffsetChanged(...)
appBarLayout.dispatchOffsetUpdates(getTopAndBottomOffset());
updateAppBarLayoutDrawableState(coordinatorLayout, appBarLayout, newOffset,
newOffset < curOffset ? -1 : 1, false);
}
...
return consumed;
}
複製代碼
AppBarLayout中移動主要就是這部分邏輯了，經過setTopAndBottomOffset()來達到了移動咱們的AppBarLayout，那麼這裏AppBarLayout就能夠跟着手上下移動了。
RecycleView中的Behavior
那麼接下來咱們看看RecycleView在CoordinatorLayout中如何是移動的？
上面講了AppBarLayout是如何經過Behavior來移動的，咱們在上面佈局文件中指定了ViewPager的Behavior。
app:layout_behavior="@string/appbar_scrolling_view_behavior"
複製代碼
這個"appbar_scrolling_view_behavior"其實就是ScrollingViewBehavior，ScrollingViewBehavior也繼承自ViewOffsetBehavior，咱們在上下移動AppBarLayout的時候，下面的RecycleView也是須要跟着移動的，它上下移動就是靠這個來ScrollingViewBehavior來實現的。
在閱讀ScrollingViewBehavior源碼中發現其實現了以下方法：
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
// We depend on any AppBarLayouts
return dependency instanceof AppBarLayout;
}
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child,
View dependency) {
offsetChildAsNeeded(parent, child, dependency);
return false;
}
複製代碼
這樣咱們這個RecycleView依賴於AppBarLayout，在AppBarLayout移動的過程當中，RecycleView會隨着AppBarLayout的移動回調onDependentViewChanged(...)方法，進而調用offsetChildAsNeeded(parent, child, dependency)。
用這麼多篇幅主要講了CoordinatorLayout如何協調AppBarLayout和RecycleView來上下滾動的，接着回到剛開始咱們要討論那個動畫抖動問題。
其實形成這個的緣由主要是AppBarLayout的fling操做和RecycleView聯動形成的問題。
在AppBarLayout的Behavior中的onTouchEvent()事件中處理了fling事件：
public boolean onTouchEvent(CoordinatorLayout parent, V child, MotionEvent ev) {
...
case MotionEvent.ACTION_UP:
if (mVelocityTracker != null) {
mVelocityTracker.addMovement(ev);
mVelocityTracker.computeCurrentVelocity(1000);
float yvel = mVelocityTracker.getYVelocity(mActivePointerId);
fling(parent, child, -getScrollRangeForDragFling(child), 0, yvel);
}
...
return true;
}
複製代碼
在fling的方法中使用OverScroller來模擬進行fling操做，最終會調到setHeaderTopBottomOffset(...)來使AppBarLayout進行fling的滑動操做。
在絕大部分滑動邏輯中，這樣處理是正確的，可是若是在AppBarLayout在fling的時候主動滑動RecyclerView，那麼就會形成動畫抖動的問題了。
在當前狀況下，RecyclerView滑動到頭了，那麼就會把未消費的事件經過NestedScrollingChild2交付由CoordinatorLayout(實現了NestedScrollingParent2)處理，parent又最終交付由AppBarLayout.Behavior進行處理的，其中調用的方法以下：
@Override
public void onNestedScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child,
View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed,
int type) {
if (dyUnconsumed < 0) {
// If the scrolling view is scrolling down but not consuming, it's probably be at // the top of it's content
scroll(coordinatorLayout, child, dyUnconsumed,
-child.getDownNestedScrollRange(), 0);
}
}
複製代碼
這裏的scroll方法最終會調用setHeaderTopBottomOffset(...)，因爲兩次分別觸摸在AppBarLayout和RecyclerView的方向不一致，致使了最終的抖動的效果。
解決方式也很簡單,只要在CoordinatorLayout的onInterceptedTouchEvent()中中止AppBarLayout的fling操做就能夠了，直接操做的對象就是AppBarLayout中的Behavior，該Behavior繼承自HeaderBehavior，而fling操做由OverScroller產生，因此自定義一個FixedBehavior：
public class FixedBehavior extends AppBarLayout.Behavior {
private OverScroller mOverScroller;
public FixedBehavior() {
super();
}
public FixedBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public void onAttachedToLayoutParams(@NonNull CoordinatorLayout.LayoutParams params) {
super.onAttachedToLayoutParams(params);
}
@Override
public void onDetachedFromLayoutParams() {
super.onDetachedFromLayoutParams();
}
@Override
public boolean onTouchEvent(CoordinatorLayout parent, AppBarLayout child, MotionEvent ev) {
if (ev.getAction() == MotionEvent.ACTION_UP) {
reflectOverScroller();
}
return super.onTouchEvent(parent, child, ev);
}
/**
*
*/
public void stopFling() {
if (mOverScroller != null) {
mOverScroller.abortAnimation();
}
}
/**
* 解決AppbarLayout在fling的時候，再主動滑動RecyclerView致使的動畫錯誤的問題
*/
private void reflectOverScroller() {
if (mOverScroller == null) {
Field field = null;
try {
field = getClass().getSuperclass()
.getSuperclass().getDeclaredField("mScroller");
field.setAccessible(true);
Object object = field.get(this);
mOverScroller = (OverScroller) object;
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
}
}
複製代碼
而後在重寫CoordinatorLayout，暴露一個接口：
public class CustomCoordinatorLayout extends CoordinatorLayout {
private OnInterceptTouchListener mListener;
public void setOnInterceptTouchListener(OnInterceptTouchListener listener) {
mListener = listener;
}
public CustomCoordinatorLayout(Context context) {
super(context);
}
public CustomCoordinatorLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomCoordinatorLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
if (mListener != null) {
mListener.onIntercept();
}
return super.onInterceptTouchEvent(ev);
}
public interface OnInterceptTouchListener {
void onIntercept();
}
}
複製代碼
接着在接口中處理滑動問題便可：
coordinatorLayout.setOnInterceptTouchListener {
//RecyclerView滑動的時候禁止AppBarLayout的滑動
if (customBehavior != null) {
customBehavior!!.stopFling()
}
}
複製代碼
第二，回彈問題
問題場景描述，咱們反覆上下滑動AppBarLayout的時候，能夠看到AppBarLayout在滑出屏幕外以後又反彈回去了，並且當你滑動的加速度很大的時候，這個反彈的幅度也會跟着變大。
這個問題形成的緣由是由於在手指向上滑動後形成RecyclerView的fling操做執行，具體的代碼在RecyclerView內部類ViewFlinger中。
我使用Android Studio中的Profiler抓取了一下當出現反彈問題的時候出現的方法調用堆棧以下所示：
發現RecyclerView中ViewFlinger調用後，接着觸發了HeaderBehavior中的FlingRunnable。而ViewFling中會調用dispatchNestedScroll(...)方法，RecyclerView做爲CoordinatorLayout的子View，它經過嵌套滾動的機制又會調用到CoordinatorLayout中的onNestedScroll，這裏主要就是經過AppBarLayout的Behavior中的方法setHeaderTopBottomOffset來實現AppBarLayout的滾動，後面會發現屢次setHeaderTopBottomOffset的調用，其實目前看到這裏，並不太肯定形成這個問題的具體緣由是啥，感受上是由於RecyclerView的滑動和CoordinatorLayout的滑動衝突致使了反彈效果的出現。
因而嘗試了下面的解決方法：
coordinatorLayout.setOnInterceptTouchListener {
mRecyclerView.stopScroll()
}
複製代碼
試了這個方法發現果真有效。
另外，我在寫demo的時候發現，這個問題在support-27是存在的，在support-28 Google已經修復過了。
我嘗試過看看support-28裏面的都有哪些改動，想看看Google是如何修復的。看了下Google的release note並無說起，若是從Google的commit history來看實在頁看不出來啥，暫時也沒有個具體的緣由。
後面能夠將support-27和support-28的source下載下來，而後使用Beyond Compare來看看具體的diff改動是在哪。
- 1. CoordinatorLayout+TabLayout在Fragment中使用遇到的問題
- 2. 使用Jgit操做git過程當中遇到的問題
- 3. 使用API過程當中遇到的問題及解決
- 4. CoordinatorLayout的使用（四）——經過AppBarLayout源碼分析聯動機制
- 5. CoordinatorLayout的使用
- 6. 使用CoordinatorLayout和CollapsingToolbarLayout遇到Toolbar的title顯示異常問題及解決
- 7. AS調試以及使用過程當中遇到的問題記錄
- 8. 使用MFC過程當中遇到的問題以及解決方法(二)
- 9. Android Studio使用過程當中遇到的問題以及解決方案
- 10. Webstrom 使用過程當中遇到的問題以及解決方案
- 更多相關文章...
- • ARP協議的工作機制詳解 - TCP/IP教程
- • TCP協議的工作機制 - TCP/IP教程
- • 漫談MySQL的鎖機制
- • 互聯網組織的未來：剖析GitHub員工的任性之源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CoordinatorLayout+TabLayout在Fragment中使用遇到的問題
- 2. 使用Jgit操做git過程當中遇到的問題
- 3. 使用API過程當中遇到的問題及解決
- 4. CoordinatorLayout的使用（四）——經過AppBarLayout源碼分析聯動機制
- 5. CoordinatorLayout的使用
- 6. 使用CoordinatorLayout和CollapsingToolbarLayout遇到Toolbar的title顯示異常問題及解決
- 7. AS調試以及使用過程當中遇到的問題記錄
- 8. 使用MFC過程當中遇到的問題以及解決方法(二)
- 9. Android Studio使用過程當中遇到的問題以及解決方案
- 10. Webstrom 使用過程當中遇到的問題以及解決方案