高仿各大商城首页---使用分类型的RecyclerView来实现

上一篇我们做了一个高仿各大商城的引导页，那今天让我继续。

正所谓，一入商城深似海~

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

实现的效果如下图：

准备：

扫描二维码关注公众号，回复： 3519948 查看本文章

①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：

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_home"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/titlebar" />
    

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

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

（注：bean类WomenBean直接使用GsonFormat生成）

 /**
     * 使用okhttpUtils进行联网请求数据
     */
    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);

                        //联网成功后使用fastjson解析
                        processData(response);
                    }
                });
    }

// fastjson解析数据
    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<WomenBean.WomenData.ModuleBean> moduleBeanList = parseArray(module, WomenBean.WomenData.ModuleBean.class);
        //测试是否解析数据成功
        //String strTest=moduleBeanList.get(0).getC_title();
        //Log.e("TAG",strTest);

        if (moduleBeanList != null) {
            //有数据
            //设置适配器
            homeRecycleAdapter = new HomeRecycleViewAdapter(mContext, moduleBeanList);
            rvHome.setAdapter(homeRecycleAdapter);

            //recycleView不仅要设置适配器还要设置布局管理者,否则图片不显示
            //第一个参数是上下文，第二个参数是只有一列
            GridLayoutManager manager = new GridLayoutManager(getActivity(), 1);
            rvHome.setLayoutManager(manager);
        }
    }

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

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

public class HomeRecycleViewAdapter extends RecyclerView.Adapter {
    /**
     * 相当于getView创建ViewHolder布局
     *
     * @param parent
     * @param viewType 当前的类型
     * @return
     */
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return null;
    }

    /**
     * 相当于getView中的绑定数据模块
     *
     * @param holder
     * @param position
     */
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

    }

    /**
     * 总共有多少个item
     * @return
     */
    @Override
    public int getItemCount() {
        //注：这个在开发过程中是从1-->2-->3...慢慢增加的
        return 0;
    }

    /**
     *得到类型
     */
    @Override
    public int getItemViewType(int position) {
        return super.getItemViewType(position);
    }
}

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

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

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

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