RecyclerView 悬浮吸顶效果实现,支持数据绑定及Touch事件

本文介绍了一种在Android中实现悬浮吸顶效果的方法,通过自定义Adapter和ViewHolder,结合ViewPropertyAnimator增强视觉效果,适用于联系人列表、商品分类等场景。

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

诸如联系人列表、分类页商品类表等分组场景,都可能需要悬浮吸顶的效果。Android 官方并未提供原生的组件来实现这个功能,因此需要我们自定义实现。

网上看到的基本实现思路都是通过 ItemDecoration ,在滑动过程中去根据当前滑动位置,绘制吸顶的视图。

如果只是需要简单的绘制,确实通过这个方式要简单的多。但是通过这种方式无法支持 Touch 事件。感兴趣的可以参考一下这个:https://gist.github.com/saber-solooki/edeb57be63d2a60ef551676067c66c71 (可能需要梯子才能访问)

StickyHeader View 实现思路

1、Adapter 的数据里面要能够区分对应 position 的数据是 Header 还是 Item
2、通过 HeaderViewHolder 创建一个额外的悬浮HeaderView,当第一个分组的 Header 刚刚好贴边的时候,是无需展示这个悬浮HeaderView的。当第一个分组的 Header 往上滑了之后,那么就开始展示这个悬浮HeaderView。当第二个分组的 Header快要滑动到顶部的时候,悬浮HeaderView 要跟随逐渐往上退出。
3、通过 HeaderViewHolder 把数据绑定到 悬浮HeaderView 上面
4、处理点击事件或状态,应通过更改每个 Header 对应的 Model 的数据,在 onBindViewHolder 进行状态绑定。比如点击了悬浮HeaderView,需要做选中,那么,悬浮HeaderView 对应的真正的再列表中的View 也应该同步更新选选中状态。
5、为了使 悬浮HeaderView 更加明显,可以通过 ViewPropertyAnimator 为其增加Z轴的阴影。

具体代码地址https://github.com/smuyyh/StickyHeaderRecyclerView

实现RecyclerView悬浮吸顶,可以使用以下步骤: 1. 创建一个布局文件,包含两个部分:一个用于悬浮显示的视图,一个用于RecyclerView。 2. 在Activity或Fragment中,找到RecyclerView并设置布局管理器和适配器。 3. 创建一个自定义的RecyclerView.ItemDecoration类,用于绘制悬浮视图。 4. 在自定义的ItemDecoration类中,重写getItemOffsets()方法,在该方法中计算悬浮视图的高度,并将其应用到RecyclerView的第一个可见项之上。 5. 在自定义的ItemDecoration类中,重写onDraw()方法,在该方法中绘制悬浮视图。 6. 在Activity或Fragment中,为RecyclerView添加ItemDecoration。 下面是一个简单的示例代码: 1. 创建布局文件(例如:activity_main.xml): ```xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/floating_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Floating View" android:background="#FF0000" android:textColor="#FFFFFF" android:padding="16dp" android:visibility="gone" /> <androidx.recyclerview.widget.RecyclerView android:id="@+id/recyclerview" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/floating_view" /> </RelativeLayout> ``` 2. 在Activity或Fragment中,设置RecyclerView的布局管理器和适配器: ```java // 找到RecyclerView RecyclerView recyclerView = findViewById(R.id.recyclerview); // 设置布局管理器 recyclerView.setLayoutManager(new LinearLayoutManager(this)); // 设置适配器 recyclerView.setAdapter(adapter); ``` 3. 创建一个自定义的ItemDecoration类(例如:FloatingHeaderDecoration.java): ```java public class FloatingHeaderDecoration extends RecyclerView.ItemDecoration { private View mFloatingView; public FloatingHeaderDecoration(View floatingView) { mFloatingView = floatingView; } @Override public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) { super.getItemOffsets(outRect, view, parent, state); if (parent.getChildAdapterPosition(view) == 0) { outRect.top = mFloatingView.getHeight(); } } @Override public void onDraw(@NonNull Canvas canvas, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) { super.onDraw(canvas, parent, state); int top = parent.getPaddingTop(); int bottom = top + mFloatingView.getHeight(); int left = parent.getPaddingLeft(); int right = parent.getWidth() - parent.getPaddingRight(); mFloatingView.setVisibility(View.VISIBLE); mFloatingView.layout(left, top, right, bottom); mFloatingView.draw(canvas); } } ``` 4. 在Activity或Fragment中,为RecyclerView添加ItemDecoration: ```java // 找到悬浮视图 View floatingView = findViewById(R.id.floating_view); // 创建自定义的ItemDecoration并添加到RecyclerView recyclerView.addItemDecoration(new FloatingHeaderDecoration(floatingView)); ``` 这样就实现RecyclerView悬浮吸顶悬浮视图会在滚动时始终保持在顶部,并且不会被其他项覆盖。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值