自定义AppBarLayout,让它Fling起来更流畅

我们知道,Desgin包中的AppBarLayout配合CollapsingToolbarLayout可以实现折叠效果。但是顶部在快速滑动到折叠状态时,底部的NestedScrollChild不会因为惯性跟着滑动,整个滑动过程瞬间停止,给人一种很不流畅的感觉。为了能让我们的AppBarLayout能Fling更流畅,我们需要在重新修改源码,定制一个FlingAppBarLayout,能够实现类似饿了么首页效果


饿了么首页效果

思路

我们知道AppBarLayout之所以能够有折叠效果,是因为有一个默认的Behavior,而且AppBarLayout在快速滑动时,布局也能够快速展开和收缩,因此可以猜测内部有可能处理了Fling事件。通过源码,找到对应的Behavior,它继承自HeaderBehavior,通过onTouchEvent方法,找到了对应对于Fling事件的处理

    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);
                }

进入fling方法,找到了scroller对象,AppBarLayout的快速滑动效果就是通过它来实现的。至于为什么AppBarLayout向上快速滑动到边界时,突然停止,没有惯性滑动,是因为scroller在调用fling方法时设置了minOffset(向上滑动边界)

    final boolean fling(CoordinatorLayout coordinatorLayout, V layout, int minOffset,
            int maxOffset, float velocityY) {
        if (mFlingRunnable != null) {
            layout.removeCallbacks(mFlingRunnable);
            mFlingRunnable = null;
        }

        if (mScroller == null) {
            mScroller = new OverScroller(layout.getContext());
        }

        mScroller.fling(
                0, getTopAndBottomOffset(), // curr
                0, Math.round(velocityY), // velocity.
                0, 0, // x
                minOffset, maxOffset); // y

        if (mScroller.computeScrollOffset()) {
            mFlingRunnable = new FlingRunnable(coordinatorLayout, layout);
            ViewCompat.postOnAnimation(layout, mFlingRunnable);
            return true;
        } else {
            onFlingFinished(coordinatorLayout, layout);
            return false;
        }
    }

而具体的view的移动,则是通过FlingRunnable来实现。

 private class FlingRunnable implements Runnable {
        private final CoordinatorLayout mParent;
        private final V mLayout;

        FlingRunnable(CoordinatorLayout parent, V layout) {
            mParent = parent;
            mLayout = layout;
        }

        @Override
        public void run() {
            if (mLayout != null && mScroller != null) {
                if (mScroller.computeScrollOffset()) {
                    setHeaderTopBottomOffset(mParent, mLayout, mScroller.getCurrY());
                    // Post ourselves so that we run on the next animation
                    ViewCompat.postOnAnimation(mLayout, this);
                } else {
                    onFlingFinished(mParent, mLayout);
                }
            }
        }
    }

通过这个FlingRunnable类,我们知道AppBarLayout能快速展开和收缩,就是通过它实现的。

具体实现

首先,我们把design中的AppBarLayout源码复制到自己的package中,引入报红的相关文件,具体如下:


工程目录

其中ScrollItem,ReflectUtil,ViewPagerUtil为我们自己定义的,其他都是design包拷贝的。
通过前面三块代码,我们知道AppBarLayout的Fling效果是通过scroller实现的,滑动的边界时通过minOffset和maxOffset来控制的,当滑动的offset超出范围时,scroller调用computeScrollerOffset就为false,顶部view就停止移动了。

因此为了能让AppBarLayout在向上滑动到minOffset边界时不停止移动,把这个minOffset保存到FlingRunnable中,在scroller.fling方法中这个更小的offset,这个在滑动到minOffset时,computeScrollerOffset就不会为false,并且在FlingRunnable中因为有minOffset,我们可以在mScroller.computeScrollOffset里判断是否滑出边界,通过差值,继续滑动底部的可滑动布局。

  mScroller.fling(
                0, getTopAndBottomOffset(), // curr
                0, Math.round(velocityY), // velocity.
                0, 0, // x
                minOffset-5000, maxOffset); // 设置一个很大的值,在向上滑动时不会因为低于minOffset而停止滑动

