高仿各大商城首页(使用分类型 RecyclerView 实现)

4,286 阅读4分钟
原文链接: blog.csdn.net

一入商城深似海~

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


实现的效果如下图:



准备

①build.gradle文件需要添加的依赖:

compile 'com.jakewharton:butterknife:7.0.1'  
  compile 'com.android.support:recyclerview-v7:25.0.1'  
  compile 'com.zhy:okhttputils:2.6.2'  
  compile 'com.alibaba:fastjson:1.2.21'  
  compile 'com.youth.banner:banner:1.4.4'  
  compile 'com.github.bumptech.glide:glide:3.7.0'  

②相关的联网权限不要忘了!


现在正式开始吧

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

  

2.接着我们就要实例化RecyclerView,并设置适配器了。

但是在设置适配器之前我们要先准备好数据,这里我们使用okhttputils进行联网请求数据,并使用fastJson进行解析:

(注:bean类WomenBean直接使用GsonFormat生成)

 
 
  
   private void getDataFromNet() {  
       String url = "http://api.funwear.com/mbfun_server/index.php?m=Home&a=getAppLayoutV2&page=home&cid=2&deviceCode=00000000-6469-5d7a-ffff-ffff99d603a9&osCode=android&osVersion=19&deviceId=00000000-6469-5d7a-ffff-ffff99d603a9&token=&source=android&version=v4.2.2&osName=HTC+M8t&appName=youfanguanfang";  
       OkHttpUtils.  
               get()  
               .url(url)  
               .build()  
               .execute(new StringCallback() {  
                   @Override  
                   public void onError(okhttp3.Call call, Exception e, int id) {  
                       Log.e("TAG", "联网失败" + e.getMessage());  
                   }  
  
                   @Override  
                   public void onResponse(String response, int id) {  
                       Log.e("TAG", "联网成功==" + response);  
  
                         
                       processData(response);  
                   }  
               });  
   }  

  
    private void processData(String json) {  
        JSONObject jsonObject = JSON.parseObject(json);  
  
        String data = jsonObject.getString("data");  
        JSONObject jsonData = JSON.parseObject(data);  
  
        String module = jsonData.getString("module");  
        List moduleBeanList = parseArray(module, WomenBean.WomenData.ModuleBean.class);  
     
        if (moduleBeanList != null) {  
   
            homeRecycleAdapter = new HomeRecycleViewAdapter(mContext, moduleBeanList);  
            rvHome.setAdapter(homeRecycleAdapter);  

            GridLayoutManager manager = new GridLayoutManager(getActivity(), 1);  
            rvHome.setLayoutManager(manager);  
        }  
    }  

3.下面我们就可以来写我们的适配器类(HomeRecyclerViewAdapter.java)了:

让我们先来了解一下各个方法是来干什么的

public class HomeRecycleViewAdapter extends RecyclerView.Adapter {  
   
    @Override  
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {  
        return null;  
    }  
 
    @Override  
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {  
  
    }  
 
    @Override  
    public int getItemCount() {  
          
        return 0;  
    }  
    @Override  
    public int getItemViewType(int position) {  
        return super.getItemViewType(position);  
    }  
}  

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

 

   public static final int BLACK_5_BANNER0 = 0;  

   public static final int TODAY_NEW_GV1 = 1;  

   public static final int PIN_PAI_IV2=2;  

   public static final int DAPEIQS_GV3 =3;  

   public int currentType = BLACK_5_BANNER0;  

写构造器并传入参数,完善getItemCount() 和 getItemType()方法

 
 
  
    private final Context mContext;  
    private final List moduleBeanList;  
      
    private final LayoutInflater mLayoutInflater;  
  
      
    public HomeRecycleViewAdapter3(Context mContext, List moduleBeanList) {  
        this.mContext = mContext;  
        this.moduleBeanList = moduleBeanList;  
          
        mLayoutInflater = LayoutInflater.from(mContext);  
    }  
  
  
    @Override  
    public int getItemCount() {  
          
        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() {  
         
       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 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 module0data) {  
             
           List imageUrls = new ArrayList<>();  
           for (int i = 0; i < module0data.size(); i++) {                  string image =" module0data.get(i).getImg();  "                imageurls.add(image);  =""            }  =""              =""            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.with(context).load(path).into(imageview);  =""    }  <="" code="">
5.2设置 第2种类型--今日新品--(使用GridView实现)的适配器

public class TodayGVAdapter extends BaseAdapter {  
  
    private final Context mContext;  
    private final List module1data;  
  
    public TodayGVAdapter(Context mContext, List 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) {                              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.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() {  
             
           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 module0data = moduleBeanList.get(0).getData();  
               bbnViewHolder.setData(module0data);  
           } else if (getItemViewType(position) == TODAY_NEW_GV1) {  
               TODAYViewHolder todayViewHolder = (TODAYViewHolder) holder;  
               List module1data = moduleBeanList.get(1).getData();  
               todayViewHolder.setData(module1data);  
           } else if (getItemViewType(position) == PIN_PAI_IV2) {  
               PINPAIViewHolder pinpaiViewHolder = (PINPAIViewHolder) holder;  
               List 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 pinpai2data) {  
                 
               Glide.with(mContext)  
                       .load(pinpai2data.get(0).getImg())  
                       .diskCacheStrategy(DiskCacheStrategy.ALL)  
                       .crossFade()   
                       .into(ivNewChok);  
           }  
       }  

    5.4设置 第4种类型--搭配趋势--(使用RecyclerView实现)的适配器

    @Override  
       public int getItemCount() {  
             
           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) {  
                 
               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 module0data = moduleBeanList.get(0).getData();  
               bbnViewHolder.setData(module0data);  
           } else if (getItemViewType(position) == TODAY_NEW_GV1) {  
               TODAYViewHolder todayViewHolder = (TODAYViewHolder) holder;  
               List module1data = moduleBeanList.get(1).getData();  
               todayViewHolder.setData(module1data);  
           } else if (getItemViewType(position) == PIN_PAI_IV2) {  
               PINPAIViewHolder pinpaiViewHolder = (PINPAIViewHolder) holder;  
               List pinpai2data = moduleBeanList.get(2).getData();  
               pinpaiViewHolder.setData(pinpai2data);  
           } else if (getItemViewType(position) == DAPEIQS_GV3) {  
               DaPeiViewHolder dapeiViewHolder = (DaPeiViewHolder) holder;  
               List 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 dapeiqs6data) {  
                 
                 
               DaPeiQSRecycleViewAdapter adapter = new DaPeiQSRecycleViewAdapter(mContext, dapeiqs6data);  
               dapeiqs_rv.setAdapter(adapter);  
      
                 
               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 dapeiqs6data;  
      
        public DaPeiQSRecycleViewAdapter(Context mContext, List 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.with(mContext)  
                        .load(dapeiBean.getImg())  
                        .into(iv_figure);  
            }  
        }  
    }  

    到此,一个基本的商城首页就完成了,其实大家看了思路和代码后大概也都明白了,它并不难,只是比较花时间,需要对每种类型都进行相应的操作。所以现在你也可以没事来整个商城页面玩玩了~

    感兴趣的朋友可以看看我的源代码:(已上传至我的资源:商城首页.rar

    (ps:但是因为是从项目中抽出来的,所以可能会有些许凌乱,还望大家见谅~)