【Recycleview滑动】Recycleview+snapHelper实现列表联动

最新推荐文章于 2024-04-09 03:42:36 发布
最新推荐文章于 2024-04-09 03:42:36 发布
阅读量1.7k 收藏 1
点赞数
文章标签： android java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/biyeledemeng/article/details/121418786
版权

实现双列表联动（仿网页PC端选择）

一篇小文章

直接上图点击下方各项可以切换，滑动上方卡片也可以联动下方的各项
主要实现方法：
1）上方卡片滑动监听处理代码：

    mRecycleview.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);

				//recycleView中获取显示item的位置
                RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) recyclerView.getChildAt(0).getLayoutParams();
                int viewAdapterPosition = layoutParams.getViewAdapterPosition();
                //根据当前位置设置下方recycleView的位置
                recycleviewHint.smoothScrollToPosition(viewAdapterPosition);
            }

            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
            }
        });

下方列表点击事件处理：

        hintAdapter.setOnItemClickListener(new BaseQuickAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(BaseQuickAdapter baseQuickAdapter, View view, int i) {
                mRecycleview.scrollToPosition(i);
                recycleviewHint.smoothScrollToPosition(i);
            }
        });

点击下方列表，当前item显示在中间关键代码需要改造LinearLayoutManager
感谢电动小马达的分享[RecyclerView 列表点击定位到中间位置]sn(https://blog.csdn.net/weixin_42046829/article/details/110053790)


public class CenterLayoutManager extends LinearLayoutManager {

    public CenterLayoutManager(Context context) {
        super(context);
    }

    public CenterLayoutManager(Context context, int orientation, boolean reverseLayout) {
        super(context, orientation, reverseLayout);
    }

    public CenterLayoutManager(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    public void smoothScrollToPosition(RecyclerView recyclerView, RecyclerView.State state, int position) {
        LinearSmoothScroller smoothScroller =
                new CenterSmoothScroller(recyclerView.getContext()) {
                    // 返回：滑过1px时经历的时间(ms)。
                    @Override
                    protected float calculateSpeedPerPixel(DisplayMetrics displayMetrics) {
                        return 150f / displayMetrics.densityDpi;
                    }
                };

        smoothScroller.setTargetPosition(position);
        startSmoothScroll(smoothScroller);
    }


    private static class CenterSmoothScroller extends LinearSmoothScroller {

        CenterSmoothScroller(Context context) {
            super(context);
        }

        @Override
        public int calculateDtToFit(int viewStart, int viewEnd, int boxStart, int boxEnd, int snapPreference) {
            return (boxStart + (boxEnd - boxStart) / 2) - (viewStart + (viewEnd - viewStart) / 2);
        }
    }
}

布局代码activity_main.xml

// An highlighted block
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycleview"
        android:layout_width="match_parent"
        android:layout_height="400dp"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingStart="10dp"
        android:paddingEnd="10dp">

        <TextView
            android:id="@+id/tvHead"
            android:layout_width="70dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="10dp"
            android:text="head"
            android:textColor="#000"
            android:textSize="18sp" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycleviewHint"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <TextView
            android:id="@+id/tvFoot"
            android:layout_width="70dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="10dp"
            android:text="foot"
            android:textColor="#000"
            android:textSize="18sp" />
    </LinearLayout>
</LinearLayout>

item.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardUseCompatPadding="true"
    app:cardPreventCornerOverlap="true"
    app:cardElevation="6dp"
    app:cardCornerRadius="5dp"
    android:clickable="true"
    android:foreground="?attr/selectableItemBackground"
    android:layout_marginStart="30dp"
    android:layout_marginTop="30dp"
    android:layout_marginEnd="30dp"
    android:layout_marginBottom="30dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="match_parent">
        <ImageView
            android:layout_width="match_parent"
            android:layout_weight="7"
            android:scaleType="fitXY"
            android:id="@+id/img"
            android:background="@mipmap/a1"
            android:layout_height="0dp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_weight="3"
            android:id="@+id/tv"
            android:padding="5dp"
            android:text="no.1"
            android:layout_height="0dp" />
    </LinearLayout>
</android.support.v7.widget.CardView>

item_rv_hint.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:foreground="?attr/selectableItemBackground">

    <TextView
        android:id="@+id/tv"
        android:layout_width="60dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="10dp"
        android:textSize="18sp"
        android:textColor="#000"
        android:text="1" />
</LinearLayout>

MenuActivity.class


import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.graphics.Palette;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.PagerSnapHelper;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.BaseViewHolder;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    private RecyclerView mRecycleview;
    private BaseQuickAdapter<TestBean, BaseViewHolder> mBaseQuickAdapter;
    private BaseQuickAdapter hintAdapter;
    private ArrayList<TestBean> mDatas;
    private RecyclerView recycleviewHint;
    private ArrayList<TestBean> hintDatas = new ArrayList<>();
    private int[] imgs = {R.mipmap.a1, R.mipmap.a2, R.mipmap.a3, R.mipmap.a4, R.mipmap.a5, R.mipmap.a6, R.mipmap.a1, R.mipmap.a2, R.mipmap.a3, R.mipmap.a4, R.mipmap.a5, R.mipmap.a6};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mRecycleview = (RecyclerView) findViewById(R.id.recycleview);
        recycleviewHint = (RecyclerView) findViewById(R.id.recycleviewHint);
        final TextView tvHead = (TextView) findViewById(R.id.tvHead);
        final TextView tvFoot = (TextView) findViewById(R.id.tvFoot);
        final LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        mRecycleview.setLayoutManager(linearLayoutManager);
        PagerSnapHelper snapHelper = new PagerSnapHelper();
        snapHelper.attachToRecyclerView(mRecycleview);
        mDatas = new ArrayList<>();
        for (int x = 0; x < imgs.length; x++) {
            TestBean testBean = new TestBean();
            testBean.setText("this is No." + (x + 1));
            testBean.setImgs(imgs[x]);
            mDatas.add(testBean);
            hintDatas.add(new TestBean((x + 1) + ""));
        }

        mBaseQuickAdapter = new BaseQuickAdapter<TestBean, BaseViewHolder>(R.layout.item, mDatas) {
            @Override
            protected void convert(BaseViewHolder helper, TestBean item) {
                ImageView img = helper.getView(R.id.img);
                final TextView tv = helper.getView(R.id.tv);
                img.setImageResource(item.getImgs());
                tv.setText(item.getText());
                Palette.from(BitmapFactory.decodeResource(getResources(), item.getImgs())).generate(new Palette.PaletteAsyncListener() {
                    @Override
                    public void onGenerated(Palette palette) {
                        int vibrantColor = palette.getVibrantColor(Color.BLUE);
                        tv.setTextColor(vibrantColor);
                    }
                });
            }
        };
        mRecycleview.setAdapter(mBaseQuickAdapter);
        mRecycleview.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);

                RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) recyclerView.getChildAt(0).getLayoutParams();
                int viewAdapterPosition = layoutParams.getViewAdapterPosition();
                recycleviewHint.smoothScrollToPosition(viewAdapterPosition);
            }

            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
            }
        });

        final LinearLayoutManager centerLayoutManager = new CenterLayoutManager(this);
        centerLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        hintAdapter = new BaseQuickAdapter<TestBean, BaseViewHolder>(R.layout.item_rv_hint, hintDatas) {
            @Override
            protected void convert(BaseViewHolder helper, TestBean item) {
                final TextView tv = helper.getView(R.id.tv);
                tv.setText(item.getText());
            }
        };
        recycleviewHint.setLayoutManager(centerLayoutManager);
        recycleviewHint.setAdapter(hintAdapter);

        hintAdapter.setOnItemClickListener(new BaseQuickAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(BaseQuickAdapter baseQuickAdapter, View view, int i) {
                mRecycleview.scrollToPosition(i);
                recycleviewHint.smoothScrollToPosition(i);
            }
        });
        tvHead.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mRecycleview.scrollToPosition(0);
                recycleviewHint.scrollToPosition(0);
            }
        });
        tvFoot.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mRecycleview.scrollToPosition(mDatas.size() - 1);
                recycleviewHint.scrollToPosition(hintDatas.size() - 1);
            }
        });
    }
}
神奇的贾克斯
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Recyclerview 仿饿了么、京东、淘宝、美团实现左右双列表联动效果
m0_37777069的博客
10-15 1431
本项目是简单的页面左右两侧两个RecyclerView联动效果实现。总体思路很简单。希望帮助到大家 布局文件主页 <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com
RecyclerView的好朋友 — SnapHelpter
Ever69的博客
07-04 505
SnapHelpter，相信很多人可能都不知道它或者没怎么关注过它，但是通过它实现的效果肯定都见过。比如短视频应用中切换视频时一划划一页的效果，这可不是ViewPager实现的啊，使用ViewPager实现的话成本太高，所以这类效果都是通过RecyclerVIew + SnapHelper来实现的，拿刚才讲的短视频切换效果来说，使用的就是RecyclerVIew和SnapHelper的子类PagerSnapHelper来实现的。说了这些，那么SnapHelper到底是什么东西呢？见名思意，Snap，翻译成中
Android RecyclerView实现ViewPager效果，用LinearSnapHelper
赵彦军
01-30 1303
SnapHelper是RecyclerView功能的一种拓展，使RecyclerView滑动行为类似ViewPager，无论怎么滑动最终停留在某页正中间。ViewPager一次只能滑动一页，RecyclerView+SnapHelper方式可以一次滑动好几页，且最终都停留在某页正中间。SnapHelper的实现原理是监听RecyclerView.OnFlingListener中的onFling接口。LinearSnapHelper是抽象类SnapHelper的具体实现。上面的效果只需下面几行代码即可。
Android：让你明明白白的使用RecyclerView——SnapHelper详解
最新发布
2401_84121871的博客
04-09 633
由于本文罗列的知识点是根据我自身总结出来的，并且由于本人水平有限，无法全部提及，欢迎大神们能补充~将来我会对上面的知识点一个一个深入学习，也希望有童鞋跟我一起学习，一起进阶。提升架构认知不是一蹴而就的，它离不开刻意学习和思考。**这里，笔者分享一份从架构哲学的层面来剖析的视频及资料分享给大家，**梳理了多年的架构经验，筹备近1个月最新录制的，相信这份视频能给你带来不一样的启发、收获。，第一时间获取最新知识点Android架构师之路很漫长，一起共勉吧！
Android 利用RecyclerView 的SnapHelper 实现滚轮效果
魏成林的专栏
08-10 6008
在support V4的最新包中，谷歌加入了一个叫做SnapHelper的辅助类。这个类的作用是可以让RecyclerView实现一些类似ViewPager的效果。我大致试了下，可以利用这个类实现滚轮选择效果。如果所示： 核心代码如下： mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);
RecyclerView+SnapHelper实现无限循环筛选控件
08-25
主要为大家详细介绍了RecyclerView+SnapHelper实现无限循环筛选控件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android用Recycleview实现二级联动
10-10
左侧联动右侧： 点击左侧列表的某一项，背景变色，同时右侧列表中... 右侧列表滑动的时候相应的标题栏需要在顶部悬停 标题栏可点击 右侧联动左侧： 滚动右侧列表，监听滚动的位置，左侧列表需要同步选中相应的列表
RecycleView联动效果
10-22
实现RecycleView联动效果主要涉及以下几个关键技术点： 1. **RecyclerView的监听器**： 首先，我们需要为每个RecycleView设置滑动监听器。可以使用`OnScrollListener`，当用户滑动RecycleView时，监听器会捕获滚动...
tablayout+recyclerview 实现仿淘宝、京东商品详情滑动切换tab效果
10-28
在Android应用开发中，创建一个类似淘宝或...通过以上步骤，我们可以实现一个类似淘宝、京东商品详情页的滑动切换Tab效果。这个效果使得用户在查看商品信息时，可以方便地浏览评价和店铺介绍，提升了整体的使用体验。
recycleview横向滚动加viewpage的级联滑动
06-02
这样，每个RecycleView的item都会有一个独立的ViewPager，它们的滑动会随着RecycleView的滚动而联动。 最后，通过测试和调试，确保整个级联滑动的流程流畅且无误。在项目中，可以使用recycleviewTest这个文件夹中的...
Android tabLayout+recyclerView实现锚点定位的示例
08-27
锚点定位是指在列表视图中实现锚点跳转的功能，即当用户滑动列表视图时，标签栏也随之更改，以便用户快速定位到特定的内容区域。本文将详细介绍如何使用 TabLayout 和 RecyclerView 实现锚点定位的示例。 TabLayout...
左右两个recyclerView联动
12-21
左右两个recyclerView实现滑动上半屏幕时各自滑动各自的，滑动下班屏幕时两个一起滑动
TwoRecyc:RecyclerView实现双列表联动
04-29
TwoRecyc RecyclerView实现双列表联动
联动滑动效果及不同Item效果的RecyclerView
gjnm820的博客
11-05 875
这几天项目中做了一个页面滑动效果，今天总结了一个小demo来分享一下，支持滑动时联动效果的布局，以及支持不同Item效果的RecyclerView
RecyclerView 与 TabLayout 滑动联动，标题顶部悬浮
qiushuiduren的专栏
01-13 2065
之前写过一个 仿大众点评店铺详情的上下滚动、横向tab联动的demo，但是实现起来比较麻烦，现在又写到这样的功能，所以用另一种思路来实现一遍。 标题tab滑动悬停到顶部，tab横向 与被 NestedScrollView 包裹的竖向的RecyclerView 滑动联动；SecondActivity里是横向tab与竖向的RecyclerView 滑动联动 先看效果图 功能说明：NestedScrollView 嵌套RecyclerView 来实现 TabLayout 跟随滚动，并...
两个recycleview列表左右联动实现
搬砖的老牛
03-09 2750
概述： 在之前的项目中曾经做过电商分类页面左右两个列表联动的实现，当时的做法是左侧列表使用RecycleView，右侧列表使用的是ScrollView，通过onOverScrolled方法来检测右侧列表是否已经到达了顶部继续下拉还是已经到达了底部继续上滑。这种方式肃然也实现了左右两个列表联动的需求，但是体验上还是有继续优化的空间，之后做了一版优化，左右两个列表都是用recycleview来实现。 ...
Android recycleView或者viewpage横向或者垂直滑动(抖音上下滑动)
08-15 2804
直播和短视频常见的播放预览的交互存在滑动，常见的滑动有左右或者上下。只要在PagerSnapHelper的attachToRecyclerView方法中，将recycleview加进去就行了。setOrientation():是控制的，受原来的recycleview的控制一样。如今单内容在呈现的时候，很容易占取一屏，最常见是当下比较流行的模块：直播和短视频。PagerSnapHelper：是recycleview的提供的包，可以直接引用。list.add("这是第:"+index+"页");......
Recycleview的联动效果
一杯清泉
11-03 1051
下面我们将实现一个Recycleview的联动效果，即一个Recycleview滑动，另一个Recycleview也跟着滑动，最初想的是监听其中的一个Recycleview滑动，调用另一个Recycleview的scrollBy方法，其实跟随滑动，尝试了一下，一个监听另一个没什么问题，但是当另一个监听另一个时候就发生了问题，两个相互监听，导致陷入了一个死循环，最终内存溢出。看了这个办法是行不通，需...
RecycleView与TabLayout联动展示更多功能列表页面的实现
itTalmud的博客
04-23 1375
TabLayout和RecycleView的联动关键在于两个监听的设置，同时将上方提及的几个细节注意一下即可；
BRVAH+RecycleView 实现列表无限循环滚动 并且item 可点击 kotlin实现代码
06-09
6. 实现无限循环滚动： ``` recyclerView.post { val layoutManager = recyclerView.layoutManager as LinearLayoutManager val firstItem = layoutManager.findFirstVisibleItemPosition() val lastItem = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值