【五种方式实现Android吸顶效果最全总结！】列表滑动到顶部固定顶部栏效果

如今许多app都会应用到的一种UI交互形式，列表滑动到顶部，固定顶部栏效果，我们也可以称作其为吸顶效果。比如微博、各大浏览器的首页信息流模块、我的页面的设计等。

微博评论的吸顶效果

本文将循序渐进的通过多种方式实现吸顶效果。大家择优选取适合自己的实现方式。实现效果如图:

demo实现

一、两个相同的顶部栏

写两个一模一样的固定悬浮栏，在一开始把外层固定栏先隐藏，当内层固定栏滑动到外层固定位置时，把内层固定栏隐藏，外层固定栏显示。

头部+内层悬浮栏+list 组成了scrollview

主要代码监听scrollview的滑动，隐藏显示内外悬浮窗

 scrollView.setScrollChangeListener(new MyScrollView.ScrollChangedListener() {
            @Override
            public void onScrollChangedListener(int x, int y, int oldX, int oldY) {
                if (y >= topHeight) {
                    //重点 通过距离变化隐藏内外固定栏实现
                    llOutsideFixed.setVisibility(View.VISIBLE);
                    insideFixedBar.setVisibility(View.GONE);
                    recyclerView.setNestedScrollingEnabled(true);
                } else {
                    llOutsideFixed.setVisibility(View.GONE);
                    insideFixedBar.setVisibility(View.VISIBLE);
                    recyclerView.setNestedScrollingEnabled(false);
                }
            }
        });

二、通过ListView

通过listview添加头部，当listview滑动到顶部将原本隐藏的头部布局显示出来。

 listView.setOnScrollListener(new AbsListView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {
            }
            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
                /* 判断ListView头部(mHeaderView)当前是否可见
                 * 来决定隐藏或显示浮动栏(mFloatBar)*/
                if (firstVisibleItem >= 1) {
                    flOutSideBar.setVisibility(View.VISIBLE);
                } else {
                    flOutSideBar.setVisibility(View.GONE);
                }
            }
        });

这种方式需要写重复布局，事件监听，当固定布局带有状态时，还要将两个状态同这种方式实现的根本其实也是很方式一相同，也需要引入两个相同的顶部固定栏，相比方式一不同的是：

方式二滑动监听通过listview自带的setOnScrollListener即可，方式一需要暴露接口提供滑动位移变化值。
当存在滑动的view时，方式二不需要处理冲突，方式一需要冲突处理。
布局的引入:外部悬浮窗和头部布局，listview通过addHeaderView引入即可。管理起来方便。

方式一和方式二的缺点就是:

需要写两个相同的xml文件以及重复写相应点击事件的逻辑。
逻辑复杂时，需要同步固定悬浮窗的状态，在业务发生变化的时候可能需要同时去改动至少两处代码，增加出错的概率。

三、使用一个顶部栏用一个空布局动态增删顶部栏来实现。

这种方式的实现方式就是对第一种实现方式的简单优化，其他基本一致。

大体思路:将方式一的两个顶部栏变成一个，利用removeView和addView根据坐标点在页面滑动的时候动态的把固定栏在内外部切换。在scrollview外部添加一个空的layout，当滑动到指定的点，就将内层悬浮窗布局移除，添加到外层的空的布局。这样就解决了要同步状态和写两个相同的xml布局的问题了。

 scrollView.setScrollChangeListener(new MyScrollView.ScrollChangedListener() {
            @Override
            public void onScrollChangedListener(int x, int y, int oldX, int oldY) {
                if (y >= topHeight) {
                    if (rlInsideFixed.getParent() != llFixed) {
                        insideFixedBarParent.removeView(rlInsideFixed);
                        llFixed.addView(rlInsideFixed);
                        recyclerView.setNestedScrollingEnabled(true);

                    }
                } else {
                    if (rlInsideFixed.getParent() != insideFixedBarParent) {
                        llFixed.removeView(rlInsideFixed);
                        insideFixedBarParent.addView(rlInsideFixed);
                        recyclerView.setNestedScrollingEnabled(false);
                    }
                }
            }
        });

方式三是动态的增加和移除view，缺点是当包裹内容布局中带有滑动特性的View（ListView，RecyclerView等)，我们需要额外处理滑动冲突，并且这种包裹方式，会使得它们的缓存模式失效。

四、借助android5.0的新特性 CoordinatorLayout+AppbarLayout+ CollapsingToolbarLayout

首先要使用android5.0的material design风格我们需要引入以下依赖

    implementation 'com.android.support:design:x.+'

然后依次介绍这几个UI的功能

