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

来源：互联网发布：网络八大超白金作家编辑：程序博客网时间：2024/04/30 21:29

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

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

商城类的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：

    <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:但是因为是从项目中抽出来的，所以可能会有些许凌乱，还望大家见谅~)

5 0