Android 仿京东淘宝拼多多的商品分类，双列表联动，RecyclerView嵌套

最新推荐文章于 2024-07-31 09:56:25 发布
最新推荐文章于 2024-07-31 09:56:25 发布
阅读量7k 收藏 42
点赞数 8
分类专栏： android教程 不做框架只做UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weimingjue/article/details/102698344
版权

淘宝京东的相对简单很多，两个RecyclerView就可实现了。

现在要做的是右边滑动的时候左边跟着联动，如下图：

思路：左右肯定都是RecyclerView了，至于中间的图片嘛当然也是RecyclerView了，嵌套冲突的时代已经过去了。（如果你想用多条目，每张图片也要复用我也不反对，但你会掉头发...）

注意：嵌套的内层RecyclerView会失去复用，不适合单个分类上百张图片（是单个分类，不是总数）或一张图片需要占半屏的那种（真有有这么奇葩的分类我也无力吐槽）

 

其实代码不算太复杂，就是逻辑有点绕，精简炼化后的代码如下：

public class RvLianDongActivity extends BaseActivity {

    @BindView(R.id.rv_rvliandong_Left)
    RecyclerView mRvLeft;
    @BindView(R.id.rv_rvliandong_Right)
    RecyclerView mRvRight;

    private RvLeftAdapter mAdapterLeft;
    private RvRightAdapter mAdapterRight;

    private LinearLayoutManager mManagerLeft;
    private LinearLayoutManager mManagerRight;

    /**
     * 是否来自点击
     */
    private boolean mIsFromClick = false;

    /**
     * 相当于setContentView
     */
    @Override
    protected int getLayouRes() {
        return R.layout.activity_rv_lian_dong;
    }

    /**
     * 相当于onCreate的初始逻辑
     */
    @Override
    protected void initData() {
        mRvLeft.setLayoutManager(new LinearLayoutManager(this));
        mAdapterLeft = new RvLeftAdapter(this);
        mRvLeft.setAdapter(mAdapterLeft);

        mManagerRight = new LinearLayoutManager(this);
        mRvRight.setLayoutManager(mManagerRight);
        mAdapterRight = new RvRightAdapter(this);
        mRvRight.setAdapter(mAdapterRight);

        //造数据
        ArrayList<String> listLeft = new ArrayList<>();
        ArrayList<String> listRight = new ArrayList<>();
        for (int i = 0; i < 20; i++) {
            listLeft.add("左边第" + i);
            listRight.add("右边第" + i);
        }
        mAdapterLeft.setListAndNotifyDataSetChanged(listLeft);//就是设置list然后刷新
        mAdapterRight.setListAndNotifyDataSetChanged(listRight);

        //监听
        mRvRight.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int i, int i1) {
                super.onScrolled(recyclerView, i, i1);
                if (mIsFromClick) {//防止来回调
                    return;
                }
                changePosition();
            }

