Android使用分类型RecyclerView仿各大商城首页
发布时间 - 2026-01-10 23:10:26 点击率:次**正所谓,一入商城深似海~
商城类的App,确实是有许多东西值得学习,但是只要略微斟酌一下,你又会发现,它们之间存在着许多不谋而合的相似,也就是所谓的雷同~既然如此,让我们也来接下地气,先从一个简单的首页做起吧~**

实现的效果如下图:
1.大布局就是一个简单的RecyclerView:
也可以通过添加多个header实现
4.这里我仅以四种类型为例
/** * 4种类型 */ /** * 类型1:黑色星期五--使用banner实现 */ public static final int BLACK_5_BANNER0 = 0; /** *类型2:今日新品--使用GridView实现 */ public static final int TODAY_NEW_GV1 = 1; /** * 类型3:品牌福利--使用ImageView实现 */ public static final int PIN_PAI_IV2=2; /** * 类型4:搭配趋势--使用RecyclerView实现 */ public static final int DAPEIQS_GV3 =3; /** * 当前类型 */ public int currentType = BLACK_5_BANNER0;
写构造器并传入参数,完善getItemCount() 和 getItemType()方法
/**
* 数据对象
*/
private final Context mContext;
private final List<WomenBean.WomenData.ModuleBean> moduleBeanList;
//以后用它来初始化布局
private final LayoutInflater mLayoutInflater;
//构造器
public HomeRecycleViewAdapter3(Context mContext, List<WomenBean.WomenData.ModuleBean> moduleBeanList) {
this.mContext = mContext;
this.moduleBeanList = moduleBeanList;
//以后用它来初始化布局
mLayoutInflater = LayoutInflater.from(mContext);
}
@Override
public int getItemCount() {
//以后完成后改为4,现在只完成第一种类型暂时写1
return 1;
}
@Override
public int getItemViewType(int position) {
switch (position) {
case BLACK_5_BANNER0:
currentType = BLACK_5_BANNER0;
break;
case TODAY_NEW_GV1:
currentType = TODAY_NEW_GV1;
break;
case PIN_PAI_IV2:
currentType = PIN_PAI_IV2;
break;
case DAPEIQS_GV3:
currentType = DAPEIQS_GV3;
break;
}
return currentType;
}
5.下面就来一一实现这四种类型
5.1设置 第1种类型–黑色星期五(使用的是banner)的适配器
@Override
public int getItemCount() {
//以后完成后改为4,现在只完成第一种类型暂时写1
return 1;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (viewType == BLACK_5_BANNER0) {
return new BBNViewHolder(mContext, mLayoutInflater.inflate(R.layout.banner_viewpager, null));
}
return null;
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
if (getItemViewType(position) == BLACK_5_BANNER0) {
BBNViewHolder bbnViewHolder = (BBNViewHolder) holder;
List<WomenBean.WomenData.ModuleBean.DataBean> module0data = moduleBeanList.get(0).getData();
bbnViewHolder.setData(module0data);
}
}
public class BBNViewHolder extends RecyclerView.ViewHolder {
private final Context mContext;
private Banner banner;
public BBNViewHolder(Context mContext, View itemView) {
super(itemView);
this.mContext = mContext;
banner = (Banner) itemView.findViewById(R.id.banner);
}
public void setData(List<WomenBean.WomenData.ModuleBean.DataBean> module0data) {
//得到图片地址的集合
List<String> imageUrls = new ArrayList<>();
for (int i = 0; i < module0data.size(); i++) {
String image = module0data.get(i).getImg();
imageUrls.add(image);
}
//新版的banner的使用----偷下懒的使用方法
banner.setImages(imageUrls).setImageLoader(new GlideImageLoader()).start();
}
}
public class GlideImageLoader extends ImageLoader {
@Override
public void displayImage(Context context, Object path, ImageView imageView) {
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
//Glide 加载图片简单用法
Glide.with(context).load(path).into(imageView);
}
}
5.2设置 第2种类型–今日新品–(使用GridView实现)的适配器
public class TodayGVAdapter extends BaseAdapter {
private final Context mContext;
private final List<WomenBean.WomenData.ModuleBean.DataBean> module1data;
public TodayGVAdapter(Context mContext, List<WomenBean.WomenData.ModuleBean.DataBean> module1data) {
this.mContext = mContext;
this.module1data = module1data;
}
@Override
public int getCount() {
return module1data == null ? 0 : module1data.size();
}
@Override
public Object getItem(int i) {
return null;
}
@Override
public long getItemId(int i) {
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup viewGroup) {
ViewHolder holder;
if (convertView == null) {
//item的布局:垂直线性,ImagView+TextView
convertView = View.inflate(mContext, R.layout.item_channel, null);
holder = new ViewHolder();
holder.iv_channel = (ImageView) convertView.findViewById(R.id.iv_channel);
holder.tv_channel = (TextView) convertView.findViewById(R.id.tv_channel);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
//装配数据
WomenBean.WomenData.ModuleBean.DataBean datasig = module1data.get(position);
//使用Glide加载图片
Glide.with(mContext).load(datasig.getImg()).into(holder.iv_channel);
//设置文本
holder.tv_channel.setText(datasig.getTitle());
return convertView;
}
public static class ViewHolder {
public ImageView iv_channel;
public TextView tv_channel;
}
}
5.3 第3种类型–品牌福利–(直接使用ImagView)
@Override
public int getItemCount() {
//以后完成后改为4,现在只完成第3种类型暂时写3
return 3;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (viewType == BLACK_5_BANNER0) {
return new BBNViewHolder(mContext, mLayoutInflater.inflate(R.layout.banner_viewpager, null));
} else if (viewType == TODAY_NEW_GV1) {
return new TODAYViewHolder(mContext, mLayoutInflater.inflate(R.layout.gv_channel, null));
} else if (viewType == PIN_PAI_IV2) {
return new PINPAIViewHolder(mContext, mLayoutInflater.inflate(R.layout.iv_pinpai, null));
}
return null;
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
if (getItemViewType(position) == BLACK_5_BANNER0) {
BBNViewHolder bbnViewHolder = (BBNViewHolder) holder;
List<WomenBean.WomenData.ModuleBean.DataBean> module0data = moduleBeanList.get(0).getData();
bbnViewHolder.setData(module0data);
} else if (getItemViewType(position) == TODAY_NEW_GV1) {
TODAYViewHolder todayViewHolder = (TODAYViewHolder) holder;
List<WomenBean.WomenData.ModuleBean.DataBean> module1data = moduleBeanList.get(1).getData();
todayViewHolder.setData(module1data);
} else if (getItemViewType(position) == PIN_PAI_IV2) {
PINPAIViewHolder pinpaiViewHolder = (PINPAIViewHolder) holder;
List<WomenBean.WomenData.ModuleBean.DataBean> pinpai2data = moduleBeanList.get(2).getData();
pinpaiViewHolder.setData(pinpai2data);
}
}
class PINPAIViewHolder extends RecyclerView.ViewHolder {
private final Context mContext;
@Bind(R.id.iv_new_chok)
ImageView ivNewChok;
PINPAIViewHolder(Context mContext, View itemView) {
super(itemView);
this.mContext = mContext;
ButterKnife.bind(this, itemView);
ivNewChok = (ImageView) itemView.findViewById(R.id.iv_new_chok);
}
public void setData(List<WomenBean.WomenData.ModuleBean.DataBean> pinpai2data) {
//使用Glide加载图片
Glide.with(mContext)
.load(pinpai2data.get(0).getImg())
.diskCacheStrategy(DiskCacheStrategy.ALL)
.crossFade() //设置淡入淡出效果,默认300ms,可以传参
.into(ivNewChok);
}
}
5.4设置 第4种类型–搭配趋势–(使用RecyclerView实现)的适配器
@Override
public int getItemCount() {
//四种类型都已经完成,返回4
return 4;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (viewType == BLACK_5_BANNER0) {
return new BBNViewHolder(mContext, mLayoutInflater.inflate(R.layout.banner_viewpager, null));
} else if (viewType == TODAY_NEW_GV1) {
return new TODAYViewHolder(mContext, mLayoutInflater.inflate(R.layout.gv_channel, null));
} else if (viewType == PIN_PAI_IV2) {
return new PINPAIViewHolder(mContext, mLayoutInflater.inflate(R.layout.iv_pinpai, null));
} else if (viewType == DAPEIQS_GV3) {
//布局:垂直线性,TextView+RecyclerView
return new DaPeiViewHolder(mContext, mLayoutInflater.inflate(R.layout.dapeiqs_rv, null));
}
return null;
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
if (getItemViewType(position) == BLACK_5_BANNER0) {
BBNViewHolder bbnViewHolder = (BBNViewHolder) holder;
List<WomenBean.WomenData.ModuleBean.DataBean> module0data = moduleBeanList.get(0).getData();
bbnViewHolder.setData(module0data);
} else if (getItemViewType(position) == TODAY_NEW_GV1) {
TODAYViewHolder todayViewHolder = (TODAYViewHolder) holder;
List<WomenBean.WomenData.ModuleBean.DataBean> module1data = moduleBeanList.get(1).getData();
todayViewHolder.setData(module1data);
} else if (getItemViewType(position) == PIN_PAI_IV2) {
PINPAIViewHolder pinpaiViewHolder = (PINPAIViewHolder) holder;
List<WomenBean.WomenData.ModuleBean.DataBean> pinpai2data = moduleBeanList.get(2).getData();
pinpaiViewHolder.setData(pinpai2data);
} else if (getItemViewType(position) == DAPEIQS_GV3) {
DaPeiViewHolder dapeiViewHolder = (DaPeiViewHolder) holder;
List<WomenBean.WomenData.ModuleBean.DataBean> dapeiqs6data = moduleBeanList.get(6).getData();
dapeiViewHolder.setData(dapeiqs6data);
}
}
class DaPeiViewHolder extends RecyclerView.ViewHolder {
private final Context mContext;
private RecyclerView dapeiqs_rv;
public DaPeiViewHolder(Context mContext, View itemView) {
super(itemView);
this.mContext = mContext;
dapeiqs_rv = (RecyclerView) itemView.findViewById(R.id.dapeiqs_rv);
}
public void setData(List<WomenBean.WomenData.ModuleBean.DataBean> dapeiqs6data) {
//1.已有数据
//2.设置适配器
DaPeiQSRecycleViewAdapter adapter = new DaPeiQSRecycleViewAdapter(mContext, dapeiqs6data);
dapeiqs_rv.setAdapter(adapter);
//recycleView不仅要设置适配器还要设置布局管理者,否则图片不显示
LinearLayoutManager manager = new LinearLayoutManager(mContext, LinearLayoutManager.HORIZONTAL, false);
dapeiqs_rv.setLayoutManager(manager);
}
}
public class DaPeiQSRecycleViewAdapter extends RecyclerView.Adapter {
private final Context mContext;
private final List<WomenBean.WomenData.ModuleBean.DataBean> dapeiqs6data;
public DaPeiQSRecycleViewAdapter(Context mContext, List<WomenBean.WomenData.ModuleBean.DataBean> dapeiqs6data) {
this.mContext = mContext;
this.dapeiqs6data = dapeiqs6data;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new MyViewHolder(LayoutInflater.from(mContext).inflate(R.layout.item_dapeiqs, null));
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
MyViewHolder myViewHolder = (MyViewHolder) holder;
myViewHolder.setData(position);
}
@Override
public int getItemCount() {
return dapeiqs6data.size();
}
class MyViewHolder extends RecyclerView.ViewHolder {
private ImageView iv_figure;
public MyViewHolder(View itemView) {
super(itemView);
iv_figure = (ImageView) itemView.findViewById(R.id.iv_figure);
}
public void setData(int position) {
WomenBean.WomenData.ModuleBean.DataBean dapeiBean = dapeiqs6data.get(position);
//使用Glide加载图片
Glide.with(mContext)
.load(dapeiBean.getImg())
.into(iv_figure);
}
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
# RecyclerView
# 商城首页
# Android仿美团下拉菜单(商品选购)实例代码
# Android仿美团分类下拉菜单实例代码
# Android编程实现仿美团或淘宝的多级分类菜单效果示例【附demo源码下载】
# Android仿美团淘宝实现多级下拉列表菜单功能
# Android使用RecyclerView仿美团分类界面
# 加载
# 四种
# 完成后
# 用它
# 第一种
# 的是
# 今日
# 是有
# 让我们
# 多个
# 已有
# 不谋而合
# 可以通过
# 为例
# 又会
# 既然如此
# 就来
# 首页
# 也来
# 大家多多
相关栏目:
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐:
制作公司内部网站有哪些,内网如何建网站?
Laravel Docker环境搭建教程_Laravel Sail使用指南
详解Android——蓝牙技术 带你实现终端间数据传输
Laravel如何使用Collections进行数据处理?(实用方法示例)
bootstrap日历插件datetimepicker使用方法
制作网站软件推荐手机版,如何制作属于自己的手机网站app应用?
如何在宝塔面板中创建新站点?
Laravel如何从数据库删除数据_Laravel destroy和delete方法区别
Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理
Laravel怎么做缓存_Laravel Cache系统提升应用速度的策略与技巧
西安专业网站制作公司有哪些,陕西省建行官方网站?
大型企业网站制作流程,做网站需要注册公司吗?
如何在云主机上快速搭建网站?
如何挑选最适合建站的高性能VPS主机?
详解免费开源的DotNet二维码操作组件ThoughtWorks.QRCode(.NET组件介绍之四)
微信小程序 scroll-view组件实现列表页实例代码
湖南网站制作公司,湖南上善若水科技有限公司做什么的?
浅析上传头像示例及其注意事项
Laravel如何实现用户注册和登录?(Auth脚手架指南)
js实现获取鼠标当前的位置
Laravel storage目录权限问题_Laravel文件写入权限设置
Laravel怎么发送邮件_Laravel Mail类SMTP配置教程
Laravel如何与Inertia.js和Vue/React构建现代单页应用
Laravel中的withCount方法怎么高效统计关联模型数量
高防服务器租用首荐平台,企业级优惠套餐快速部署
深圳网站制作的公司有哪些,dido官方网站?
Laravel如何发送邮件_Laravel Mailables构建与发送邮件的简明教程
Laravel如何使用Gate和Policy进行权限控制_Laravel权限判定与策略规则配置
Laravel如何集成Inertia.js与Vue/React?(安装配置)
Laravel怎么实现支付功能_Laravel集成支付宝微信支付
JS碰撞运动实现方法详解
百度浏览器ai对话怎么关 百度浏览器ai聊天窗口隐藏
开心动漫网站制作软件下载,十分开心动画为何停播?
Laravel辅助函数有哪些_Laravel Helpers常用助手函数大全
jQuery中的100个技巧汇总
清除minerd进程的简单方法
小米17系列还有一款新机?主打6.9英寸大直屏和旗舰级影像
百度浏览器如何管理插件 百度浏览器插件管理方法
通义万相免费版怎么用_通义万相免费版使用方法详细指南【教程】
瓜子二手车官方网站在线入口 瓜子二手车网页版官网通道入口
西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站?
Laravel怎么使用Session存储数据_Laravel会话管理与自定义驱动配置【详解】
Windows10如何更改计算机工作组_Win10系统属性修改Workgroup
Swift开发中switch语句值绑定模式
JS中对数组元素进行增删改移的方法总结
微信推文制作网站有哪些,怎么做微信推文,急?
PHP 实现电台节目表的智能时间匹配与今日/明日轮播逻辑
Laravel如何使用Gate和Policy进行授权?(权限控制)
Laravel如何使用Livewire构建动态组件?(入门代码)
北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱?