CoordinatorLayout 顶层布局类似relativelayout、linearlayout等，不同的是它可以协调子view之间的交互。产生联动的效果。子view通过app:layout_behavior 指定相应的行为。
AppBarLayout 是一个垂直布局的 LinearLayout，它主要是为了实现 “Material Design” 风格的标题栏的特性，比如：滚动。可以响应用户的手势操作，但是必须在CoordinatorLayout下使用，否则会有许多功能使用不了。
AppBarLayout里面的View，是通过app:layout_scrollFlags属性来控制滑动，其中有4种Flag的类型.

Scroll：向下滚动时,被指定了这个属性的View会被滚出屏幕范围直到完全不可见的位置。
enterAlways：向上滚动时,这个View会随着滚动手势出现,直到恢复原来的位置。
enterAlwaysCollapsed：当视图已经设置minHeight属性又使用此标志时，视图-只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed：滚动退出屏幕，最后折叠在顶端。

CollapsingToolbarLayout 折叠布局用来协调AppBarLayout来实现滚动隐藏ToolBar的效果。继承自 FrameLayout，它是用来实现 Toolbar 的折叠效果，一般它的直接子 View 是 Toolbar，当然也可以是其它类型的 View。通过设置layout_collapseMode 控制折叠属性。（官方说CollapsingToolbarLayout主要是配合Toolbar而设计的。但如果我们不需要也可以不加toolbar。只不过在需要toolbar的时候配合CollapsingToolbarLayout效果更佳。）

不设置跟随NestedScrollView的滑动一起滑动,NestedScrollView滑动多少距离他就会跟着走多少距离
parallax 视差效果 layout_collapseParallaxMultiplier视差因子 0~1之间取值
pin 固定效果，在折叠的时候最后固定在顶端。在滑动过程中,此自布局会固定在它所在的位置不动,直到CollapsingToolbarLayout全部折叠或者全部展开。

<?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"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">


        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:statusBarScrim="@android:color/transparent">

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

        </android.support.design.widget.CollapsingToolbarLayout>

        <include layout="@layout/inside_fixed_bar" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        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/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#d2ebaf"/>

    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

这种方式是最推荐的。但这个既不用处理滑动冲突，也不会有缓存问题。使用起来也很流畅。

五、通过重写RecyclerView的分割线ItemDecoration来实现。

ItemDecoration是RecyclerView下的抽象方法,允许给特定的item视图添加特性的绘制以及布局间隔。它可以用来实现item之间的分割线，高亮，分组边界等。三个重要的方法：getItemOffsets、onDraw、onDrawOver（自行了解）

实现思路:比如我们之前放的微博评论的吸顶效果图，首先是微博内容，我们把它当成是RecyclerView的HeaderView即可，也是Item的一项，然后下面的评论列表就是基础的RecyclerView使用了，然后中间固定的布局,就是ItemDecoration里的getItemOffsets、onDraw、onDrawOver这三个方法来配合实现了。在onDraw方法里判断是否是列表的第一项除了头部布局，如果是就绘制顶部栏，不是，绘制分割线。在onDrawOver里判断是否是头部布局，如果是不做处理，不是就在视图可见的第一项上绘制顶部栏。getItemOffsets是绘制的边距，也是分是不是头部项的情况去判断。如果我们只想简单的绘制分割线，getItemOffsets让item之间空出间隙，然后再调用onDraw在这个间隙上填充颜色即可。

public class FixedBarDecoration extends RecyclerView.ItemDecoration {

    private int mItemHeaderHeight;
    private Paint mLinePaint;
    private Paint mItemHeaderPaint;
    private Paint mTextPaint;
    private Rect mTextRect;

    public FixedBarDecoration(Context context) {
        
        mItemHeaderHeight = ViewUtils.dip2px(context, 40);

        mTextRect = new Rect();
        mItemHeaderPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mItemHeaderPaint.setColor(Color.BLUE);

        mLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mLinePaint.setColor(Color.GRAY);

        mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint.setTextSize(46);
        mTextPaint.setColor(Color.WHITE);
    }