            private void changePosition() {
                int firstPosition = mManagerRight.findFirstVisibleItemPosition();
                if (mAdapterLeft.mCheckedPosition != firstPosition) {
                    mAdapterLeft.mCheckedPosition = firstPosition;
                    mAdapterLeft.notifyDataSetChanged();

                    //此方法无置顶效果
                    mRvLeft.scrollToPosition(mAdapterLeft.mCheckedPosition);
                }
            }
        });

        mAdapterLeft.setOnItemClickListener(new OnItemClickListener() {
            @Override
            protected void onItemClick(View view, int listPosition) {
                mAdapterLeft.mCheckedPosition = listPosition;
                mAdapterLeft.notifyDataSetChanged();
                mIsFromClick = true;//不走onScrolled，防止来回调
                //此方法可以置顶
                mManagerRight.scrollToPositionWithOffset(listPosition, 0);
                mIsFromClick = false;//放开
            }
        });
    }

    /**
     * 左边，就一个tv
     */
    public static class RvLeftAdapter extends BaseAdapterRvList<BaseViewHolder, String> {
        public int mCheckedPosition = 0;

        public RvLeftAdapter(Activity activity) {
            super(activity);
        }

        @Override
        protected void onBindVH(BaseViewHolder holder, int listPosition, String s) {
            TextView tv = (TextView) holder.itemView;
            tv.setText(s);
            tv.setBackgroundColor(mCheckedPosition == listPosition ? 0xffeeeeee : 0xffffffff);//选中灰色，不选择白色
        }

        @NonNull
        @Override
        protected BaseViewHolder onCreateVH(ViewGroup parent, LayoutInflater inflater) {
            TextView tv = new AppCompatTextView(mActivity);
            tv.setLayoutParams(new RecyclerView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
            tv.setPadding(0, 40, 0, 40);
            tv.setGravity(Gravity.CENTER);
            tv.setTextSize(15);
            return new BaseViewHolder(tv);
        }
    }

    /**
     * 右边tv+rv
     */
    public static class RvRightAdapter extends BaseAdapterRvList<RvRightAdapter.ViewHolder, String> {

        public RvRightAdapter(Activity activity) {
            super(activity);
        }

        @Override
        protected void onBindVH(ViewHolder holder, int listPosition, String s) {
            holder.mTvBiaoTi.setText(s);

            BaseAdapterRvList adapter = (BaseAdapterRvList) holder.mRv.getAdapter();

            ArrayList<Integer> list = new ArrayList<>();
            for (int i = 0; i < listPosition + 1; i++) {
                list.add(R.mipmap.ic_launcher);
            }
            adapter.setListAndNotifyDataSetChanged(list);//一堆机器人的图片
        }

        @NonNull
        @Override
        protected ViewHolder onCreateVH(ViewGroup parent, LayoutInflater inflater) {
            ViewHolder holder = new ViewHolder(inflater.inflate(R.layout.adapter_liandong_right, parent, false));
            holder.mRv.setLayoutManager(new GridLayoutManager(mActivity, 4));
            //此处为了简单，直接就是图片
            holder.mRv.setAdapter(new BaseAdapterRvList<BaseViewHolder, Integer>(mActivity) {

                @Override
                protected void onBindVH(BaseViewHolder holder, int listPosition, Integer integer) {
                    ImageView iv = (ImageView) holder.itemView;
                    iv.setImageResource(integer);
                }

                @NonNull
                @Override
                protected BaseViewHolder onCreateVH(ViewGroup parent, LayoutInflater inflater) {
                    ImageView iv = new AppCompatImageView(mActivity);
                    return new BaseViewHolder(iv);
                }
            });
            holder.mRv.setNestedScrollingEnabled(false);//设置内层rv不可滑动
            return holder;
        }

        static class ViewHolder extends BaseViewHolder {
            @BindView(R.id.tv_liandongrightada_BiaoTi)
            TextView mTvBiaoTi;
            @BindView(R.id.rv_liandongrightada)
            RecyclerView mRv;

            ViewHolder(View view) {
                super(view);
                ButterKnife.bind(this, view);
            }
        }
    }
}

activity_rv_lian_dong.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/c_fff"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <!--标题样式可以忽略-->
    <com.wang.mylibrary.view.ActivityHeaderView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:w_title="RV联动" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv_rvliandong_Left"
            android:layout_width="0px"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv_rvliandong_Right"
            android:layout_width="0px"
            android:layout_height="match_parent"
            android:layout_weight="3" />
    </LinearLayout>
</LinearLayout>

adapter_liandong_right.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/c_fff"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_liandongrightada_BiaoTi"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/w_c_eee"
        android:padding="5dp"
        android:text="标题" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_liandongrightada"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

想要点击左边加上惯性滑动效果？

