2021-06-21

CoordinatorLayout滑动抖动和回弹问题

问题场景：

因为项目的帖子详情页是个webview下面带评论的，原来设计的是用recyclerview，webview作为recyclerview的第一个item,评论部分作为其余的item，来实现这个功能。
上线后，有部分用户反馈，某些帖子当webview滑出屏幕，再滑回来后，webview白屏，内容消失了。经过查阅资料，发现当webview开启了硬件加速，在recyclerview中就有可能白屏，怀疑被回收了。我们在华为p系列手机，有过复现，关掉webview的硬件加速，确实bug消失了，但是页面极度卡顿。这里做过一些优化，比如，滑动时开启硬件加速，滑动结束后关闭硬件加速，虽然解决了滑动卡顿，但是效果并不好，会出现滑动的时候，页面空白，滑动停止的时候，突然内容被绘制出来，所以这个方案pass掉最后，下定决心，把webview从recyclerview中拿出来，使用CoordinatorLayou作为根父布局，Appbarlayout作为webview的父布局，recylerview在最下面，作为评论展示。
新的问题，这就出现了，因为webview高度过高，appbarlayout高度就过高了，滑动的时候会产生一个flying,这时候再快速反方向滑动，就会同时出现两个反向的flying，表现出来明显的抖动，而且当appbarlayout滑动到rang为接近0的时候，回弹也很明显。

---

## 布局展示

<com.gonlan.iplaymtg.view.ParentViewGroup
    android:id="@+id/parentVg"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.gonlan.iplaymtg.view.refresh.SmartRefreshLayout
            android:id="@+id/post_list_swipe"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.coordinatorlayout.widget.CoordinatorLayout
                android:id="@+id/coordinatorLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/white">

                <com.google.android.material.appbar.AppBarLayout
                    android:id="@+id/appBarLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/white"
                    android:orientation="vertical"
                    app:layout_behavior=".view.CustomBehavior"
                    app:elevation="0dp">

                    <include layout="@layout/item_web" />
                </com.google.android.material.appbar.AppBarLayout>

                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/post_list"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:descendantFocusability="blocksDescendants"
                    android:overScrollMode="never"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

            </androidx.coordinatorlayout.widget.CoordinatorLayout>
        </com.gonlan.iplaymtg.view.refresh.SmartRefreshLayout>

        <View
            android:id="@+id/top_placeholder_view"
            android:layout_width="match_parent"
            android:layout_height="10dp"
            android:visibility="gone" />

        <include
            layout="@layout/toolbar_new"
            android:layout_width="match_parent"
            android:layout_height="@dimen/dp_60"
            android:layout_below="@+id/top_placeholder_view"
            android:layout_marginTop="-1dp" />

        <include layout="@layout/article_bottom" />
    </RelativeLayout>

    <include layout="@layout/layout_right_list" />

</com.gonlan.iplaymtg.view.ParentViewGroup>

<include layout="@layout/post_more_layout" />

<ImageView
    android:id="@+id/no_topic_recover"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/topmenu"
    android:layout_centerInParent="true"
    android:contentDescription="@null"
    android:scaleType="fitCenter"
    android:src="@drawable/nav_load_error"
    android:visibility="gone" />

<include
    layout="@layout/release_post_review_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<include layout="@layout/web_dialog_loading" />

