Android商城开发系列（七）—— 使用RecyclerView展示首页数据

　　前面我们讲到了使用OkHttp请求网络和FastJson解析数据了，接下来我们就开始把获取到的数据通过数据适配器展示在页面上了。Adapter是用来帮助填充数据的中间桥梁，简单点说就是：将各种数据以合适的形式显示到view上,提供给用户看！

　　商城首页的数据是使用RecyclerView进行展示的，下面我们来讲讲如何将获取到的数据通过RecyclerView展示。

　　首先看一下HomeFragment的布局代码，代码如下：

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent">

     <!--搜索框布局-->
     <include
         android:id="@+id/titlebar"
         layout="@layout/titlebar"/>

     <!--展示数据的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" />

     <!--回到顶部图片按钮-->
     <ImageButton
         android:id="@+id/ib_top"
         android:layout_width="40dp"
         android:layout_height="40dp"
         android:layout_alignParentBottom="true"
         android:layout_alignParentRight="true"
         android:layout_marginBottom="20dp"
         android:layout_marginRight="20dp"
         android:background="@mipmap/ic_launcher"
         android:visibility="gone" />

 </RelativeLayout>

　　布局代码很简单，整体是一个RelativeLayout布局，里面有一个RecyclerView，用于展示数据，接下来我们看一下HomeFragment的代码：

 package com.nyl.shoppingmall.home.fragment;

 import android.support.v7.widget.GridLayoutManager;
 import android.support.v7.widget.RecyclerView;
 import android.util.Log;
 import android.view.View;
 import android.widget.ImageView;
 import android.widget.TextView;
 import android.widget.Toast;

 import com.alibaba.fastjson.JSON;
 import com.nyl.shoppingmall.R;
 import com.nyl.shoppingmall.base.BaseFragment;
 import com.nyl.shoppingmall.home.adapter.HomeFragmentAdapter;
 import com.nyl.shoppingmall.home.bean.ResultBeanData;
 import com.nyl.shoppingmall.utils.Constants;
 import com.zhy.http.okhttp.OkHttpUtils;
 import com.zhy.http.okhttp.callback.StringCallback;

 import okhttp3.Call;

 /**
  * 首页Fragment
  */
 public class HomeFragment extends BaseFragment implements View.OnClickListener {

     private final static String TAG = HomeFragment.class.getSimpleName();

     private TextView tv_search_home;
     private TextView tv_message_home;
     private RecyclerView rv_home;
     private ImageView ib_top;
     private HomeFragmentAdapter adapter;
     //返回的数据
     private ResultBeanData.ResultBean resultBean;

     @Override
     public View initView() {
         Log.e(TAG,"主页面的Fragment的UI被初始化了");
         View view = View.inflate(mContext,R.layout.fragment_home,null);
         //初始化布局控件
         tv_search_home = (TextView) view.findViewById(R.id.tv_search_home);
         tv_message_home = (TextView) view.findViewById(R.id.tv_message_home);
         rv_home = (RecyclerView) view.findViewById(R.id.rv_home);
         ib_top = (ImageView) view.findViewById(R.id.ib_top);

         //设置点击事件
         ib_top.setOnClickListener(this);
         tv_search_home.setOnClickListener(this);
         tv_message_home.setOnClickListener(this);
         return view;
     }

     @Override
     public void initData() {
         super.initData();
         Log.e(TAG,"主页面的Fragment的数据被初始化了");

         //联网请求首页数据
         getDataFromNet();
     }

     private void getDataFromNet() {
        // String url = Constants.HOME_URL;
         OkHttpUtils
                 .get()
                 .url(Constants.HOME_URL)
                 .build()
                 .execute(new StringCallback()
                 {

                     /**
                      * 请求失败的时候回调
                      * @param call
                      * @param e
                      * @param id
                      */
                     @Override
                     public void onError(Call call, Exception e, int id) {

                         Log.e(TAG,"首页请求失败=="+e.getMessage());
                     }

                     /**
                      * 当联网成功的时候回调
                      * @param response 请求成功数据
                      * @param id
                      */
                     @Override
                     public void onResponse(String response, int id) {

                         Log.e(TAG,"首页请求成功=="+response);
                         //解析数据
                         processData(response);
                     }
                 });
     }

     /**
      * 解析数据
      * @param json
      */
     private void processData(String json) {
         //使用FastJson去解析数据，将Json字符串转换成一个ResultBeanData对象
         ResultBeanData resultBeanData = JSON.parseObject(json,ResultBeanData.class);
         resultBean = resultBeanData.getResult();

         if (resultBean != null){
             //有数据就设置适配器
             adapter = new HomeFragmentAdapter(mContext,resultBean);
             rv_home.setAdapter(adapter);

             GridLayoutManager manager = new GridLayoutManager(mContext,1);
             //设置跨度大小监听
             manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
                 @Override
                 public int getSpanSize(int position) {
                     if (position <= 3){
                         //隐藏
                         ib_top.setVisibility(View.GONE);
                     }else {
                         //显示
                         ib_top.setVisibility(View.VISIBLE);
                     }
                     //只能返回1
                     return 1;
                 }
             });
             //设置布局管理者
             rv_home.setLayoutManager(manager);
         }else {
             //没有数据

         }

         Log.e(TAG,"解析成功=="+resultBean.getHot_info().get(0).getName());
     }

     @Override
     public void onClick(View view) {
         switch (view.getId()){
             case R.id.ib_top: //置顶的监听
                 rv_home.scrollToPosition(0);
                 break;
             case R.id.tv_search_home:  //搜索的监听
                 Toast.makeText(mContext,"搜索",Toast.LENGTH_SHORT).show();
                 break;
             case R.id.tv_message_home: //消息监听
                 Toast.makeText(mContext,"进入消息中心",Toast.LENGTH_SHORT).show();
                 break;
         }
     }
 }

