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

效果图如下：
在这里插入图片描述
代码大体结构
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;
    }

公开源码不渣

https://gitee.com/lc951/my-android
粘性头部可点击

参考

https://github.com/Mcflag/ExpandStickyRecyclerVIew

-------------------------------------------------------------------------------100个经典UI设计模板

自研产品推荐

历时一年半多开发终于smartApi-v1.0.0版本在2023-09-15晚十点正式上线
smartApi是一款对标国外的postman的api调试开发工具，由于开发人力就作者一个所以人力有限，因此v1.0.0版本功能进行精简，大功能项有：

  • api参数填写
  • api请求响应数据展示
  • PDF形式的分享文档
  • Mock本地化解决方案
  • api列表数据本地化处理
  • 再加上UI方面的打磨

为了更好服务大家把之前的公众号和软件激活结合，如有疑问请大家反馈到公众号即可，下个版本30%以上的更新会来自公众号的反馈。
嗯！先解释不上服务端原因，API调试工具的绝大多数时候就是一个数据模型、数据处理、数据模型理解共识的问题解决工具，所以作者结合自己十多年开发使用的一些痛点来打造的，再加上服务端开发一般是面向企业的，作者目前没有精力和时间去打造企业服务。再加上没有资金投入所以服务端开发会滞后，至于什么时候会进行开发，这个要看募资情况和用户反馈综合考虑。虽然目前国内有些比较知名的api工具了，但作者使用后还是觉得和实际使用场景不符。如果有相关吐槽也可以在作者的公众号里反馈蛤！
下面是一段smartApi使用介绍：
在这里插入图片描述

下载地址：

https://pan.baidu.com/s/1iultkXqeLNG4_eNiefKTjQ?pwd=cnbl

posted @   lichong951  阅读(81)  评论(0)  编辑  收藏  举报  
相关博文：
· 【MyAndroid】RecyclerView+cardView卡片叠层效果展示（3）--100个经典UI设计模板(98/100)
· 【MyAndroid】viewpage+cardView卡片楼层效果展示（1）--100个经典UI设计模板(98/100)
· Android Recyclerview适配器 加载头部 以及自定义View
· Android UI:RecyclerView 悬浮Item实现
· 安卓-RecyclerView
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