`

解决方案

问题差生的具体原因，这里就不分析了，因为是个解决bug的记录贴，原因网上一搜一大把，这里就不一一说明了。例如：

https://www.jianshu.com/p/7863310a4a6c

我们这里自定义个一AppBarLayout.Behavior，一定要区分support版本，因为support27和28之后版本的变量名称不一样了。

public class CustomBehavior extends AppBarLayout.Behavior {
    private static final int TYPE_FLING = 1;
    private boolean isFlinging;
    private boolean shouldBlockNestedScroll;

    public CustomBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onInterceptTouchEvent(CoordinatorLayout parent, AppBarLayout child, MotionEvent ev) {
        shouldBlockNestedScroll = isFlinging;
        switch (ev.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                //手指触摸屏幕的时候停止fling事件
                stopAppbarLayoutFling(child);
                break;
            default:
                break;
        }
        return super.onInterceptTouchEvent(parent, child, ev);
    }

    /**
     * 反射获取私有的flingRunnable 属性，考虑support 28以后变量名修改的问题
     * @return Field
     */
    private Field getFlingRunnableField() throws NoSuchFieldException {
        Class<?> superclass = this.getClass().getSuperclass();
        try {
            // support design 27及一下版本
            Class<?> headerBehaviorType = null;
            if (superclass != null) {
                headerBehaviorType = superclass.getSuperclass();
            }
            if (headerBehaviorType != null) {
                return headerBehaviorType.getDeclaredField("mFlingRunnable");
            }else {
                return null;
            }
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
            // 可能是28及以上版本
            Class<?> headerBehaviorType = superclass.getSuperclass().getSuperclass();
            if (headerBehaviorType != null) {
                return headerBehaviorType.getDeclaredField("flingRunnable");
            } else {
                return null;
            }
        }
    }

    /**
     * 反射获取私有的scroller 属性，考虑support 28以后变量名修改的问题
     * @return Field
     */
    private Field getScrollerField() throws NoSuchFieldException {
        Class<?> superclass = this.getClass().getSuperclass();
        try {
            // support design 27及一下版本
            Class<?> headerBehaviorType = null;
            if (superclass != null) {
                headerBehaviorType = superclass.getSuperclass();
            }
            if (headerBehaviorType != null) {
                return headerBehaviorType.getDeclaredField("mScroller");
            }else {
                return null;
            }
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
            // 可能是28及以上版本
            Class<?> headerBehaviorType = superclass.getSuperclass().getSuperclass();
            if (headerBehaviorType != null) {
                return headerBehaviorType.getDeclaredField("scroller");
            }else {
                return null;
            }
        }
    }

    /**
     * 停止appbarLayout的fling事件
     * @param appBarLayout
     */
    private void stopAppbarLayoutFling(AppBarLayout appBarLayout) {
        //通过反射拿到HeaderBehavior中的flingRunnable变量
        try {
            Field flingRunnableField = getFlingRunnableField();
            Runnable flingRunnable;
            if (flingRunnableField != null) {
                flingRunnableField.setAccessible(true);
                flingRunnable = (Runnable) flingRunnableField.get(this);
                if (flingRunnable != null) {
                    appBarLayout.removeCallbacks(flingRunnable);
                    flingRunnableField.set(this, null);
                }
            }

            Field scrollerField = getScrollerField();
            if (scrollerField != null) {
                scrollerField.setAccessible(true);
                OverScroller overScroller = (OverScroller) scrollerField.get(this);
                if (overScroller != null && !overScroller.isFinished()) {
                    overScroller.abortAnimation();
                }
            }
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
    }

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout parent, AppBarLayout child,
                                       View directTargetChild, View target,
                                       int nestedScrollAxes, int type) {
        stopAppbarLayoutFling(child);
        return super.onStartNestedScroll(parent, child, directTargetChild, target,
                nestedScrollAxes, type);
    }

    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout,
                                  AppBarLayout child, View target,
                                  int dx, int dy, int[] consumed, int type) {
        //type返回1时，表示当前target处于非touch的滑动，
        //该bug的引起是因为appbar在滑动时，CoordinatorLayout内的实现NestedScrollingChild2接口的滑动
        //子类还未结束其自身的fling
        //所以这里监听子类的非touch时的滑动，然后block掉滑动事件传递给AppBarLayout
        if (type == TYPE_FLING) {
            isFlinging = true;
        }
        if (!shouldBlockNestedScroll) {
            super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed, type);
        }
    }

    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child,
                               View target, int dxConsumed, int dyConsumed, int
                                       dxUnconsumed, int dyUnconsumed, int type) {
        if (!shouldBlockNestedScroll) {
            super.onNestedScroll(coordinatorLayout, child, target, dxConsumed,
                    dyConsumed, dxUnconsumed, dyUnconsumed, type);
        }
    }

    @Override
    public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, AppBarLayout abl,
                                   View target, int type) {
        super.onStopNestedScroll(coordinatorLayout, abl, target, type);
        isFlinging = false;
        shouldBlockNestedScroll = false;
    }

}

在appbarLayout中，使用这个Behavior,问题迎刃而解

 <com.google.android.material.appbar.AppBarLayout
                        android:id="@+id/appBarLayout"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@color/white"
                        android:orientation="vertical"
                        app:layout_behavior=".view.CustomBehavior"
                        app:elevation="0dp">

                        <include layout="@layout/item_web" />
                    </com.google.android.material.appbar.AppBarLayout>
                  

注意

网上查资料的时候，优选google。