Android商城开发系列（九）—— 首页频道布局的实现

　　在上一篇博客当中，我们讲了关于首页轮询广告的实现，接下来讲解一下首页频道布局的实现，如下图所示：

　　

　　这个布局用的是gridview去完成的，新建一个channel_item，代码如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="170dp"
    android:background="#fff">

    <GridView
        android:id="@+id/gv_channel"
        android:layout_width="wrap_content"
        android:layout_height="150dp"
        android:numColumns="5"></GridView>

</LinearLayout>　

　　同样的也是需要创建一个在onCreateViewHolder()方法中创建ChannelViewHolder,继续在HomeFragmentAdapter类中去完善，代码如下所示：

package com.nyl.shoppingmall.home.adapter;

import android.content.Context;
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.Toast;

import com.bumptech.glide.Glide;
import com.nyl.shoppingmall.R;
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 java.util.ArrayList;
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);
    }

    /**
     * 相当于getView创建ViewHolder部分代码
     * @param parent
     * @param viewType 当前的类型
     * @return
     */
    @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));
        }
        return null;
    }

    /**
     * 相当于getView中绑定数据模块
     * @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());
        }
    }

    /**
     * 广告幅
     */
    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();
                }
            });
        }
    }

    /**
     * 频道
     */
    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();
                }
            });
        }
    }
    /**
     * 得到不同的类型
     * @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 2;
    }


}

　　接着新建一个ChannelAdapter类，代码如下所示：

package com.nyl.shoppingmall.home.adapter;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.bumptech.glide.Glide;
import com.nyl.shoppingmall.R;
import com.nyl.shoppingmall.home.bean.ResultBeanData;
import com.nyl.shoppingmall.utils.Constants;

import java.util.List;

/**
 * 频道适配器
 */

public class ChannelAdapter extends BaseAdapter{
    private final Context mContext;
    private final List<ResultBeanData.ResultBean.ChannelInfoBean> datas;
    
    public ChannelAdapter(Context mContext, List<ResultBeanData.ResultBean.ChannelInfoBean> channel_info) {
        this.mContext = mContext;
        this.datas = channel_info;
    }

    @Override
    public int getCount() {
        return datas.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 viewHolder;
        if (convertView == null){
            convertView = View.inflate(mContext, R.layout.item_channel,null);
            viewHolder = new ViewHolder();
            viewHolder.iv_channel = (ImageView) convertView.findViewById(R.id.iv_channel);
            viewHolder.tv_channel = (TextView) convertView.findViewById(R.id.tv_channel);
            convertView.setTag(viewHolder);
        }else {
            viewHolder = (ViewHolder) convertView.getTag();
        }
        //根据位置得到对应的数据
        ResultBeanData.ResultBean.ChannelInfoBean channelInfoBean = datas.get(position);
        //根据Glide设置图片
        Glide.with(mContext).load(Constants.BASE_URL_IMAGE+channelInfoBean.getImage()).into(viewHolder.iv_channel);
        viewHolder.tv_channel.setText(channelInfoBean.getChannel_name());
        return convertView;
    }
    static class ViewHolder{
        ImageView iv_channel;
        TextView tv_channel;
    }
}