Android使用分類型RecyclerView仿各大商城首頁

發(fā)布時間：2020-10-16 03:59:10 來源：腳本之家閱讀：163 作者：kklxb 欄目：移動開發(fā)

**正所謂，一入商城深似海~
商城類的App，確實是有許多東西值得學(xué)習(xí)，但是只要略微斟酌一下，你又會發(fā)現(xiàn)，它們之間存在著許多不謀而合的相似，也就是所謂的雷同~既然如此，讓我們也來接下地氣，先從一個簡單的首頁做起吧~**

實現(xiàn)的效果如下圖：

1.大布局就是一個簡單的RecyclerView：

也可以通過添加多個header實現(xiàn)

4.這里我僅以四種類型為例

/** 
 * 4種類型 
 */ 
 /** 
 * 類型1：黑色星期五--使用banner實現(xiàn) 
 */ 
 public static final int BLACK_5_BANNER0 = 0; 
 /** 
 *類型2：今日新品--使用GridView實現(xiàn) 
 */ 
 public static final int TODAY_NEW_GV1 = 1; 
 /** 
 * 類型3：品牌福利--使用ImageView實現(xiàn) 
 */ 
 public static final int PIN_PAI_IV2=2; 

 /** 
 * 類型4：搭配趨勢--使用RecyclerView實現(xiàn) 
 */ 
 public static final int DAPEIQS_GV3 =3; 


 /** 
 * 當(dāng)前類型 
 */ 
 public int currentType = BLACK_5_BANNER0;

寫構(gòu)造器并傳入?yún)?shù)，完善getItemCount() 和 getItemType()方法

/** 
  * 數(shù)據(jù)對象 
  */ 
 private final Context mContext; 
 private final List<WomenBean.WomenData.ModuleBean> moduleBeanList; 
 //以后用它來初始化布局 
 private final LayoutInflater mLayoutInflater; 

 //構(gòu)造器 
 public HomeRecycleViewAdapter3(Context mContext, List<WomenBean.WomenData.ModuleBean> moduleBeanList) { 
  this.mContext = mContext; 
  this.moduleBeanList = moduleBeanList; 
  //以后用它來初始化布局 
  mLayoutInflater = LayoutInflater.from(mContext); 
 } 


 @Override 
 public int getItemCount() { 
  //以后完成后改為4，現(xiàn)在只完成第一種類型暫時寫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.下面就來一一實現(xiàn)這四種類型

5.1設(shè)置第1種類型–黑色星期五（使用的是banner）的適配器

@Override 
 public int getItemCount() { 
  //以后完成后改為4，現(xiàn)在只完成第一種類型暫時寫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設(shè)置第2種類型–今日新品–（使用GridView實現(xiàn)）的適配器

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(); 
  } 

  //裝配數(shù)據(jù) 
  WomenBean.WomenData.ModuleBean.DataBean datasig = module1data.get(position); 

  //使用Glide加載圖片 
  Glide.with(mContext).load(datasig.getImg()).into(holder.iv_channel); 
  //設(shè)置文本 
  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，現(xiàn)在只完成第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() //設(shè)置淡入淡出效果，默認(rèn)300ms，可以傳參 
     .into(ivNewChok); 
  } 
 }

5.4設(shè)置第4種類型–搭配趨勢–（使用RecyclerView實現(xiàn)）的適配器

@Override 
 public int getItemCount() { 
  //四種類型都已經(jīng)完成，返回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.已有數(shù)據(jù) 
   //2.設(shè)置適配器 
   DaPeiQSRecycleViewAdapter adapter = new DaPeiQSRecycleViewAdapter(mContext, dapeiqs6data); 
   dapeiqs_rv.setAdapter(adapter); 

   //recycleView不僅要設(shè)置適配器還要設(shè)置布局管理者,否則圖片不顯示 
   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); 
  } 
 } 
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

Android使用分類型RecyclerView仿各大商城首頁

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