Android商城开发系列（十）—— 首页活动广告布局实现

　　在上一篇博客当中，我们讲了频道布局的实现，接下来我们讲解一下活动广告布局的实现，效果如下图：　　

　　

　　这个是用viewpager去实现的，新建一个act_item.xml，代码如下所示：

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

     <android.support.v4.view.ViewPager
         android:id="@+id/act_viewpager"
         android:layout_width="match_parent"
         android:layout_height="120dp"
         android:layout_gravity="center"
         android:layout_marginRight="20dp"
         android:layout_marginLeft="20dp"
         android:clipChildren="false"/>

 </FrameLayout>

　　在HomeFragmentAdapter类中继续完善活动的适配器，在onCreateViewHolder方法中创建ActViewHolder，接着在onBindViewHolder方法中绑定ActViewHolder数据，代码如下所示：

 package com.nyl.shoppingmall.home.adapter;

 import android.content.Context;
 import android.support.v4.view.PagerAdapter;
 import android.support.v4.view.ViewPager;
 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));
             //活动
         }else if (viewType == ACT){
             return new ActViewHolder(mContext,mLayoutInflater.inflate(R.layout.act_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());
             /**
              * 活动
              */
         }else if (getItemViewType(position) == ACT){
             ActViewHolder actViewHolder = (ActViewHolder) holder;
             actViewHolder.setData(resultBean.getAct_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();
                 }
             });
         }
     }

     /**
      * 活动
      */
     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.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);
                 }
             });
         }
     }

     /**
      * 得到不同的类型
      * @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 3;
     }

 }

　　我们还可以让ViewPager切换效果更加炫酷，这里介绍一个第三方库，下载地址：https://github.com/hongyangAndroid/MagicViewPager，接着去引入compile 'com.zhy:magic-viewpager:1.0.1'，将切换动画进行美化，代码如下图：

　　

　　效果图就无法截图展现出来了，有兴趣的朋友，可以动手去操作。好了，关于活动广告布局的内容就介绍这么多。