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

2024-10-15 19:28:03

**正所谓，一入商城深似海~
商城类的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);
  }
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Android使用Recyclerview实现图片水平自动循环滚动效果

简介: 本篇博客主要介绍的是如何使用RecyclerView实现图片水平方向自动循环(跑马灯效果) 效果图: 思路: 1.准备m张图片 1.使用Recyclerview实现,返回无数个(实际Interge.MAXVALUE)item,第n个item显示第n%m张图片 3.使用recyclerview.scrollBy 每个一段时间水平滚动一段距离 4.通过layoutManager.findFirstVisibleItemPosition()获取当前显示的第一个View是第几个item,上面
Android RecyclerView基本使用详解

什么是RecyclerView 关于RecyclerView,是一个主要用于展示和回收View的有一个控件,在官用了一句话来概括 RecyclerView 是一种通过提供有限的数据项窗口有效显示大数据集的视图. 基提供几个基本的功能, 控制其显示的方式 --->LayoutManager-(必需) 控制Item间的间隔 --->ItemDecoration--(非必需) 控制Item增删的动画--->ItemAnimator--(非必需) 以上就可以完成ListView大部的功能了,但是
Android RecyclerView的简单使用

本文实例为大家分享了Android RecyclerView使用的具体代码,供大家参考,具体内容如下 package com.itheima74.recyclerview; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.GridLayoutManager; import android.support.v7.widget.Rec
Android使用RecyclerView实现今日头条频道管理功能

使用过今日头条的伙计们对这个效果肯定很熟悉.拖拽可排序,点击标签后可以删除.今天我们采用RecyclerView来实现. 实现思路: 通过ItemTouchHelper来绑定RecyclerView的子控件触摸事件. 当滑动拖拽的时候,通知适配器来交换两个子控件的显示位置. 更改数据源,使数据源与子空间显示内容一致. 这就是实现的基本思路,是不是很简单?当然,首先要了解一下ItemTouchHelper这哥们儿是干啥的,有什么作用. This is a utility class to add
Android如何使用RecyclerView打造首页轮播图

先看看效果图: 停在中间自动翻页序言:最近接到一个任务,做一个类似上面自动翻页的功能.可以看到,这一屏中有三张图片显示出来了,有两张没有显示完全,看到设计图的时候第一反应是可以用viewpager来实现,但是任务却跟你开了一个天大的玩笑,要求是以最左边的图片为基准,也就是说,左边的图片也得显示完全,就像下图所示,后来仔细想想viewpager好像没有这样的功能,也有可能是我不知道,我也没有找到这样的文章或者信息,希望知道的简友私戳交流一下,感激不尽,好了,言归正传停在左边在开始之前呢,首先
Android RecyclerView使用方法详解

本文为大家分享了Android RecyclerView使用方法,供大家参考,具体内容如下 1.RecyclerView 是在Android support - v7 里面提供的新的列表组件,用来替代传统的ListView. . 要使用RecyclerView 需要给我工程添加 support:recycle-v7 的支持: app 右键 - Open Module Settings - Dependencies(依赖项) - 点 + 号 - 添加一个库 upport:recycle-v7
RecyclerView的简单使用

RecyclerView的功能很强大,本文为大家分享RecyclerView的简单使用方法. 效果图: activity_main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertica
Android ExpandableRecyclerView使用方法详解

本文为大家分享了Android ExpandableRecyclerView的使用,供大家参考,具体内容如下 1.目前只支持两级结构. 2.支持所有组同时全部展开,支持同一时间只能展开一组. 3.GroupView,ChildView高度自定义. 4.支持初始化数据时,指定展开某组数据. 5.支持GroupItem,ChildItem的Onlick,OnLongClick事件. 6.展开收起带动画. 效果图: 使用步骤:加入依赖 compile 'com.drawthink:expandable
android使用ItemDecoration给RecyclerView 添加水印

前言项目中有使用到水印效果,如下图所示.在实现过程中,最终选用ItemDecoration来实现,其中有两大步骤:自定义Drawable来完成水印图片.使用ItemDecoration来布局水印. Demo在 WatermarkFragment 中,效果图如下: 1. 自定义Drawable完成水印图片 public class MyDrawable extends Drawable { Paint mPaint; public MyDrawable() { mPaint = new Pain
Android使用RecyclerView实现列表数据选择操作

这些时间做安卓盒子项目,因为安卓电视的显示器比较大,所以一个界面显示很多数据 ,最多的时候,一个Actvity中用到了好几个RecyclerView. 在RecyclerView中实现Item选中处理时,发现用CheckBox的OnCheckedChangeListener监听事件时,会达不到预期,所以用了OnClickListener来实现. 主界面代码: public class CheckRecyclerViewActivity extends AppCompatActivity imp

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

相关推荐

随机推荐