把滑动监听和click事件改一下就行了，稍微复杂一点点：

        //监听
        mRvRight.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int i, int i1) {
                super.onScrolled(recyclerView, i, i1);
                if (mIsFromClick) {//防止来回调
                    return;
                }
                changePosition();
            }

            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
                if (newState == RecyclerView.SCROLL_STATE_IDLE) {
                    //和下面的handler配合，这样才能无bug
                    if (mIsFromClick) {
                        changePosition();//防止突然停了，定错位置
                    }
                    mIsFromClick = false;//滑动结束放开
                }
            }

            private void changePosition() {
                int firstPosition = mManagerRight.findFirstVisibleItemPosition();
                if (mAdapterLeft.mCheckedPosition != firstPosition) {
                    mAdapterLeft.mCheckedPosition = firstPosition;
                    mAdapterLeft.notifyDataSetChanged();

                    //此方法无置顶效果
                    mRvLeft.scrollToPosition(mAdapterLeft.mCheckedPosition);
                }
            }
        });

        mAdapterLeft.setOnItemClickListener(new OnItemClickListener() {
            @Override
            protected void onItemClick(View view, int listPosition) {
                mAdapterLeft.mCheckedPosition = listPosition;
                mAdapterLeft.notifyDataSetChanged();
                mIsFromClick = true;//不走onScrolled，防止来回调
                LinearSmoothScroller topScroller = new LinearSmoothScroller(getActivity()) {

                    @Override
                    protected int getHorizontalSnapPreference() {
                        return SNAP_TO_START;//具体见源码注释
                    }

                    @Override
                    protected int getVerticalSnapPreference() {
                        return SNAP_TO_START;//具体见源码注释
                    }

                    @Override
                    protected void onStop() {
                        super.onStop();
                        //发送一个延时handler
                        //因为onStop时还有惯性动画
                        TimeUtil.mHandler.postDelayed(new Runnable() {
                            @Override
                            public void run() {
                                mIsFromClick = false;
                            }
                        }, 500);
                    }
                };
                topScroller.setTargetPosition(listPosition);
                mManagerRight.startSmoothScroll(topScroller);
            }
        });

关于数据格式：

我的代码是单纯为了展示效果没有格式，真正的格式应该像这样：（tb、jd不是这样的，见下面原因）

[{
	"title": "左标题",
	"title2": "右标题",
	"ohter": "其他内容",
	"item": [{
		"img": "http:1",
		"ohter2": "其他内容"
	}...]
}..]

这种效果又流畅又时尚为什么tb、jd都不使用？

1.tb、jd分类比较多，一次性加载全部会比较慢，影响体验，服务器压力也会变大。

2.用户基本只会点其中几个分类，其他分类即使加载了也是浪费。

3.他们的分类下还有小分类，一直滑动会容易混淆。

所以他们采用了每次点击根据左边的标题来再请求网络获得右边的数据。

置顶效果：

置顶很简单，但好多人不知道，里面也有置顶失败的例子，详细见：https://blog.csdn.net/weimingjue/article/details/82805361

BaseAdapterRvList和BaseViewHolder：

就是Adapter对list的封装简化，详细代码：https://blog.csdn.net/weimingjue/article/details/8819075

 

转载请注明出处：王能的博客：https://blog.csdn.net/weimingjue/article/details/102698344

