关闭

RecyclerView实现悬浮吸顶

4830人阅读 评论(3) 收藏 举报
分类:

效果图
这里写图片描述

主页面布局

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

Demo下载地址

0
0
查看评论

Android-使用RecyclerView的ItemDecoration 实现炫酷的 吸顶效果

开始逐渐领略到ItemDecoration的美~ 今天让我 使用 ItemDecoration 来完成 可推动的悬浮导航栏的效果,最终实现的效果如下图: 具体实现步骤如下: 根据我前面的文章所讲的RecyclerView的基本使用,我们先来完成基本的recyclerView: 第...
  • cjm2484836553
  • cjm2484836553
  • 2016-12-04 14:35
  • 12332

为recyclerview添加悬浮view

文章参考自http://www.jianshu.com/p/fe69a53502ab.源码也去这上找吧. 另外感谢上边连接作者.其实代码没多少.
  • u014732430
  • u014732430
  • 2017-06-21 16:28
  • 430

快速打造 RecyclerView 悬浮吸顶效果

MultiType-Adapter打造悬浮吸顶效果配合RecyclerView快速打造一款 展示UI 悬浮吸顶效果,如 通讯录效果,时光轴效果等等,且支持触摸事件。 通讯录、qq 分组、时光轴效果。 统统快速搞定
  • sinat_15877283
  • sinat_15877283
  • 2017-06-20 00:11
  • 1645

RecycleView文字吸顶,点击吸顶布局刷新数据

实现效果 需求 Recycle有一个头布局,可以跟随列表进行滑动 点击头布局之后可以重新加载列表数据 随着头布局的消失,留下一个可点击的布局(该布局在头布局中) 效果类似下图: 淘宝的商品列表,随着我们向下滑动,只会留下综合排序和销量优先这个布局, 当我们点击销量优先...
  • pyfysf
  • pyfysf
  • 2018-01-15 21:42
  • 173

Android studio RecyclerView实现炫酷吸顶效果

这个例子是我看到一篇博客写的,自己在写的过程中发现代码没有给全,于是自己摸索了把代码补全,实现了炫酷的效果并且上传了代码如个有需要的同学请自取,看代码 首先主布局里面一个recyclerview MinaActivity中逻辑代码 RecyclerVie...
  • liufatao
  • liufatao
  • 2017-01-18 15:05
  • 3872

recycleview吸顶效果源码

转载请注明出处:李诗雨--http://blog.csdn.net/cjm2484836553/article/details/53453982 开始逐渐领略到ItemDecoration的美~ 源码已上传至github,感兴趣的同学可以下载: 吸顶效果源码 https://g...
  • TTHHVV
  • TTHHVV
  • 2017-10-23 20:03
  • 106

RecyclerView悬浮条

转载自:http://www.jianshu.com/p/fe69a53502ab 在我们在刷Instagram的动态时,你是否注意到这样一个小小的动效,就是当一条动态(以卡片形式呈现)向上滑动时,动态卡片的头部会始终悬浮在列表最上方,直到下一张动态卡片的头部将它顶掉并替换它悬浮着。言...
  • u013424496
  • u013424496
  • 2016-11-09 10:42
  • 1997

RecyclerView利用ItemDecoration实现头部悬停效果【类似微信通讯录效果】

对于RecyclerView的ItemDecoration相信大家都不会陌生,因为RecyclerView并不像ListView那样自带分割线,所以我们需要继承ItemDecoration去手动绘制分割线。本篇文章主要是利用ItemDecoration的特性来绘制实现悬浮效果,就像微信中的通讯录一样...
  • xiaxiazaizai01
  • xiaxiazaizai01
  • 2017-03-16 17:56
  • 2533

RecyclerView使用ItemDecoration实现吸顶效果

写此博客目的仅仅用于帮助自己做笔记 吸顶效果在很多APP都可以看见,现在可以借助RecyclerView的ItemDecoration 来简单实现一个吸顶效果直接上效果图: 首先实现一个Model实体,该Model需要包含区分不同组的字段,例如下面这个实体用来区分的便是mTitle字段,当然这个字...
  • qq_34240569
  • qq_34240569
  • 2017-10-19 12:47
  • 136

Android 从零开始实现RecyclerView分组及粘性头部效果

基于RecyclerView实现列表分组和粘性头部的效果
  • lly347705530
  • lly347705530
  • 2018-01-02 14:10
  • 109
    个人资料
    • 访问:13874次
    • 积分:348
    • 等级:
    • 排名:千里之外
    • 原创:21篇
    • 转载:1篇
    • 译文:0篇
    • 评论:5条
    文章分类
    最新评论