Android使用分类型RecyclerView仿各大商城首页,android view

10
回复
1661
查看
[复制链接]

475

主题

1179

帖子

5777

安币

手工艺人

发表于 2017-12-7 12:58:10 | 显示全部楼层 |阅读模式

        **正所谓,一入商城深似海~
商城类的app,确实是有许多东西值得学习,但是只要略微斟酌一下,你又会发现,它们之间存在着许多不谋而合的相似,也就是所谓的雷同~既然如此,让我们也来接下地气,先从一个简单的首页做起吧~**

        实现的效果如下图:

        

        1.大布局就是一个简单的recyclerview:

        也可以通过添加多个header实现

        4.这里我仅以四种类型为例

[Java] 查看源文件 复制代码
/** 
 * 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()方法

[Java] 查看源文件 复制代码
/** 
  * 数据对象 
  */ 
 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种类型c黑色星期五(使用的是banner)的适配器

[Java] 查看源文件 复制代码
@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种类型c今日新品c(使用gridview实现)的适配器

[Java] 查看源文件 复制代码
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 

        5.3 第3种类型c品牌福利c(直接使用imagview)

[Java] 查看源文件 复制代码
@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种类型c搭配趋势c(使用recyclerview实现)的适配器

[Java] 查看源文件 复制代码
@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); 
  } 
 } 




[Java] 查看源文件 复制代码
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); 
  } 
 } 
} 



发表于 2017-12-8 03:36:36 | 显示全部楼层
感谢分享,安卓巴士有你更精彩:lol

4

主题

9735

帖子

790

安币

代码手工艺人

Rank: 4

发表于 2017-12-8 20:51:42 | 显示全部楼层
感谢分享,楼主V5~

28

主题

1万

帖子

1358

安币

Android大神

小白

Rank: 6Rank: 6

发表于 2017-12-9 19:18:01 | 显示全部楼层
每次我都积极回帖的,想要安币~

7

主题

9633

帖子

1958

安币

Android大神

Rank: 6Rank: 6

发表于 2017-12-10 08:37:21 | 显示全部楼层
帮帮顶顶!!

85

主题

9852

帖子

2189

安币

Android大神

Rank: 6Rank: 6

发表于 2017-12-10 23:44:38 | 显示全部楼层
不错不错,楼主辛苦了。。。

465

主题

9969

帖子

803

安币

代码手工艺人

Rank: 4

发表于 2017-12-11 08:51:08 | 显示全部楼层
安卓巴士是个不错的网站,我来顶个贴~

0

主题

67

帖子

437

安币

攻城狮

Rank: 3Rank: 3

QQ
发表于 2018-6-21 09:32:04 | 显示全部楼层
顶一下看看
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粤ICP备15117877号 )