**正所謂，一入商城深似海~
商城類的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); } } } 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