    //吸顶效果的主要实现方法
    @Override
    public void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        if (parent.getAdapter() instanceof NormalAdapter) {
            NormalAdapter adapter = (NormalAdapter) parent.getAdapter();
            int position = ((LinearLayoutManager) (parent.getLayoutManager())).findFirstVisibleItemPosition();
            if (adapter.isHasHeader() && position == 0) {
                return;
            }
            //如果不是头部view 那就直接在当前第一个可见的item顶部画一个固定栏即可
//            View view = parent.findViewHolderForAdapterPosition(position).itemView;
            c.drawRect(0, 0, parent.getWidth(), mItemHeaderHeight, mItemHeaderPaint);
            mTextPaint.getTextBounds("悬浮固定栏", 0, "悬浮固定栏".length(), mTextRect);
            c.drawText("悬浮固定栏", parent.getWidth() / 2 - mTextRect.width() / 2, mItemHeaderHeight / 2 + mTextRect.height() / 2, mTextPaint);

        }
    }

    //绘制分割线和固定栏
    @Override
    public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        if (parent.getAdapter() instanceof NormalAdapter) {
            NormalAdapter adapter = (NormalAdapter) parent.getAdapter();
            int count = parent.getChildCount();
            for (int i = 0; i < count; i++) {
                View view = parent.getChildAt(i);
                int position = parent.getChildLayoutPosition(view);
                boolean isFirstItem = adapter.isFirstItem(position);
                if (isFirstItem) {
                    c.drawRect(0, view.getTop() - mItemHeaderHeight, parent.getWidth(), view.getTop(), mItemHeaderPaint);
                    mTextPaint.getTextBounds("悬浮固定栏", 0, "悬浮固定栏".length(), mTextRect);
                    c.drawText("悬浮固定栏", parent.getWidth() / 2 - mTextRect.width() / 2, (view.getTop() - mItemHeaderHeight) + mItemHeaderHeight / 2 + mTextRect.height() / 2, mTextPaint);
                } else {
                    c.drawRect(0, view.getTop() - 1, parent.getWidth(), view.getTop(), mLinePaint);
                }
            }
        }
    }

    @Override
    public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        if (parent.getAdapter() instanceof NormalAdapter) {
            NormalAdapter adapter = (NormalAdapter) parent.getAdapter();
            int position = parent.getChildLayoutPosition(view);
            boolean isFirstItem = adapter.isFirstItem(position);
            if (isFirstItem) {
                outRect.top = mItemHeaderHeight;
            } else {
                outRect.top = 1;
            }

        }
    }

}

这种方式的缺点就是如果顶部栏的布局复杂，难以绘制，以及顶部栏的监听事件添加复杂。

六、扩展:分组加吸顶效果

思路:当我们要实现分组+吸顶效果，为了实现顶部栏固定不动，可以利用onDrawOver在RecyclerView的上绘制一个和头部布局一模一样的布局呢，让它覆盖住了第一个头布局，在视觉上我们是不会有所察觉的，然后当列表滑动的时候，其实“原来的头布局”早已经滑动走了，留下的其实是我们绘制的固定布局而已，等到下一个头部布局“碰头”的时候，让它随着滑动的速度慢慢改变布局的高度，当布局高度为0的时候，也就是被顶出去的时候，然后再让高度改变回来，覆盖住第二个布局，然后不断重复以上步骤即可。
参考文章吸顶+分组效果的实现
第五和第六效果图较大，可从下方github链接查看详情

参考文章:
View事件体系之View坐标系图示理解
coordinatorLayout使用总结篇，看完这篇完全可以开发5.0的高级特效了

最重要的源码地址点这里

给个爱心赞❤️

最后编辑于：2021.03.10 19:24:03

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,362评论 5赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,330评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,247评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,560评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,580评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,569评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,929评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,587评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,840评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,596评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,678评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,366评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,945评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,929评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,165评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,271评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,403评论 2赞 342

【五种方式实现Android吸顶效果 最全总结！】列表滑动到顶部 固定顶部栏效果

本文将循序渐进的通过多种方式实现吸顶效果。大家择优选取适合自己的实现方式。 实现效果如图:

一、两个相同的顶部栏

写两个一模一样的固定悬浮栏，在一开始把外层固定栏先隐藏，当内层固定栏滑动到外层固定位置时，把内层固定栏隐藏，外层固定栏显示。

头部+内层悬浮栏+list 组成了scrollview

二、通过ListView

通过listview添加头部，当listview滑动到顶部将原本隐藏的头部布局显示出来。

这种方式需要写重复布局，事件监听，当固定布局带有状态时，还要将两个状态同这种方式实现的根本其实也是很方式一相同，也需要引入两个相同的顶部固定栏，相比方式一不同的是：

方式一和方式二的缺点就是:

三、使用一个顶部栏 用一个空布局动态增删顶部栏来实现。

四、借助android5.0的新特性 CoordinatorLayout+AppbarLayout+ CollapsingToolbarLayout

五、 通过重写RecyclerView的分割线ItemDecoration来实现。

六、扩展:分组加吸顶效果

最重要的源码地址点这里

给个爱心赞❤️

推荐阅读更多精彩内容

【五种方式实现Android吸顶效果最全总结！】列表滑动到顶部固定顶部栏效果

本文将循序渐进的通过多种方式实现吸顶效果。大家择优选取适合自己的实现方式。实现效果如图:

三、使用一个顶部栏用一个空布局动态增删顶部栏来实现。

五、通过重写RecyclerView的分割线ItemDecoration来实现。