RecyclerView加载多类型item 实现淘宝首页布局

最新推荐文章于 2024-05-15 16:39:06 发布
最新推荐文章于 2024-05-15 16:39:06 发布
阅读量1.9k 收藏 7
点赞数 1
分类专栏： android

主要为大家介绍如何用RecycleView来实现淘宝首页复杂的布局，做电商类app的小伙伴们可以略作参考。

首先上效果图：

下面说一下实现方式，主要思路就是根据不同的数据类型去制定不同的item类型，然后动态地去设置这些item的宽高，设置item的类型相信大家都会，我这里就不做阐述了，主要是说一下给不同类型的item设置不同的宽度。

首先，我们给RecyclerView设置一个列数为x的GridLayoutManager，然后再动态地为不同类型的item分别设置SpanSize。比如GridLayoutManager列数为4，item的SpanSize也为4，那么这个item的宽度就是RecyclerView宽度的100%，最终的效果就跟列表一样。同理，item的SpanSize如果是2，那么就占一行的一半宽度，item的SpanSize是1，占1/4宽度…

比如我在demo里面是把列数设为12：

HomeAdapter adapter = new HomeAdapter(this);
GridLayoutManager layoutManger = new GridLayoutManager(this, 12);
rcHome.setLayoutManager(layoutManger);
rcHome.setAdapter(adapter);
  • 1
  • 2
  • 3
  • 4

然后在adapter里面重写onAttachedToRecyclerView方法，为不同的ItemViewType设置不同的SpanSize：

    @Override
    public void onAttachedToRecyclerView(RecyclerView recyclerView) {
        super.onAttachedToRecyclerView(recyclerView);
        RecyclerView.LayoutManager manager = recyclerView.getLayoutManager();
        if (manager instanceof GridLayoutManager) {
            final GridLayoutManager gridManager = ((GridLayoutManager) manager);
            gridManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
                @Override
                public int getSpanSize(int position) {
                    int type = getItemViewType(position);
                    switch (type) {
                        case BANNER:
                            return 12;
                        case COLUMN:
                            return 3;
                        case MARQUEE:
                            return 12;
                        case NUM_TWO:
                            return 6;
                        case TITLE:
                            return 12;
                        case NUM_THREE:
                            return 4;
                        case NORMAL:
                            return 6;
                        default:
                            return 12;
                    }
                }
            });
        }
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

12代表宽度占满全屏，3代表占屏幕的1/4，6代表占屏幕的1/2等等，最终就可以实现上图中的效果。

代码不多，就直接贴在下面了：

MainActivity

