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的布局实现