在FlingRunnable中新增minOffset字段,run方法中,如果currY<minOffset表示AppBarLayout向上滑动值收缩状态,可以滑动底部布局了,scrollNext(),传入偏移量minOffset-currY

 class FlingRunnable implements Runnable {
        private final CoordinatorLayout mParent;
        private final V mLayout;
        private int minOffset;

        FlingRunnable(CoordinatorLayout parent, V layout, int min) {
            mParent = parent;
            mLayout = layout;
            minOffset = min;
        }
        @Override
        public void run() {
            if (mLayout != null && mScroller != null) {
                if (mScroller.computeScrollOffset()) {
                    int currY = mScroller.getCurrY();
                    if (currY < 0 && currY < minOffset) {
                        scrollNext(minOffset - currY);
                        setHeaderTopBottomOffset(mParent, mLayout, minOffset);
                    } else {
                        setHeaderTopBottomOffset(mParent, mLayout, currY);
                    }
                    // Post ourselves so that we run on the next animation
                    ViewCompat.postOnAnimation(mLayout, this);
                } else {
                    onFlingFinished(mParent, mLayout);
                }
            }
        }
    }

在构造FlingRunnable时传入minOffset

final boolean fling(CoordinatorLayout coordinatorLayout, V layout, int minOffset,
                        int maxOffset, float velocityY) {
        if (mFlingRunnable != null) {
            layout.removeCallbacks(mFlingRunnable);
            mFlingRunnable = null;
        }
        if (mScroller == null) {
            mScroller = new OverScroller(layout.getContext());
        }
        mScroller.fling(
                0, getTopAndBottomOffset(), // curr
                0, Math.round(velocityY), // velocity.
                0, 0, // x
                minOffset-5000, maxOffset); // y

        if (mScroller.computeScrollOffset()) {
            mFlingRunnable = new FlingRunnable(coordinatorLayout, layout, minOffset);
            ViewCompat.postOnAnimation(layout, mFlingRunnable);
            return true;
        } else {
           ...
        }
    }

接着就是具体scrollNext方法了,具体就是找到底部的NestedScrollingChild(如RecyclerView,NestedScrollView,ViewPager,主要是这三个)。
在FlingRunnable中新增ScrollItem字段用于处理scroll逻辑


    class FlingRunnable implements Runnable {
        private final CoordinatorLayout mParent;
        private final V mLayout;
        private int minOffset;
        private ScrollItem scrollItem;


        FlingRunnable(CoordinatorLayout parent, V layout, int min) {
            mParent = parent;
            mLayout = layout;
            minOffset = min;
            initNextScrollView(parent);
        }

        private void initNextScrollView(CoordinatorLayout parent) {
            int count = parent.getChildCount();
            for (int i = 0; i < count; i++) {
                View v = parent.getChildAt(i);
                CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) v.getLayoutParams();
                if (lp.getBehavior() instanceof AppBarLayout.ScrollingViewBehavior) {
                    scrollItem = new ScrollItem(v);
                }
            }
        @Override
        public void run() {
            if (mLayout != null && mScroller != null) {
                if (mScroller.computeScrollOffset()) {
                    int currY = mScroller.getCurrY();
                    if (currY < 0 && currY < minOffset) {
                        scrollItem.scroll(minOffset - currY); //处理逻辑在ScrollItem中
                        setHeaderTopBottomOffset(mParent, mLayout, minOffset);
                    } else {
                        setHeaderTopBottomOffset(mParent, mLayout, currY);
                    }
                    // Post ourselves so that we run on the next animation
                    ViewCompat.postOnAnimation(mLayout, this);
                } else {
                    onFlingFinished(mParent, mLayout);
                }
            }
        }
}

而在新增的ScrollItem中,我们来处理对应的scroll操作(NestedScrollView可以通过scrollTo,而RecyclerView则需要用LinearLayoutManager来控制了)

public class ScrollItem {
    private int type; //1: NestedScrollView   2:RecyclerView
    private WeakReference<NestedScrollView> scrollViewRef;
    private WeakReference<LinearLayoutManager> layoutManagerRef;

