【MyAndroid】RecyclerView实现头部悬浮吸顶效果且可点击--100个经典UI设计模板(96/100)

lichong951

已于 2025-08-23 21:19:20 修改

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： android开发文章标签：交互设计 android UI

于 2022-03-20 10:01:14 首次发布

本文链接：https://blog.csdn.net/lichong951/article/details/123607894

android开发专栏收录该内容

44 篇文章

订阅专栏

本文详细介绍了如何在Android中实现一个带有悬浮头部的RecyclerView，包括使用StickyHeadContainer、RecyclerView.Adapter、StickyItemDecoration等组件，并提供了布局代码和关键代码片段。通过设置DataCallback来确保头部显示，同时提到了一个开源项目作为参考。

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

效果图如下：
在这里插入图片描述
代码大体结构
RecyclerView
LinearLayoutManager
RecyclerView.Adapter

自定义
StickyHeadContainer
OnStickyChangeListener
StickyItemDecoration

布局如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    android:id="@+id/content_main"
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">
    <android.support.constraint.Guideline
        android:id="@+id/gl_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="20dp" />
    <!--返回-->
    <ImageView
        android:layout_marginTop="33dp"
        android:id="@+id/iv_return"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="TODO"
        android:src="@color/black_22"
        app:layout_constraintStart_toStartOf="@id/gl_start"
        app:layout_constraintTop_toTopOf="parent" />
    <View
        android:id="@+id/view_divider"
        app:layout_constraintTop_toBottomOf="@id/iv_return"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:background="#F4F4F4"
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:layout_marginTop="11dp"
        ></View>
    <View
        android:id="@+id/view_bg_list"
        app:layout_constraintTop_toBottomOf="@id/view_divider"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="#FFF4F4F4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="12dp"
        ></View>
    <android.support.v7.widget.RecyclerView
        app:layout_constraintTop_toTopOf="@id/view_bg_list"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"

        android:id="@+id/recycler_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        tools:background="@color/colorAccent">

    </android.support.v7.widget.RecyclerView>

    <top.lc951.myandroid.recelerview.StickyHeadContainer
        app:layout_constraintTop_toTopOf="@id/view_bg_list"
        app:layout_constraintStart_toStartOf="parent"
        android:id="@+id/shc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

    </top.lc951.myandroid.recelerview.StickyHeadContainer>

</android.support.constraint.ConstraintLayout>

顶部可滚动核心代码如下

StickyHeadContainer

。。。
public void scrollChild(int offset) {
        if (mLastOffset != offset) {
            mOffset = offset;
            ViewCompat.offsetTopAndBottom(getChildAt(0), mOffset - mLastOffset);
        }
        mLastOffset = mOffset;
    }

    public int getChildHeight() {
        return getChildAt(0).getHeight();
    }

    public void onDataChange(int stickyHeadPosition) {
        if (mDataCallback != null && mLastStickyHeadPosition != stickyHeadPosition) {
            mDataCallback.onDataChange(stickyHeadPosition);
        }
        if (null == mDataCallback) {
            Log.w(TAG, "mDataCallback is null");
        }
        mLastStickyHeadPosition = stickyHeadPosition;
    }
    。。。

使用

StockActivity#initView()

。。。
final StickyHeadContainer container = (StickyHeadContainer) findViewById(R.id.shc);
        final TextView tvStockName = (TextView) container.findViewById(R.id.tv_stock_name);
        final CheckBox checkBox = (CheckBox) container.findViewById(R.id.checkbox);
        final TextView tvMore = (TextView) container.findViewById(R.id.tv_stock_more);
        final ImageView more = (ImageView) container.findViewById(R.id.iv_more);

        checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                。。。
            }
        });
        container.setDataCallback(new StickyHeadContainer.DataCallback() {
            @Override
            public void onDataChange(int pos) {
                mStickyPosition = pos;
                StockEntity.StockInfo item = mAdapter.getData().get(pos).getData();
                tvStockName.setText(item.stickyHeadName);
                checkBox.setChecked(item.check);
            }
        });
        more.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                。。。
            }
        });
        container.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
              。。。
            }
        });

        mRecyclerView =  findViewById(R.id.recycler_view);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(StockActivity.this, LinearLayoutManager.VERTICAL, false));
        StickyItemDecoration stickyItemDecoration = new StickyItemDecoration(container, RecyclerViewAdapter.TYPE_STICKY_HEAD);
        stickyItemDecoration.setOnStickyChangeListener(new OnStickyChangeListener() {
            @Override
            public void onScrollable(int offset) {
                container.scrollChild(offset);
                container.setVisibility(View.VISIBLE);
            }

            @Override
            public void onInVisible() {
                container.reset();
                container.setVisibility(View.INVISIBLE);
            }
        });
        mRecyclerView.addItemDecoration(stickyItemDecoration);
        mRecyclerView.addItemDecoration(new SpaceItemDecoration(mRecyclerView.getContext()));

        mAdapter = new StockAdapter(null);
        mAdapter.setItemClickListener(new OnItemClickListener<StockEntity.StockInfo>() {
            @Override
            public void onItemClick(View view, StockEntity.StockInfo data, int position) {
                if(data.getItemType() == RecyclerViewAdapter.TYPE_DATA) {
                    Toast.makeText(StockActivity.this, "点击了TYPE_DATA Item", Toast.LENGTH_SHORT).show();
                }else if(data.getItemType() == RecyclerViewAdapter.TYPE_STICKY_HEAD){
                    Toast.makeText(StockActivity.this, "点击了TYPE_STICKY_HEAD Item", Toast.LENGTH_SHORT).show();
                }
            }
        });
        。。。

RecyclerViewAdapter

。。。

    @Override
    public void onAttachedToRecyclerView(RecyclerView recyclerView) {
        FullSpanUtil.onAttachedToRecyclerView(recyclerView, this, TYPE_STICKY_HEAD);
    }

    @Override
    public void onViewAttachedToWindow(RecyclerViewHolder holder) {
        FullSpanUtil.onViewAttachedToWindow(holder, this, TYPE_STICKY_HEAD);
    }
。。。

（亲测）如果不设置 mDataCallback 则不显示头部悬浮吸顶

一定要进行下面的初始化设置

container.setDataCallback(new StickyHeadContainer.DataCallback() {
            @Override
            public void onDataChange(int pos) {
                mStickyPosition = pos;
                StockEntity.StockInfo item = mAdapter.getData().get(pos).getData();
                tvStockName.setText(item.stickyHeadName);
                checkBox.setChecked(item.check);
            }
        });

原因如下：
StickyHeadContainer# onDataChange(int stickyHeadPosition)

public void onDataChange(int stickyHeadPosition) {
        if (mDataCallback != null && mLastStickyHeadPosition != stickyHeadPosition) {
            mDataCallback.onDataChange(stickyHeadPosition);
        }
        if (null == mDataCallback) {
            Log.w(TAG, "mDataCallback is null");
        }
        mLastStickyHeadPosition = stickyHeadPosition;
    }