RecyclerVIew实现悬浮吸顶效果

RecyclerVIew实现悬浮吸顶效果图

这里写图片描述

主页面布局

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView android:id="@+id/recycle" android:layout_width="match_parent" android:layout_height="match_parent" /> <TextView android:id="@+id/tv_sticky_header_view" android:layout_width="match_parent" android:layout_height="50dp" android:background="#EFFAE7" android:gravity="center" android:text="吸顶文本1" /> <!--<include layout="@layout/layout_sticky_header_view"/>--> </FrameLayout>

RecyclerView的子条目布局

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <RelativeLayout android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:id="@+id/rl_content_wrapper" android:layout_width="match_parent" android:layout_height="30dp"> <TextView android:id="@+id/name" android:layout_centerVertical="true" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:id="@+id/auto" android:layout_centerVertical="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:layout_alignParentBottom="true" android:background="#ffffff"/> </RelativeLayout> <TextView android:id="@+id/tv_sticky_header_view" android:layout_width="match_parent" android:layout_height="50dp" android:background="#EFFAE7" android:gravity="center" android:text="吸顶文本1" /> </FrameLayout>

activity代码

public class MainActivity extends AppCompatActivity { private TextView tvStickyHeaderView; private RecyclerView recyclerView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initListener(); } /** * 初始化View */ private void initView() { recyclerView = (RecyclerView) findViewById(R.id.recycle); tvStickyHeaderView = (TextView) findViewById(R.id.tv_sticky_header_view); recyclerView.setLayoutManager(new LinearLayoutManager(this)); recyclerView.setAdapter(new StickyExampleAdapter(this, getData())); } /** * 初始化Listener */ private void initListener() { recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { super.onScrolled(recyclerView, dx, dy); View stickview = recyclerView.findChildViewUnder(0, 0); if (stickview != null && stickview.getContentDescription() != null) { if (!TextUtils.equals(tvStickyHeaderView.getText(), stickview.getContentDescription())) { tvStickyHeaderView.setText(stickview.getContentDescription()); } } View transInfoView = recyclerView.findChildViewUnder( 0, tvStickyHeaderView.getHeight() + 1); if (transInfoView.getTag() != null) { int transViewStatus = (int) transInfoView.getTag(); int top = transInfoView.getTop(); if (transViewStatus == StickyExampleAdapter.HAS_STICKY_VIEW) { if (top > 0) { int dealtY = top - tvStickyHeaderView.getMeasuredHeight(); tvStickyHeaderView.setTranslationY(dealtY); } else { tvStickyHeaderView.setTranslationY(0); } } else if (transViewStatus == StickyExampleAdapter.NONE_STICKY_VIEW) { tvStickyHeaderView.setTranslationY(0); } } } }); } public List<StickyBean> getData() { List<StickyBean> stickyExampleModels = new ArrayList<>(); for (int index = 0; index < 100; index++) { if (index < 15) { stickyExampleModels.add(new StickyBean( "吸顶文本1", "name" + index, "gender" + index)); } else if (index < 25) { stickyExampleModels.add(new StickyBean( "吸顶文本2", "name" + index, "gender" + index)); } else if (index < 35) { stickyExampleModels.add(new StickyBean( "吸顶文本3", "name" + index, "gender" + index)); } else { stickyExampleModels.add(new StickyBean( "吸顶文本4", "name" + index, "gender" + index)); } } return stickyExampleModels; } }

adapter代码