    public ScrollItem(View v) {
        findScrollItem(v);
    }

    /**
     * 查找需要滑动的scroll对象
     *
     * @param v
     */
    protected boolean findScrollItem(View v) {
        if (findCommonScroll(v)) return true;
        if (v instanceof ViewPager) {
            View root = ViewPagerUtil.findCurrent((ViewPager) v);
            if (root != null) {
                View child = root.findViewWithTag("fling");
                return findCommonScroll(child);
            }
        }
        return false;
    }

    private boolean findCommonScroll(View v) {
        if (v instanceof NestedScrollView) {
            type = 1;
            scrollViewRef = new WeakReference<NestedScrollView>((NestedScrollView) v);
            stopScroll(scrollViewRef.get());
            return true;
        }
        if (v instanceof RecyclerView) {
            RecyclerView.LayoutManager lm = ((RecyclerView) v).getLayoutManager();
            if (lm instanceof LinearLayoutManager) {
                LinearLayoutManager llm = (LinearLayoutManager) lm;
                type = 2;
                layoutManagerRef = new WeakReference<LinearLayoutManager>(llm);
                stopScroll((RecyclerView) v);
                return true;
            }
        }
        return false;
    }

    /**
     * 停止NestedScrollView滚动
     *
     * @param v
     */
    private void stopScroll(NestedScrollView v) {
        try {
            Field field = ReflectUtil.getDeclaredField(v, "mScroller");
            if (field == null) return;
            field.setAccessible(true);
            OverScroller scroller = (OverScroller) field.get(v);
            if (scroller != null) scroller.abortAnimation();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 停止RecyclerView滚动
     *
     * @param
     */
    private void stopScroll(RecyclerView rv) {
        try {
            Field field = ReflectUtil.getDeclaredField(rv, "mViewFlinger");
            if (field == null) return;
            field.setAccessible(true);
            Object obj = field.get(rv);
            if (obj == null) return;
            Method method = obj.getClass().getDeclaredMethod("stop");
            method.setAccessible(true);
            method.invoke(obj);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public void scroll(int dy) {
        if (type == 1) {
            scrollViewRef.get().scrollTo(0, dy);
        } else if (type == 2) {
            layoutManagerRef.get().scrollToPositionWithOffset(0, -dy);
        }
    }

}

至于ViewPager,因为getChildAt会有空值问题,这里是通过adapter获取fragment然后获取rootView做处理

public class ViewPagerUtil {
    public static View findCurrent(ViewPager vp) {
        int position = vp.getCurrentItem();
        PagerAdapter adapter = vp.getAdapter();
        if (adapter instanceof FragmentStatePagerAdapter) {
            FragmentStatePagerAdapter fsp = (FragmentStatePagerAdapter) adapter;
            return fsp.getItem(position).getView();
        } else if (adapter instanceof FragmentPagerAdapter) {
            FragmentPagerAdapter fp = (FragmentPagerAdapter) adapter;
            return fp.getItem(position).getView();
        }
        return null;
    }
}

这里暂时没做PagerAdapter的处理逻辑,ViewPager找到当前item界面rootView后,需要找到需要继续惯性滑动到RecyclerView或NestedScrollView,为方便查找,我们给fragment布局中需要滑动的组件添加tag:“fling”,这样就可以通过findViewWithTag("fling")找到它。
好了,基本的滑动逻辑处理完了,我们自己的AppBarLayout可以惯性fling了。会看ScrollItem代码,我加了stopScroll的逻辑。那是因为在底部recyclerView或NestedScrollView快速向下滑动至AppBarLayout展开,而这时在AppBarLayout想要快速向上滑动,应为底部正在滑动,导致两者冲突,不能正常向上滑动,所以AppBarLayout在向上快速滑动时,要停止底部滑动。通过NestedScrollView和RecyclerView的源码,我们找到控制滑动逻辑的OverScroller和ViewFlinger,我们可以通过反射来停止对应的滑动。

项目地址

FlingAppBarLayout
具体的效果在github上下载,工程还有关于SmartRefreshLayout兼容适配

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容