public class MainActivity extends AppCompatActivity {
    private Unbinder mUnBinder;
    @BindView(R.id.rc_home)
    RecyclerView rcHome;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mUnBinder = ButterKnife.bind(this);
        initView();
    }

    private void initView() {
        HomeAdapter adapter = new HomeAdapter(this);
        GridLayoutManager layoutManger = new GridLayoutManager(this, 12);
        rcHome.setLayoutManager(layoutManger);
        rcHome.setAdapter(adapter);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mUnBinder.unbind();
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

HomeAdapter

public class HomeAdapter extends RecyclerView.Adapter {
    private LayoutInflater inflater;
    private List<Integer> imgList;
    private List<String> marqueeList;

    private static final int BANNER = 0;
    private static final int COLUMN = 1;
    private static final int MARQUEE = 2;
    private static final int NUM_TWO = 3;
    private static final int TITLE = 4;
    private static final int NUM_THREE = 5;
    private static final int NORMAL = 6;

    public HomeAdapter(Context mContext) {
        inflater = LayoutInflater.from(mContext);
        //添加轮播数据
        addBannerData();
        //添加跑马灯数据
        addMarqueeData();
    }

    @Override
    public int getItemCount() {
        return 25;
    }

    @Override
    public int getItemViewType(int position) {
        if (position == 0) {
            return BANNER;
        } else if (position >= 1 && position <= 8) {
            return COLUMN;
        } else if (position == 9) {
            return MARQUEE;
        } else if (position >= 10 && position <= 13) {
            return NUM_TWO;
        } else if (position == 14 || position == 18) {
            return TITLE;
        } else if (position >= 15 && position <= 17) {
            return NUM_THREE;
        } else if (position >= 19 && position <= 24) {
            return NORMAL;
        }
        return super.getItemViewType(position);
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        switch (viewType) {
            case BANNER:
                View itemBanner = inflater.inflate(R.layout.item_banner, parent, false);
                return new BannerHolder(itemBanner);
            case COLUMN:
                View itemColumn = inflater.inflate(R.layout.item_column, parent, false);
                return new ColumnHolder(itemColumn);
            case MARQUEE:
                View itemMarquee = inflater.inflate(R.layout.item_marquee, parent, false);
                return new MarqueeHolder(itemMarquee);
            case NUM_TWO:
                View itemNumTwo = inflater.inflate(R.layout.item_num_two, parent, false);
                return new NumTwoHolder(itemNumTwo);
            case TITLE:
                View itemTitle = inflater.inflate(R.layout.item_title, parent, false);
                return new TitleHolder(itemTitle);
            case NUM_THREE:
                View itemNumThree = inflater.inflate(R.layout.item_num_three, parent, false);
                return new NumThreeHolder(itemNumThree);
            case NORMAL:
                View itemNormal = inflater.inflate(R.layout.item_normal, parent, false);
                return new NormalHolder(itemNormal);
            default:
                return null;
        }
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        if (holder instanceof BannerHolder) {
            setBanner((BannerHolder) holder);
        } else if (holder instanceof ColumnHolder) {

        } else if (holder instanceof MarqueeHolder && marqueeList != null) {
            setMarquee((MarqueeHolder) holder);
        } else if (holder instanceof NumTwoHolder) {

        } else if (holder instanceof TitleHolder) {
            setTitle((TitleHolder) holder, position);
        } else if (holder instanceof NumThreeHolder) {

        } else if (holder instanceof NormalHolder) {

        }
    }

    @Override
    public void onAttachedToRecyclerView(RecyclerView recyclerView) {
        super.onAttachedToRecyclerView(recyclerView);
        RecyclerView.LayoutManager manager = recyclerView.getLayoutManager();
        if (manager instanceof GridLayoutManager) {
            final GridLayoutManager gridManager = ((GridLayoutManager) manager);
            gridManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
                @Override
                public int getSpanSize(int position) {
                    int type = getItemViewType(position);
                    switch (type) {
                        case BANNER:
                            return 12;
                        case COLUMN:
                            return 3;
                        case MARQUEE:
                            return 12;
                        case NUM_TWO:
                            return 6;
                        case TITLE:
                            return 12;
                        case NUM_THREE:
                            return 4;
                        case NORMAL:
                            return 6;
                        default:
                            return 12;
                    }
                }
            });
        }
    }

    public class BannerHolder extends RecyclerView.ViewHolder {
        @BindView(R.id.banner)
        Banner banner;

        BannerHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }

    public class ColumnHolder extends RecyclerView.ViewHolder {

        public ColumnHolder(View itemView) {
            super(itemView);
        }
    }

    public class MarqueeHolder extends RecyclerView.ViewHolder {
        @BindView(R.id.marquee)
        UPMarqueeView marquee;

        public MarqueeHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }

    public class NumTwoHolder extends RecyclerView.ViewHolder {

        public NumTwoHolder(View itemView) {
            super(itemView);
        }
    }

    public class TitleHolder extends RecyclerView.ViewHolder {
        @BindView(R.id.tv_title)
        TextView tvTitle;

        public TitleHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }

    public class NumThreeHolder extends RecyclerView.ViewHolder {

        public NumThreeHolder(View itemView) {
            super(itemView);
        }
    }


    public class NormalHolder extends RecyclerView.ViewHolder {

        public NormalHolder(View itemView) {
            super(itemView);
        }
    }

    /**
     * 轮播图图片列表
     */
    private void addBannerData() {
        imgList = new ArrayList<>();
        imgList.add(R.drawable.home_pic);
        imgList.add(R.drawable.home_pic);
        imgList.add(R.drawable.home_pic);
    }

    /**
     * 添加跑马灯数据
     */
    private void addMarqueeData() {
        marqueeList = new ArrayList<>();
        marqueeList.add("太疯狂！IPhone X首批1分钟卖光。");
        marqueeList.add("家人给2岁孩子喝这个，孩子智力倒退10岁!");
        marqueeList.add("自助餐里面的潜规则，想要吃回本其实很简单。");
        marqueeList.add("简直是白菜价！日本玩家33万甩卖15万张游戏王卡。");
    }

    /**
     * 绑定轮播图数据
     */
    private void setBanner(BannerHolder holder) {
        holder.banner.setBannerStyle(BannerConfig.NUM_INDICATOR);
        holder.banner.setImageLoader(new GlideImageLoader());
        holder.banner.setImages(imgList);
        holder.banner.setBannerAnimation(Transformer.Default);
        holder.banner.isAutoPlay(true);
        holder.banner.setDelayTime(3000);
        holder.banner.setIndicatorGravity(BannerConfig.CENTER);
        holder.banner.start();
    }

    /**
     * 设置跑马灯
     */
    private void setMarquee(MarqueeHolder holder) {
        List<View> views = new ArrayList<>();
        for (int i = 0; i < marqueeList.size(); i = i + 2) {
            LinearLayout view = (LinearLayout) inflater.inflate(R.layout.marquee_text, null);
            TextView textTop = (TextView) view.findViewById(R.id.text_top);
            TextView textBottom = (TextView) view.findViewById(R.id.text_bottom);
            textTop.setText(marqueeList.get(i));
            if (marqueeList.size() > i + 1) {
                textBottom.setText(marqueeList.get(i + 1));
            }
            views.add(view);
        }
        holder.marquee.setViews(views);
    }

    /**
     * 模块标题
     */
    private void setTitle(TitleHolder holder, int position) {
        switch (position) {
            case 14:
                holder.tvTitle.setText("精品推荐");
                break;
            case 18:
                holder.tvTitle.setText("猜你喜欢");
                break;
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253

最后附上完整的Demo下载：
http://download.csdn.net/download/a466302603/10048064

--------------------- 本文来自 卡蓝_ 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/a466302603/article/details/78411612?utm_source=copy

poclist
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
RecyclerView包含多种布局实现
Mr_Leixiansheng的博客
12-18 3739
内容：同一个RecyclerView包含多种布局。本例设置了三个不同的布局样式，都在同一个RecyclerView中展示出来。 尾末简要介绍了下GridLayoutManager的setSpanSizeLookup()方法 效果如下： 步骤： 1、定义三种不同布局，用于填充到RecyclerView中 2、加入RecyclerView控件，设置好adapter和数据 3、新建类继承...
Android recyclerView 实现复杂的item布局（如淘宝、京东、商城类首页）
热门推荐
吕氏春秋i
07-31 1万+
现在各种电商如火如荼，首页页面设计也颇有色彩。之前项目也是一个电商类购物app，主页设计了好几套样式 其中一个样式如下图相似涉及到： 轮播广告图banner、viewPager的轮播、沉浸式、item的复杂分割线、以及自定义的 主页头条ViewFlipper使用、glide图片加载、其他的琐碎知识点也略有涉及到。 先看下Gif效果图： 再下引用的第三方控件： //banne...
RecyclerView实现多type页面
最新发布
2401_84149339的博客
05-15 323
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
用RecyclerView实现新闻列表页，包括头部的图片轮播，两种Item显示方式，下拉刷新和上拉加载以及限制列表的加载条目数
miyuexingchen的专栏
08-24 5934
效果图：   1、实现列表头部的图片轮播，方式：给RecyclerView添加HeaderView。     RecyclerView默认是没有添加HeaderView方法的，所以我从网上找到了一种从外部添加View的方式加以实现。     要给RecyclerView添加HeaderView，首先要准备一个View： xml version="1.0" encodi
RecyclerView的多布局实现
Homjay的博客
06-27 2521
通过学习了RecyclerView的简单使用后，我们不得不讲讲RecyclerView的多布局的实现了，这种用法常见于各种电商类的App。要实现这个效果最主要是复写RecyclerView的适配器里面的getItemViewType()方法，这个方法是根据条件返回Item的类型。不知道你们有没有发现这个方法跟前面那三个方法中的onCreateViewHolder方法的参数viewTyp...
RecyclerView详细介绍-----多item布局（三）
曹银飞的专栏
11-11 6220
1.前言前面两篇文章主要介绍了recyclerview的基本使用，接下来介绍复杂一点的需求。 我们之前用listview的时候肯定遇到itemType>1的时候，我们定义多套item布局，借助getItemViewType（）实现多套布局。但是如果像淘宝首页，上面是listview的一个一个item，下面确是一个GridView的话，我们如何实现呢？当然之前有人会把GridView用ListVie
RecyclerView的使用之多种Item加载布局
09-02
这时，我们就需要实现RecyclerView的多Item布局加载。 首先，要实现多Item布局加载，我们需要做以下几个关键步骤： 1. **配置依赖库**： 在`build.gradle`文件中添加RecyclerView和CardView的依赖。这两个库由...
RecyclerView多Item布局加载.rar
07-30
在这个"RecyclerView多Item布局加载.rar"压缩包中，很显然，包含的是一些关于如何在RecyclerView中实现多种不同布局样式的示例代码。 首先，RecyclerView的核心概念是ViewHolder模式，它通过复用已有的视图来提高...
Android RecyclerView加载不同布局简单实现
09-01
以上就是实现RecyclerView加载不同布局的基本步骤。在实际应用中，可能还需要处理更多细节，如数据的加载、监听事件等。通过这种方式，我们可以创建出更加灵活、多样的列表展示效果，提高用户体验。记得在项目中添加...
Android RecyclerView加载两种布局的方法
08-31
当需要在RecyclerView中加载不同的布局时，比如在列表的头部添加一个特殊的视图或者混合显示不同类型的数据，就需要使用到多布局加载。本文将详细介绍如何在Android RecyclerView中加载两种布局。 首先，创建一个...
RecyclerView 实现多种布局
11-10
写了个Demo，RecyclerView实现不同布局的demo，上半部分是Gridview，下半部分是ListView，目前还没有添加点击的监听回调，大家可以自行添加。
HMWidget:仿淘宝 App 首页豆腐块布局
06-16
仿淘宝 App 首页豆腐块布局 完成初步功能 截图
RecyclerView 加载复杂多个多种布局，完美解决控件复用等等问题
04-08
本篇文章将深入探讨如何使用RecyclerView加载复杂的多个多种布局，以及如何解决控件复用等问题。 首先，RecyclerView的核心优势在于其高效的视图复用模型，类似于ListView的ViewHolder模式。每个条目视图都封装在一...
RecyclerView 分组 item实现不同布局
10-26
在Android开发中，RecyclerView是一个非常重要的组件，它用于展示数据集...在实际项目中，还可以根据需求扩展Adapter，支持更多类型的item布局，同时优化性能，如使用DiffUtil计算数据集的变化，避免不必要的视图更新。
Android-使用Kotlin写的实现Android的Recyclerview的多种item布局
08-13
在Kotlin语言的支持下，实现Recyclerview的多种item布局变得更加简洁和高效。本教程将深入探讨如何在Android项目中使用Kotlin来实现这一功能。 首先，Recyclerview的基础知识是必要的。Recyclerview通过ViewHolder...
一个RecyclerView列表显示多种类型的Item
Dway
03-29 3019
一个列表中Item的显示可能有多种类型，比如Item的界面有多个类型，或者Item的数据有多个类型。 以下自定义了一个Adapter的框架结构，代码简洁，只需稍作修改就可以使用。 /** * 一个RecyclerView显示多种不同数据类型或界面的Item * ldw */ public class MyAdapter extends RecyclerView.Adapter {
RecyclerView用法------展示多种类型Item数据
虫逗蚊子的博客
03-23 672
如果之前你用过ListView实现过此功能，那么你一定对下面这两个方法并不陌生@Override public int getItemViewType(int position) { return super.getItemViewType(position); } @Override public int getViewTypeCount() {...
android RecyclerView使用（二）多类别item
hua93的博客
07-30 1558
在很多地方我们需要用到列表，而列表又有多种类别的内容显示， 现在列表一般采用recyclerview，那么如何在recyclerview中添加多类别的内容呢？ 首先当然是要添加依赖 compile 'com.android.support:recyclerview-v7:26.0.0-alpha1' 在main_activity.xml中添加控件： &lt;?xml version=...
android开发recyclerView实现加载更多
02-23
实现RecyclerView的加载更多功能可以通过以下步骤来完成： 1. 首先，在你的布局文件中添加RecyclerView控件，并为其指定一个唯一的id，例如： ```xml <androidx.recyclerview.widget.RecyclerView android:id="@+...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值