public class StickyExampleAdapter extends RecyclerView.Adapter<StickyExampleAdapter.RecyclerViewHolder> { //第一个吸顶 private static final int FIRST_STICKY_VIEW = 1; //别的吸顶 static final int HAS_STICKY_VIEW = 2; //正常View static final int NONE_STICKY_VIEW = 3; private final LayoutInflater mInflate; private final List<StickyBean> datas; StickyExampleAdapter(Context context, List<StickyBean> datas){ mInflate = LayoutInflater.from(context); this.datas = datas; } @Override public RecyclerViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View inflate = mInflate.inflate(R.layout.item_ui, parent, false); return new RecyclerViewHolder(inflate); } @Override public void onBindViewHolder(RecyclerViewHolder holder, int position) { StickyBean stickyBean = datas.get(position); holder.tvName.setText(stickyBean.name); holder.tvGender.setText(stickyBean.autor); if (position == 0) { holder.tvStickyHeader.setVisibility(View.VISIBLE); holder.tvStickyHeader.setText(stickyBean.sticky); holder.itemView.setTag(FIRST_STICKY_VIEW); } else { if (!TextUtils.equals(stickyBean.sticky, datas.get(position - 1).sticky)) { holder.tvStickyHeader.setVisibility(View.VISIBLE); holder.tvStickyHeader.setText(stickyBean.sticky); holder.itemView.setTag(HAS_STICKY_VIEW); } else { holder.tvStickyHeader.setVisibility(View.GONE); holder.itemView.setTag(NONE_STICKY_VIEW); } } //通过此处设置ContentDescription,作为内容描述,可以通过getContentDescription取出,功效跟setTag差不多。 holder.itemView.setContentDescription(stickyBean.sticky); } @Override public int getItemCount() { return datas == null ? 0 : datas.size(); } public class RecyclerViewHolder extends RecyclerView.ViewHolder{ TextView tvStickyHeader; RelativeLayout rlContentWrapper; TextView tvName; TextView tvGender; RecyclerViewHolder(View itemView) { super(itemView); tvStickyHeader = (TextView) itemView.findViewById(R.id.tv_sticky_header_view); rlContentWrapper = (RelativeLayout) itemView.findViewById(R.id.rl_content_wrapper); tvName = (TextView) itemView.findViewById(R.id.name); tvGender = (TextView) itemView.findViewById(R.id.auto); } } }

StickyBean代码

public class StickyBean { public String name; public String autor; public String sticky; public StickyBean(String sticky, String name, String autor) { this.sticky = sticky; this.name = name; this.autor = autor; } }

app的build文件

apply plugin: 'com.android.application' android { compileSdkVersion 26 buildToolsVersion "25.0.3" defaultConfig { applicationId "com.lg.floating" minSdkVersion 15 targetSdkVersion 26 versionCode 1 versionName "1.0" testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', { exclude group: 'com.android.support', module: 'support-annotations' }) compile 'com.android.support:appcompat-v7:26.0.0-alpha1' compile 'com.android.support:recyclerview-v7:23.1.0' testCompile 'junit:junit:4.12' }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

时间: 2024-09-22 19:18:41

RecyclerVIew实现悬浮吸顶效果的相关文章

android中RecyclerView悬浮吸顶效果

MultiType-Adapter打造悬浮吸顶效果 注:当前版本只适合配合RecyclerView快速打造一款 展示UI 悬浮吸顶效果,如 通讯录效果,由于实现机制的原因,暂时不支持触摸事件. MultiType-Adapter介绍地址:MultiType-Adapter 是一款轻量级支持多数据类型的 RecyclerView 适配器; 使用简单,完全解耦; 悬浮吸顶效果 ```groovy // root build.gradle repositories { jcenter() maven

安卓当下最流行的吸顶效果的实现(下)

接上文 第一步:首先我们来写一个类,它起标记的作用,来放每一个item的对应的悬浮栏的字符串 public class NameBean {        String name;            public String getName() {            return name;        }            public void setName(String name) {            this.name = name;        }    } 

安卓当下最流行的吸顶效果的实现(上)

开始逐渐领略到ItemDecoration的美~ 今天让我 使用 ItemDecoration 来完成 可推动的悬浮导航栏的效果,最终实现的效果如下图: 具体实现步骤如下: 根据我前面的文章所讲的RecyclerView的基本使用,我们先来完成基本的recyclerView: 第一步:布局里写一个RecyclerView 第二步:实例化 recyclerView = (RecyclerView) findViewById(R.id.recyclerView);  第三步:获取所需的数据 (这里我

Android RecyclerView打造悬浮效果的实现代码

本文介绍了Android RecyclerView悬浮效果,分享给大家,具体如下: 先看个效果 这是一个City列表,每个City都有所属的Province,需要在滑动的时候,将对应的Province悬浮在顶部.悬浮顶部的Province需要根据列表的滑动而适当改变位置,实现"顶上去"的效果. 实现思路: 利用RecyclerView.ItemDecoration绘制Province(就像绘制分割线一样) 同一组的City,只绘制一个Province 计算偏移,将当前Province固

吸顶大法 -- UWP中的工具栏吸顶的实现方式之一

原文:吸顶大法 -- UWP中的工具栏吸顶的实现方式之一 如果一个页面中有很长的列表/内容,很多应用都会在用户向下滚动时隐藏页面的头,给用户留出更多的阅读空间,同时提供一个方便的吸顶工具栏,比如淘宝中的店铺页面. 下面是一个比较简单的实现,如果有同学有更好的实现,欢迎留言,让我们共同进步. 首先假设我们的页面整体包含3部分;     页面头:随页面滚动慢慢消失/重现     工具栏: 开始时随页面滚动,在页面头消失后,吸顶,固定不动     可滚动内容:一个listview 结构代码如下,为了区

.net-如何用wpf做出类似迅雷悬浮窗的效果

问题描述 如何用wpf做出类似迅雷悬浮窗的效果 我想做一个悬浮窗,类似迅雷或者360那种,就是在任务管理器的应用里面看不到程序,在后台应用里才看得到程序,以及在alt+tab切换时也要看不到程序. 求大神,我现在就这两个实现不了.. 解决方案 http://download.csdn.net/download/zhaojun2007/907537 解决方案二: 使用WPF的Popup的时候会发现有一个问题,它总是会置顶,只要Popup的StayOpen不设置为False,它就一直呆在最顶端,挡住

jQuery实现表格行上下移动和置顶效果

  本文给大家分享的是一款由jQuery实现的表格行上下移动以及置顶效果的代码,非常的简单实用,这里给出了核心代码,有需要的小伙伴可以参考下. 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现表格数据排序. HTML 页面上是一个简单的数据表格,我们在数据行中分别放置"上移","下移"和"置顶"三个链接,并且分别定义三个class属性

TP-Link面板式AP与吸顶式AP是利用网线的哪几根线芯进行供电

  tp-link面板式AP(TL-AP300I-PoE)和吸顶式AP(TL-AP300C-PoE.TL-AP450C-PoE)支持IEEE 802.3af/at,是标准的PoE受电设备,同时支持PoE Mode A(电力传输和数据传输共用双绞线对)和 PoE Mode B(电力传输和数据传输采用单独的双绞线对)两种供电模式. PoE Mode A电力传输和数据传输共用1.2.3.6线对;PoE Mode B电力传输使用4.5.7.8线对,数据传输使用1.2.3.6线对. 电力传输和数据传输采用

jQuery实现表格行上下移动和置顶效果_jquery

我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现表格数据排序. HTML 页面上是一个简单的数据表格,我们在数据行中分别放置"上移","下移"和"置顶"三个链接,并且分别定义三个class属性,我们来通过jQuery实现这些操作. <table class="table"> <tr> <