　　HomeFragmet的代码也很简单，首先是初始化视图，然后联网调用接口获取数据，通过FastJson解析数据，然后将数据传入到HomeFragmentAdapter进行展示，接下来我们看一下HomeFragmentAdapter，这个适配器是展示数据的具体实现：

　　HomeFragmentAdapter类代码如下所示：

 package com.nyl.shoppingmall.home.adapter;

 import android.content.Context;
 import android.content.Intent;
 import android.os.Handler;
 import android.os.Message;
 import android.support.v4.view.PagerAdapter;
 import android.support.v4.view.ViewPager;
 import android.support.v7.widget.LinearLayoutManager;
 import android.support.v7.widget.RecyclerView;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.AdapterView;
 import android.widget.GridView;
 import android.widget.ImageView;
 import android.widget.TextView;
 import android.widget.Toast;

 import com.bumptech.glide.Glide;
 import com.nyl.shoppingmall.R;
 import com.nyl.shoppingmall.app.activity.GoodsInfoActivity;
 import com.nyl.shoppingmall.home.bean.ResultBeanData;
 import com.nyl.shoppingmall.utils.Constants;
 import com.youth.banner.Banner;
 import com.youth.banner.BannerConfig;
 import com.youth.banner.Transformer;
 import com.youth.banner.listener.OnBannerClickListener;
 import com.youth.banner.listener.OnLoadImageListener;
 import com.zhy.magicviewpager.transformer.ScaleInTransformer;

 import java.text.SimpleDateFormat;
 import java.util.ArrayList;
 import java.util.Date;
 import java.util.List;

 /**
  * 首页适配器
  */

 public class HomeFragmentAdapter extends RecyclerView.Adapter{

     /**
      * 广告幅类型
      */
     public static final int BANNER = 0;

     /**
      * 频道类型
      */
     public static final int CHANNEL = 1;

     /**
      * 活动类型
      */
     public static final int ACT = 2;

     /**
      * 秒杀类型
      */
     public static final int SECKILL = 3;

     /**
      * 推荐类型
      */
     public static final int RECOMMEND = 4;

     /**
      * 热卖类型
      */
     public static final int HOT = 5;

     /**
      * 初始化布局
      */
     private LayoutInflater mLayoutInflater;

     /**
      * 数据
      */
     private ResultBeanData.ResultBean resultBean;

     private Context mContext;

     /**
      * 当前类型
      */
     private int currenType = BANNER;

     public HomeFragmentAdapter(Context mContext, ResultBeanData.ResultBean resultBean) {
         this.mContext = mContext;
         this.resultBean = resultBean;
         mLayoutInflater = LayoutInflater.from(mContext);
     }

     /**
      * 根据视图类型创建ViewHolder
      * @param parent
      * @param viewType 当前的视图类型
      * @return RecyclerView.ViewHolder
      */
     @Override
     public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
         //广告福
         if (viewType == BANNER){
             //创建BannerViewHolder，Banner里面传布局文件
             return new BannerViewHolder(mContext,mLayoutInflater.inflate(R.layout.banner_viewpager,null));
             //频道
         }else if (viewType == CHANNEL){
             return new ChannelViewHolder(mContext,mLayoutInflater.inflate(R.layout.channel_item,null));
             //活动
         }else if (viewType == ACT){
             return new ActViewHolder(mContext,mLayoutInflater.inflate(R.layout.act_item,null));
             //秒杀
         }else if (viewType == SECKILL){
             return new SeckillViewHolder(mContext,mLayoutInflater.inflate(R.layout.seckkill_item,null));
             //推荐
         }else if (viewType == RECOMMEND){
             return new RecommendViewHolder(mContext,mLayoutInflater.inflate(R.layout.recommend_item,null));
             //热卖
         }else if (viewType == HOT){
             return new HotViewHolder(mContext,mLayoutInflater.inflate(R.layout.hot_item,null));
         }
         return null;
     }

     /**
      * 绑定数据到ViewHolder
      * @param holder
      * @param position
      */
     @Override
     public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
         /**
          * 轮循广告
          */
         if (getItemViewType(position) == BANNER){
             BannerViewHolder bannerViewHolder = (BannerViewHolder) holder;
             bannerViewHolder.setData(resultBean.getBanner_info());

         }
         /**
          * 频道
          */
         else if (getItemViewType(position) == CHANNEL){
             ChannelViewHolder channelViewHolder = (ChannelViewHolder) holder;
             channelViewHolder.setData(resultBean.getChannel_info());

         }
         /**
          * 活动
          */
         else if (getItemViewType(position) == ACT){
             ActViewHolder actViewHolder = (ActViewHolder) holder;
             actViewHolder.setData(resultBean.getAct_info());

         }
         /**
          * 秒杀
          */
         else if (getItemViewType(position) == SECKILL){
             SeckillViewHolder seckillViewHolder = (SeckillViewHolder) holder;
             seckillViewHolder.setData(resultBean.getSeckill_info());

         }
         /**
          * 推荐
          */
         else if (getItemViewType(position) == RECOMMEND){
             RecommendViewHolder recommendViewHolder = (RecommendViewHolder) holder;
             recommendViewHolder.setData(resultBean.getRecommend_info());

         }
         /**
          * 热卖
          */
         else if (getItemViewType(position) == HOT){
             HotViewHolder hotViewHolder = (HotViewHolder) holder;
             hotViewHolder.setData(resultBean.getHot_info());
         }
     }

     /**
      * 广告幅
      */
     class BannerViewHolder extends RecyclerView.ViewHolder{

         private Context mContext;
         private Banner banner;

         public BannerViewHolder(Context mContext, View itemView) {
             super(itemView);
             this.mContext = mContext;
             this.banner = (Banner) itemView.findViewById(R.id.banner);
         }

         public void setData(List<ResultBeanData.ResultBean.BannerInfoEntity> banner_info) {
             //得到图片集合地址
             List<String> imagesUrl = new ArrayList<>();
             for (int i = 0;i<banner_info.size();i++){
                 String imageUrl = banner_info.get(i).getImage();
                 imagesUrl.add(imageUrl);
             }
             //设置循环指示点
             banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR);
             //设置手风琴效果
             banner.setBannerAnimation(Transformer.Accordion);
             //设置Banner图片数据
             banner.setImages(imagesUrl, new OnLoadImageListener() {
                 @Override
                 public void OnLoadImage(ImageView view, Object url) {
                     //联网请求图片-Glide
                     Glide.with(mContext).load(Constants.BASE_URL_IMAGE + url).into(view);
                 }
             });
             //设置点击事件
             banner.setOnBannerClickListener(new OnBannerClickListener() {
                 @Override
                 public void OnBannerClick(int position) {
                     Toast.makeText(mContext,"position=="+position,Toast.LENGTH_SHORT).show();
                     //跳转到商品信息界面
                     startGoodsInfoActivity();
                 }

             });
         }
     }

     /**
      * 频道
      */
     class ChannelViewHolder extends RecyclerView.ViewHolder{

         private Context mContext;
         private GridView gv_channel;
         private ChannelAdapter adapter;

         public ChannelViewHolder(Context mContext, View itemView) {
             super(itemView);
             this.mContext = mContext;
             gv_channel = (GridView) itemView.findViewById(R.id.gv_channel);
         }

         public void setData(List<ResultBeanData.ResultBean.ChannelInfoBean> channel_info) {
             //得到数据后，就设置GridView的适配器
             adapter = new ChannelAdapter(mContext,channel_info);
             gv_channel.setAdapter(adapter);

             //设置item的点击事件
             gv_channel.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                 @Override
                 public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
                     Toast.makeText(mContext,"position"+position,Toast.LENGTH_SHORT).show();
                 }
             });
         }
     }

     /**
      * 活动
      */
     class ActViewHolder extends RecyclerView.ViewHolder{

         private Context mContext;
         private ViewPager act_viewpager;

         public ActViewHolder(Context mContext,View itemView) {
             super(itemView);
             this.mContext = mContext;
             act_viewpager = (ViewPager) itemView.findViewById(R.id.act_viewpager);
         }

         public void setData(final List<ResultBeanData.ResultBean.ActInfoEntity> act_info) {
             //设置间距
             act_viewpager.setPageMargin(20);
             act_viewpager.setOffscreenPageLimit(3);//>=3
             //setPageTransformer 决定动画效果
             act_viewpager.setPageTransformer(true, new ScaleInTransformer());
             //有数据后，就设置数据适配器
             act_viewpager.setAdapter(new PagerAdapter() {
                 @Override
                 public int getCount() {
                     return act_info.size();
                 }

                 /**
                  *
                  * @param view 页面
                  * @param object instantiateItem方法返回的值
                  * @return
                  */
                 @Override
                 public boolean isViewFromObject(View view, Object object) {
                     return view == object;
                 }

                 /**
                  *
                  * @param container ViewPager
                  * @param position 对应页面的位置
                  * @return
                  */
                 @Override
                 public Object instantiateItem(ViewGroup container, final int position) {
                     //实例化ImageView
                     ImageView imageView = new ImageView(mContext);
                     //设置ImageView的拉伸
                     imageView.setScaleType(ImageView.ScaleType.FIT_XY);
                     //根据Glide设置图片
                     Glide.with(mContext).load(Constants.BASE_URL_IMAGE+act_info.get(position).getIcon_url()).into(imageView);
                     //添加到容器中
                     container.addView(imageView);

                     //设置点击事件
                     imageView.setOnClickListener(new View.OnClickListener() {
                         @Override
                         public void onClick(View view) {
                             Toast.makeText(mContext,"position=="+position,Toast.LENGTH_SHORT).show();
                         }
                     });
                     return imageView;
                 }

                 @Override
                 public void destroyItem(ViewGroup container, int position, Object object) {
                     container.removeView((View) object);
                 }
             });
         }
     }

     /**
      * 秒杀
      */
     class SeckillViewHolder extends RecyclerView.ViewHolder{

         private Context mContext;
         private TextView tv_time_seckill;
         private TextView tv_more_seckill;
         private RecyclerView rv_seckill;
         private SeckillRecycleViewAdapter adapter;

         /**
          * 相差多少时间-毫秒
          */
         private long dt = 0;
         //不断循环
         private Handler handler = new Handler(){
             @Override
             public void handleMessage(Message msg) {
                 super.handleMessage(msg);
                 dt = dt - 1000;
                 //设置具体的时间
                 SimpleDateFormat dateFormat = new SimpleDateFormat("hh:mm:ss");
                 String time = dateFormat.format(new Date(dt));
                 tv_time_seckill.setText(time);

                 handler.removeMessages(0);
                 //发送消息，不断减时间
                 handler.sendEmptyMessageDelayed(0,1000);
                 if (dt <= 0){
                     //把消息移除
                     handler.removeCallbacksAndMessages(null);
                 }
             }
         };

         public SeckillViewHolder(Context mContext, View itemView) {
             super(itemView);
             this.mContext = mContext;
             //初始化布局控件
             tv_time_seckill = (TextView) itemView.findViewById(R.id.tv_time_seckill);
             tv_more_seckill = (TextView) itemView.findViewById(R.id.tv_more_seckill);
             rv_seckill = (RecyclerView) itemView.findViewById(R.id.rv_seckill);
         }

         public void setData(ResultBeanData.ResultBean.SeckillInfoEntity seckill_info) {
             //得到数据后，就是设置数据（TextView和RecyclerView）的数据
             adapter = new SeckillRecycleViewAdapter(mContext,seckill_info.getList());
             rv_seckill.setAdapter(adapter);

             //设置布局管理器
             rv_seckill.setLayoutManager(new LinearLayoutManager(mContext,LinearLayoutManager.HORIZONTAL,false));
             //设置item的点击事件
             adapter.setOnSeckillRecyclerView(new SeckillRecycleViewAdapter.OnSeckillRecyclerView() {
                 @Override
                 public void onItemClick(int position) {
                     Toast.makeText(mContext,"秒杀"+position,Toast.LENGTH_SHORT).show();
                     startGoodsInfoActivity();
                 }
             });
             //秒杀倒计时-毫秒
             dt = Integer.valueOf(seckill_info.getEnd_time()) - Integer.valueOf(seckill_info.getStart_time());
             //进入后1秒钟就去发送这个消息
             handler.sendEmptyMessageDelayed(0,1000);

         }
     }

     /**
      * 推荐
      */
     class RecommendViewHolder extends RecyclerView.ViewHolder{

         private final Context mContext;
         private TextView tv_more_recommend;
         private GridView gv_recommend;
         private RecommendGridViewAdapter adapter;

         public RecommendViewHolder(final Context mContext, View itemView) {
             super(itemView);
             this.mContext = mContext;
             tv_more_recommend = (TextView) itemView.findViewById(R.id.tv_more_recommend);
             gv_recommend = (GridView) itemView.findViewById(R.id.gv_recommend);

             //设置点击事件
             gv_recommend.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                 @Override
                 public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
                     Toast.makeText(mContext,"position=="+position,Toast.LENGTH_SHORT).show();
                     startGoodsInfoActivity();
                 }
             });
         }

         public void setData(List<ResultBeanData.ResultBean.RecommendInfoBean> recommend_info) {
             //有数据了之后，就设置适配器
             adapter = new RecommendGridViewAdapter(mContext,recommend_info);
             gv_recommend.setAdapter(adapter);

         }
     }

     /**
      * 热门
      */
     class HotViewHolder extends RecyclerView.ViewHolder{

         private final Context mContext;
         private TextView tv_more_hot;
         private GridView gv_hot;
         private HotGridViewAdapter adapter;

         public HotViewHolder(final Context mContext, View itemView) {
             super(itemView);
             this.mContext = mContext;
             tv_more_hot = (TextView) itemView.findViewById(R.id.tv_more_hot);
             gv_hot = (GridView) itemView.findViewById(R.id.gv_hot);
             //设置item的点击事件
             gv_hot.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                 @Override
                 public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
                     Toast.makeText(mContext,"position"+position,Toast.LENGTH_SHORT).show();
                     startGoodsInfoActivity();
                 }
             });
         }

         public void setData(List<ResultBeanData.ResultBean.HotInfoBean> hot_info) {
             //有数据后，就设置GridView的适配器
             adapter = new HotGridViewAdapter(mContext,hot_info);
             gv_hot.setAdapter(adapter);
         }
     }

     /**
      * 启动商品信息列表页面
      */
     private void startGoodsInfoActivity() {
         Intent intent = new Intent(mContext, GoodsInfoActivity.class);
         mContext.startActivity(intent);
     }

     /**
      * 根据position得到不同的类型
      * @param position
      * @return
      */
     @Override
     public int getItemViewType(int position) {
         switch (position){
             case BANNER: //广告幅
                 currenType = BANNER;
                 break;
             case CHANNEL: //频道
                 currenType = CHANNEL;
                 break;
             case ACT: //活动
                 currenType = ACT;
                 break;
             case SECKILL: //秒杀
                 currenType = SECKILL;
                 break;
             case RECOMMEND: //推荐
                 currenType = RECOMMEND;
                 break;
             case HOT: //热卖
                 currenType = HOT;
                 break;
         }
         return currenType;
     }

     /**
      * 总共有多少个item
      * @return
      */
     @Override
     public int getItemCount() {
         return 6;
     }

 }

　HomeFragmentAdapter的代码非常多，但思路是很清晰的，HomeFragmentAdapter是一个多布局item的RecyclerView.Adapter，里面定义了6种不同的item视图类型，在onCreateViewHolder方法中
根据viewType构建出每个item的布局(ViewHolder)，然后在onBindViewHolder方法中将数据绑定到不同ViewHolder上。最终效果图如下：

　　关于使用RecyclerView展示首页数据的内容就介绍这么多。下一篇将具体介绍HomeFragmentAdapter中每一个item的布局实现