王能
关注
专栏目录
Android-RecycleView的双向列表左右联动效果
maopihu2308的博客
08-12 3017
开篇 有一个需求，需要做一个左右双向联动的列表。类似于饿了么点餐页面，但是远没有那么复杂，只是用于展示的一个页面。只用了两个RecycleView加适配器，没有调用Fragment。 MainActivity public class MainActivity extends Activity { private RecyclerView mR...
android+京东分类菜单,Android仿京东商品分类
weixin_31455121的博客
05-26 1018
一.效果图 二.布局文件activity_main.xml布局中left_item.xml布局中在right_item.xml布局中在rigth_item_child.xml在MainActivity.java中public class MainActivity extends AppCompatActivity implements ILeftview, IRightview {private...
android 仿京东商品三级分类简单实例
11-28
使用简单的方法实现类似京东商品三级分类、没有加特效和动画。
Androidstudio开发，购物商城app实现商品分类列表（五）
最新发布
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
07-31 822
相关视频教程在某站上面(🔍浩宇软件开发)
【android】安卓高仿京东分类页
GuoguoDad的博客
08-11 1778
android 实现商城类app的分类页，高仿哦
Android实现类似京东商品分类效果(RecyclerView+fragment)
龙旋的博客
05-16 4410
最近做项目需求的时候，需要实现类似京东的商品分类。网上看了很多都是通过listview+fragment实现，个人比较习惯使用RecyclerView，所以就通过RecyclerView+fragment实现了该需求，记录一下。 1、效果图 选中状态可以根据需求进行设置 2、Demo目录结构 3、主程序MainActivity(MainActivity) public class MainAc...
React-Native 版高仿淘宝、京东商城首页、商品分类页面
m0_46962786的博客
10-11 1124
前言 正在做商城项目的同学有福啦，看看是你们想要的效果吗？ 项目地址：https://github.com/pengzhenjin/react-native-mall 效果图 已实现功能 沉浸式状态栏 酷炫的顶部导航动画 消息角标 循环轮播图 搜索 商品一级分类 商品二级分类 商品子分类 顶部滑动的tab、智能下拉菜单 用到的技术 自定义 Badge（角标） 动画、动画插值器 Swiper 轮播图 自定义 tab 自定义 popup 弹窗下拉菜单 FlatList、SectionList 重点代码
使用Recyclerview实现仿京东分类 + MVP
Fangs.Chriss的博客
12-20 1246
今天我们一起探讨一下通过RecyclerView实现二级联动,在这里我做的是仿京东的分类页面,京东的分类页面是一个非常经典的项目,今天我们就来写一下. GitHub源码地址：https://github.com/BnerFang/Day_1219首先,第一步:搭建环境(依赖和权限) 在这里首先看一下所需依赖:在这里图片的记载我使用的是Glide   //圆角依赖 implementat...
Android 仿京东、拼多多商品分类页的示例代码
08-29
"Android 仿京东、拼多多商品分类页的示例代码" Android 仿京东、拼多多商品分类页的示例代码是Android应用开发中的一种常见需求，主要涉及到ListView、GridView的使用，以及数据结构的设计和实现。下面将对该示例...
Android-Recyclerview实现列表联动
08-12
本文将深入探讨如何使用RecyclerView实现列表联动效果，即在一个RecyclerView中，当用户交互时，其他相关的RecyclerView会做出相应的动态更新。 首先，我们需要理解RecyclerView的基本用法。RecyclerView通过...
android双联动列表,RecyclerView进阶(一)RecyclerView实现双列表联动
weixin_30015509的博客
05-31 1753
本篇文章已授权微信公众号 hongyangAndroid (鸿洋)独家发布最近项目中需要实现一个分类页面UI图列表联动效果图实现要求左侧联动右侧：点击左侧列表的某一项，背景变色，同时右侧列表中对应的分类滚动到顶部右侧列表悬停：右侧列表滑动的时候相应的标题栏需要在顶部悬停标题栏可点击右侧联动左侧：滚动右侧列表，监听滚动的位置，左侧列表需要同步选中相应的列表效果图列表联动效果图对照着上面的UI要求，基...
Android仿京东分类效果
08-27
主要为大家详细介绍了Android仿京东分类效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
android 仿京东购物商城分类视图
11-10
android 仿京东购物商城分类视图,android studio 2.2项目 对应文章看这里： http://blog.csdn.net/stzy00/article/details/47959075
Android仿新版京东分类模块
12-08
仿新版的京东商品匪类模块，简单的demo希望能帮助到.
Android 仿京东分类效果
08-20
仿京东APP分类效果,左边是类别，右边是选中类的详细列表
TwoRecyc:RecyclerView实现双列表联动
04-29
TwoRecyc RecyclerView实现双列表联动
仿京东商品分类显示
01-02
仿京东首页商品的分类显示，联动显示商品的分类，点击。
android分类联动效果,android 分类联动效果 模仿每日优鲜
weixin_36318506的博客
05-28 170
public class ClsFragment extends Fragment implements ClsContract.IclsView,LeftAdapter.ItemClickListener{private RecyclerView rv_left;private RecyclerView rv_right;private ClsPresenter clsPresenter;pri...
Android——仿京东淘宝分类页面
热门推荐
xy8199的博客
11-22 1万+
效果图： json在assets下 添加依赖：   compile 'com.squareup.okhttp3:okhttp:3.8.1' compile 'com.facebook.fresco:fresco:0.11.0' compile 'com.alibaba:fastjson:1.1.46.android' MainActivitypublic class MainA...
Android 商品分类页联动效果实现
"该资源提供了一个Android开发的示例代码，用于实现类似京东和拼多多商品分类页面的功能。在这个页面中，用户滑动右侧的子分类时，左侧的主分类会同步变化。页面设计包括两个ListView，右侧ListView内嵌套一个...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值