实现列表悬浮标签“顶上去”的效果

最新推荐文章于 2023-11-10 10:48:53 发布

原创最新推荐文章于 2023-11-10 10:48:53 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Android #悬浮标签 #悬浮 #动画 #列表

教程同时被 2 个专栏收录

22 篇文章

订阅专栏

自定义控件

11 篇文章

订阅专栏

本文介绍了一种在列表中实现顶部标签悬浮并跟随滚动切换效果的方法。通过在RecyclerView中增加额外视图，并利用addOnScrollListener监听滑动状态，实现顶部标签跟随列表项变化而平滑切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列表顶部的标签悬浮大家应该都知道，但“顶上去”是个啥玩意？
看一下效果图就知道了，注意看顶部的悬浮标签切换时的效果：

这是我在之前一个自定义侧边索引栏的项目上修改的，对侧边索引栏的实现有兴趣的可以看一下之前的文章：自定义侧边快速索引栏

思路是这样子的：
- 布局里面增加一个和索引item长的一样的view，默认显示列表第一项的索引字母。
- 监听列表的滑动，当列表可见的第二项是索引item时，计算并更新悬浮view的Y坐标，让它处于索引item的上方。
- 监听列表的滑动，当列表可见第一项发生变化时，更新悬浮view显示的字母为当前可见第一项的索引字母。

感觉比想象中简单啊。可以看出逻辑都是在滑动事件里，我们用RecyclerView的addOnScrollListener方法监听列表的滑动事件，在监听器里面实现上面的逻辑。说的可能不是很好，看代码就知道多简单了。

监听器的代码如下：

class mScrollListener extends RecyclerView.OnScrollListener {

    private int mFlowHeight;
    private int mCurrentPosition = -1;

    @Override
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
        mFlowHeight = vFlow.getMeasuredHeight();
    }

    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        int firstVisibleItemPosition = layoutManager.findFirstVisibleItemPosition();
        View view = layoutManager.findViewByPosition(firstVisibleItemPosition + 1);

        if (view != null) {
            if (view.getTop() <= mFlowHeight && isItem(firstVisibleItemPosition + 1)) {
                vFlow.setY(view.getTop() - mFlowHeight);
            } else {
                vFlow.setY(0);
            }
        }

        if (mCurrentPosition != firstVisibleItemPosition) {
            mCurrentPosition = firstVisibleItemPosition;
            tvFlowIndex.setText(mList.get(mCurrentPosition).getFirstWord());
        }
    }

    /**
     * @param position 对应项的下标
     * @return 是否为标签项
     */
    private boolean isItem(int position) {
        return mAdapter.getItemViewType(position) == MainAdapter.VIEW_INDEX;
    }
}

这样就已经实现“顶上去的效果了”，妥妥的。

最后说明一下，这个代码是使用RecyclerView实现的，要是用ListView的话是有问题的。ListView的item使用getTop()方法，刚开始拿到的应该是item距离整个ListView最顶部的距离，要都是这样还好处理，但是复用item的时候这个值又发生了变化。
总之就是，在使用ListView的时候，我还没有好的实现方法。要是哪位知道怎么实现，希望可以留言分享一下，不胜感激！

源码地址