Android 轻松实现 RecyclerView 悬浮条

在咱们在刷Instagram的动态时，你是否注意到这样一个小小的动效，就是当一条动态（以卡片形式呈现）向上滑动时，动态卡片的头部会始终悬浮在列表最上方，直到下一张动态卡片的头部将它顶掉并替换它悬浮着。言语可能说不清楚，就直接来看一下它的效果好了。

Instagram的悬浮条

综合我上面的文字描述加上这张Gif图，我想你们应该知道这是个什么样的效果了吧。那么不废话了，接下来我就来讲说一种很简单的实现方法吧。

思路

虽然实现起来炒鸡简单，但仍是花了我一个多小时的时间思考实现。先说说思考过程吧，那天中午，Instagram给我推了一条消息（哈，就是我最喜欢的偶像金泰妍更新了Ins），因而我就点进去看了，喜欢了以后就开始研究这个效果，我反复地上下滑这个列表，由于Ins的列表有滚动条，我就发现每次滚动条在那个悬浮条附近的时候就会特别短。看到这个现象，敏锐的你是否是察觉到了什么？没错，我感受这个就像是FrameLayout的效果，一个FrameLayout里按顺序有列表，悬浮条两个View，悬浮条覆盖在列表的上方，它在合适的时机更新本身的位置，在合适的时机更新本身的信息，而后看上去就像是一个悬浮的效果。

接下来咱们思考的核心就转移到了如何肯定并找到这个合适的时机。

再仔细观察上面的Gif图，咱们能够肯定当第二个列表项的头部距离列表顶端一个悬浮条的距离时，悬浮条随着列表的滑动改变自身的位置，从而看起来像是被顶掉的效果。画一张简单位置示意图

那么，数据更新的时机也很容易肯定，就是在悬浮条刚好彻底被顶掉的时候，更新本身的数据，并移动到列表顶部。

至于如何找到这个时机会在接下来的实现部分讲解。

实现

创建布局

如上面所言，就是一个简单的FrameLayout。

<FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v7.widget.RecyclerView android:id="@+id/feed_list" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" android:scrollbars="vertical" />

    <your-head-layout>
    ……
    </your-head-layout>
</FrameLayout>复制代码

注意这里FrameLayout的第二个child应该为你列表项要悬浮显示的布局。

找到时机

根据咱们的思路，咱们首先要找到第二个列表项的头部距离列表顶端一个悬浮条的距离时的那个时机，若是咱们能找到这个时机，那么第二个时机也至关于找出来了。

这里咱们使用的是RecyclerView来实现列表，咱们都知道RecyclerView的列表布局是由LayoutManager来肯定的，因为通常要实现悬浮条显示效果的列表通常都为线性列表，即咱们通常会使用LinearLayoutManager。经过LinearLayoutManager，咱们能够很方便的获取到RecyclerView中相应位置的View，这里咱们须要获取当前悬浮条数据来源的View和其下一个数据来源的View。这两个View有什么用呢？悬浮条显示的信息是来自第一个可见View的，而其下方的View正是第二个列表项，咱们能够获取到它的top值。好了接下来就真的很简单了，咱们只要给RecyclerView加一个ScrollListener，并在相应的回调里作以前咱们想好的事就ok了，来看一下代码

mFeedList.addOnScrollListener(new RecyclerView.OnScrollListener() {
    @Override
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
        super.onScrollStateChanged(recyclerView, newState);
        mSuspensionHeight = mSuspensionBar.getHeight();
    }

    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        View view = linearLayoutManager.findViewByPosition(mCurrentPosition + 1);
        if (view != null) {
            if (view.getTop() <= mSuspensionHeight) {
                mSuspensionBar.setY(-(mSuspensionHeight - view.getTop()));
            } else {
                mSuspensionBar.setY(0);
            }
        }

        if (mCurrentPosition != linearLayoutManager.findFirstVisibleItemPosition()) {
            mCurrentPosition = linearLayoutManager.findFirstVisibleItemPosition();
            mSuspensionBar.setY(0);

            updateSuspensionBar();
        }
    }
});复制代码

Tips：其中mCurrentPosition为悬浮条信息来自的那个列表项在RecyclerView的位置。还有这里的ScrollListener能够添加多个，在RecyclerView中会检查全部的ScrollListener并触发。

One more thing...

接下来，咱们还须要……开玩笑，哪来的One more thing，咱们已经完成了？什么？这么快？这么一点代码？恩，没错，就是只要这么一点代码就行了，咱们来看一下最后咱们实现的效果（固然最终效果的好坏仍是取决与你列表项的布局，好比在Ins里这个效果就很好看呢～）

结语

哈哈，是否是很简单呢，最后再说一下封装的事，原本我是想封装一下的，因为每一个人的列表布局都不同，数据更新方式也不同，就不封装了，是的，我水平不行，虽然我不想认可～不过代码真心特别少哦，源码地址：github.com/wuapnjie/Su…

但愿这篇文章能够对你有帮助，我也会继续努力的。

补充

上面这种状况咱们RecyclerView的Item是单一的，可是咱们的列表Item一般有不少种，只有在滑到咱们想要类型的Item时才须要更新咱们的悬浮条信息。好比很常见的通信录，在咱们滑到从A开头联系人滑到B开头联系人时，悬浮条的信息才从A变为B；再好比印象笔记的笔记列表，顶部的悬浮条是根据笔记的日期改变的。

那么，遇到这种状况咱们应该怎么简单修改代码来实现咱们需求呢？

其实很简单，思路已经由上面肯定了，只是咱们要让悬浮条移动的时机变化，变得更窄了，同时咱们要更新的数据内容也发生了变化（这固然须要咱们变换相应的布局）。

mFeedList.addOnScrollListener(new RecyclerView.OnScrollListener() {
    @Override
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
        super.onScrollStateChanged(recyclerView, newState);
        mSuspensionHeight = mSuspensionBar.getHeight();
    }

    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        //咱们只是简单的收窄了咱们让悬浮条移动的条件，这里就是ItemType必须对应时才发生移动
          if (adapter.getItemViewType(mCurrentPosition + 1) == MultiFeedAdapter.TYPE_TIME) {
            View view = linearLayoutManager.findViewByPosition(mCurrentPosition + 1);
            if (view != null) {
                if (view.getTop() <= mSuspensionHeight) {
                    mSuspensionBar.setY(-(mSuspensionHeight - view.getTop()));
                } else {
                    mSuspensionBar.setY(0);
                }
            }
        }

        if (mCurrentPosition != linearLayoutManager.findFirstVisibleItemPosition()) {
            mCurrentPosition = linearLayoutManager.findFirstVisibleItemPosition();
            mSuspensionBar.setY(0);

            updateSuspensionBar();
        }
    }
});复制代码

上面的代码咱们只要注意注释处，其余的和以前给出的相同。

总之，虽然你们的需求可能不一样，但万变不离其宗。只要掌握了思路，什么需求都不怕。

Github 上已增长相应代码，最后看一下咱们的效果，只在时间变化时才移动悬浮条