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'
}

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

(0)

相关推荐

  • android中RecyclerView悬浮吸顶效果

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

  • 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=&

  • Android RecyclerView实现悬浮吸顶、分隔线、到底提示效果

    本文中所有效果通过ItemDecoration实现,通过此实现的可以与业务解耦,让RecyclerView的模板更加简洁,不关心任何辅助性ui,github地址 一.顶部吸附效果图 二.顶部不吸附效果图 三.不满一屏效果 四.核心实现点 1.为什么通过ItemDecoration能够实现,原理? ①通过getItemOffsets()方法获取当前模板view的left.top.right.bottom边距,这些留出的间距用于绘制这些辅助性ui. // RecyclerView的measure c

  • Android自定义RecyclerView Item头部悬浮吸顶

    本文实例为大家分享了Android自定义RecyclerView Item头部悬浮吸顶的具体代码,供大家参考,具体内容如下 概述 1.自定义了一个FrameLayout,引入条目的头部布局加入到自定义FrameLayout中. 2.将RecyclerView加入FrameLayout 3.条目头部View的Alpha动画以及设置透明和不透明这个时机大多是通过打log来确定的,硬推理还是有些难. 4.当屏幕显示区域的第二条Item距离控件顶端的距离小于条目头部View高度时,就开始移动条目头部Vi

  • Android Jetpack Compose实现列表吸顶效果

    目录 stickyHeader 实体类 加载假数据 吸顶标题 二级条目 完整代码 效果图 安卓传统的 Recyclerview 打造悬浮头部StickyHeader的吸顶效果,十分麻烦,而在Compose中就简单多了 stickyHeader Compose设计的时候考虑得很周到,他们提供了stickyHeader 作用就是添加一个粘性标题项,即使在它后面滚动时也会保持固定.标头将保持固定,直到下一个标头取而代之. 参数key - 表示唯一的密钥键. 它不允许对列表出现使用相同的键.密钥的类型应

  • Android进阶CoordinatorLayout协调者布局实现吸顶效果

    目录 引言 1 CoordinatorLayout功能介绍 1.1 CoordinatorLayout的依赖交互原理 1.2 CoordinatorLayout的嵌套滑动原理 2 CoordinatorLayout源码分析 2.1 CoordinatorLayout的依赖交互实现 2.2 CoordinatorLayout交互依赖的源码分析 2.3 CoordinatorLayout子控件拦截事件源码分析 2.4 CoordinatorLayout嵌套滑动原理分析 引言 在上一节Android进

  • Android实现上拉吸顶效果

    本文实例为大家分享了Android实现上拉吸顶效果的具体代码,供大家参考,具体内容如下 效果图 1.home_layout.xml 此布局即可实现上拉标题固定在顶部 <?xml version="1.0" encoding="UTF-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="

  • Android进阶NestedScroll嵌套滑动机制实现吸顶效果详解

    目录 引言 1 自定义滑动布局,实现吸顶效果 1.1 滑动容器实现 1.2 嵌套滑动机制完成交互优化 1.2.1 NestedScrollingParent接口和NestedScrollingChild接口 1.2.2 预滚动阶段实现 1.2.3 滚动阶段实现 1.2.4 滚动结束 引言 在上一篇文章Android进阶宝典 -- 事件冲突怎么解决?先从Android事件分发机制开始说起中,我们详细地介绍了Android事件分发机制,其实只要页面结构复杂,联动众多就会产生事件冲突,处理不得当就是b

  • 浅谈react.js中实现tab吸顶效果的问题

    在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab的position变为fixed. 在react中,我在state中设置一个navTop属性,切换这个属性的值为true或者false,然后tab标签使用classnames()这个方法来利用navTop的值添加类名fixed. 一开始我是这样写的: import cs from 'classnam

  • react-native滑动吸顶效果的实现过程

    前言 最近公司开发方向偏向移动端,于是就被调去做RN(react-native),体验还不错,当前有个需求是首页中间吸顶的效果,虽然已经很久没写样式了,不过这种常见样式应该是so-easy,没成想翻车了,网上搜索换了几个方案都不行,最后去github上复制封装好的库来实现,现在把翻车过程记录下来. 需求效果 翻车过程 第一种方案 失败 一开始的思路是这样的,大众思路,我们需要监听页面的滚动状态,当页面滚动到要吸顶元素所处的位置的时候,我们设置它为固定定位,不过很遗憾,RN对于position属性

随机推荐