使用BannerView做无限轮播

之前在做无限轮播的时候一直在使用ViewPager可能是我比较守旧的缘故吧，一直到这几天又要实现此项功能了，听朋友说BannerView特别好用并且是真正意义上的无限轮播，再也不是之前的Integer.MAX了，感觉挺好的所以就拿来研究了一下，实现了这个功能，可能会有些凌乱的地方，仅供大家参考，如果大家有什么好的建议可以给我留言我一定改正。

不多说了直接上代码

首先是布局

<com.chenantao.autolayout.AutoRelativeLayout
    android:id="@+id/find_all_viewpager"
    android:layout_width="match_parent"
    android:layout_height="550px"
    >

    <ImageView
        android:id="@+id/main_cycleView_Img"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitXY"
        android:src="@mipmap/bannerdefault"
        android:visibility="visible" />

    <com.innospace.view.ImageCycleView
        android:id="@+id/find_cycleView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
    <LinearLayout
        android:id="@+id/all_dots"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/main_cycleView_Img"
        android:layout_marginBottom="10dp"
        android:gravity="center"
        android:orientation="horizontal"></LinearLayout>

    

</com.chenantao.autolayout.AutoRelativeLayout>

然后我只贴出与实现此功能相关的大家能用到的代码，有些代码因项目不同贴出来也不见得能用，所以还需大家自行编写。

首先就是网络请求数据，这个不进行张贴，各项目有所不同，拿到数据后将数据传递到Handler 进行更新UI的操作，下面是Handler中要实现的代码

bannerList.clear();
bannerList.addAll(list);
find_cycleView.setImageResources(bannerList, mAdCycleViewListener);
if (list != null && list.size() != 0) {
    nodata_banaImg.setVisibility(View.GONE);
    find_cycleView.setVisibility(View.VISIBLE);
} else {
    nodata_banaImg.setVisibility(View.VISIBLE);
    find_cycleView.setVisibility(View.GONE);
}

代码很简单，无非就是控制该控件的显示和隐藏罢了，这里不做过多的解释，但是注意

find_cycleView.setImageResources(bannerList, mAdCycleViewListener);

代码中 mAdCycleViewListener  这个下面马上张贴出来

ImageCycleView.ImageCycleViewListener mAdCycleViewListener = new ImageCycleView.ImageCycleViewListener() {

    @Override
    public void onImageClick(BannerDao info, int postion, View imageView) {
        if (!isNetworkConnected()) {
            if (toast == null) {
                toast = Toast
                        .makeText(context, "网络不可用", Toast.LENGTH_SHORT);
            } else {
                toast.cancel();// 关闭吐司显示
                toast = Toast
                        .makeText(context, "网络不可用", Toast.LENGTH_SHORT);
            }
            toast.show();
        } else {
            Intent intent = new Intent(context, ActionDetailActivity.class);
            MyLog.e(context, "BannarDao:" + info.toString());
            MyLog.e(context, "id:" + info.getRelatedId());
            id = info.getRelatedId();
            int jumpType = 0;
            intent.putExtra("id", info.getRelatedId() + "");
            intent.putExtra("index", "1");
            intent.putExtra("type", info.getType());
            intent.putExtra("title", info.getTitle());
            intent.putExtra("picPath", info.getPicPath());
            // intent.putExtra("url", info.getUrl());
            System.out.println("要传递的banner类型是::" + info.getType());
            intent.putExtra("jumpType", jumpType);
            if (info.getUrl() != null && !info.getUrl().equals("")) {
                intent.putExtra("url", info.getUrl());
            }
            startActivity(intent);
        }
    }

    @Override
    public void displayImage(String imageURL, ImageView imageView) {
        ImageListener imageListener = ImageLoader.getImageListener(
                imageView, R.mipmap.bannerdefault,
                R.mipmap.bannerdefault);
        mImageLoader.get(imageURL, imageListener);

    }
};

这里的代码由于项目需要写的太乱,还有好多是在打印Log也没有进行删除,大家将就着看看，功能能够实现才是最重要的。

下面最重要的代码来了，为了让大家看清我把这个类中所有的代码全都贴出来：

/**
 * 广告图片自动轮播控件</br>
 * 
 * <pre>
 *   集合ViewPager和指示器的一个轮播控件，主要用于一般常见的广告图片轮播，具有自动轮播和手动轮播功能 
 *   使用：只需在xml文件中使用{@code <com.minking.imagecycleview.ImageCycleView/>} ，
 *   然后在页面中调用  {@link #setImageResources(ArrayList, ImageCycleViewListener) }即可!
 *   
 *   另外提供{@link #startImageCycle() } \ {@link #pushImageCycle() }两种方法，用于在Activity不可见之时节省资源；
 *   因为自动轮播需要进行控制，有利于内存管理
 * </pre>
 * 
 */
public class ImageCycleView extends LinearLayout {

   /**
    * 上下文
    */
   private Context mContext;

   /**
    * 图片轮播视图
    */
   private CycleViewPager mBannerPager = null;

   /**
    * 滚动图片视图适配器
    */
   private ImageCycleAdapter mAdvAdapter;

   /**
    * 图片轮播指示器控件
    */
   private ViewGroup mGroup;

   /**
    * 图片轮播指示器-个图
    */
   private ImageView mImageView = null;

   /**
    * 滚动图片指示器-视图列表
    */
   private ImageView[] mImageViews = null;

   /**
    * 图片滚动当前图片下标
    */
   private int mImageIndex = 1;

   /**
    * 手机密度
    */
   private float mScale;

   /**
    * @param context
    */
   public ImageCycleView(Context context) {
      super(context);
   }

   /**
    * @param context
    * @param attrs
    */
   public ImageCycleView(Context context, AttributeSet attrs) {
      super(context, attrs);
      mContext = context;
      mScale = context.getResources().getDisplayMetrics().density;
      LayoutInflater.from(context)
            .inflate(R.layout.view_banner_content, this);
      mBannerPager = (CycleViewPager) findViewById(R.id.pager_banner);
      mBannerPager.setOnPageChangeListener(new GuidePageChangeListener());
      mBannerPager.setOnTouchListener(new OnTouchListener() {

         @Override
         public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()) {
            case MotionEvent.ACTION_UP:
               // 开始图片滚动
               startImageTimerTask();
               break;
            default:
               // 停止图片滚动
               stopImageTimerTask();
               break;
            }
            return false;
         }
      });
      // 滚动图片右下指示器视图
      mGroup = (ViewGroup) findViewById(R.id.viewGroup);
   }

   /**
    * 装填图片数据
    * imageUrlList
    * @param
    * @param imageCycleViewListener
    */
   public void setImageResources(ArrayList<BannerDao> infoList,
         ImageCycleViewListener imageCycleViewListener) {
      // 清除所有子视图
      mGroup.removeAllViews();
      // 图片广告数量
      // final int imageCount = infoList.size();
      final int imageCount = infoList.size();
      mImageViews = new ImageView[imageCount];
      for (int i = 0; i < imageCount; i++) {
         mImageView = new ImageView(mContext);
         int imageParams = (int) (mScale * 7);// XP与DP转换，适应不同分辨率
         int imagePadding = (int) (mScale * 2.5);
         LayoutParams layout = new LayoutParams(
               imageParams, imageParams);
         layout.setMargins(imagePadding, 0, imagePadding, 0);
         mImageView.setLayoutParams(layout);
         mImageViews[i] = mImageView;
         if (i == 0) {
            mImageViews[i].setBackgroundResource(R.drawable.point_focused);
         } else {
            mImageViews[i]
                  .setBackgroundResource(R.drawable.point_unfocused);
         }
         mGroup.addView(mImageViews[i]);
      }
      mAdvAdapter = new ImageCycleAdapter(mContext, infoList,
            imageCycleViewListener);
      mBannerPager.setAdapter(mAdvAdapter);
      startImageTimerTask();
   }

   /**
    * 开始轮播(手动控制自动轮播与否，便于资源控制)
    */
   public void startImageCycle() {
      startImageTimerTask();
   }

   /**
    * 暂停轮播——用于节省资源
    */
   public void pushImageCycle() {
      stopImageTimerTask();
   }

   /**
    * 开始图片滚动任务
    */
   private void startImageTimerTask() {
      stopImageTimerTask();
      // 图片每3秒滚动一次
      mHandler.postDelayed(mImageTimerTask, 3000);
   }

   /**
    * 停止图片滚动任务
    */
   private void stopImageTimerTask() {
      mHandler.removeCallbacks(mImageTimerTask);
   }

   private Handler mHandler = new Handler();

   /**
    * 图片自动轮播Task
    */
   private Runnable mImageTimerTask = new Runnable() {

      @Override
      public void run() {
         if (mImageViews != null) {
            // 下标等于图片列表长度说明已滚动到最后一张图片,重置下标
            if ((mImageIndex++) == mImageViews.length+1) {
               mImageIndex = 1;
            }
            mBannerPager.setCurrentItem(mImageIndex);
         }
      }
   };

   /**
    * 轮播图片状态监听器
    * 
    * @author minking
    */
   private final class GuidePageChangeListener implements OnPageChangeListener {

      @Override
      public void onPageScrollStateChanged(int state) {
         if (state == ViewPager.SCROLL_STATE_IDLE)
            startImageTimerTask(); // 开始下次计时
      }

      @Override
      public void onPageScrolled(int arg0, float arg1, int arg2) {
      }

      @Override
      public void onPageSelected(int index) {

         if (index == 0 || index == mImageViews.length + 1) {
            return;
         }
         // 设置图片滚动指示器背景
         mImageIndex = index;
         index -= 1;
         mImageViews[index].setBackgroundResource(R.drawable.point_focused);
         for (int i = 0; i < mImageViews.length; i++) {
            if (index != i) {
               mImageViews[i]
                     .setBackgroundResource(R.drawable.point_unfocused);
            }
         }
      }
   }

   private class ImageCycleAdapter extends PagerAdapter {

      /**
       * 图片视图缓存列表
       */
      private ArrayList<ImageView> mImageViewCacheList;

      /**
       * 图片资源列表
       */
      private ArrayList<BannerDao> mAdList = new ArrayList<BannerDao>();

      /**
       * 广告图片点击监听器
       */
      private ImageCycleViewListener mImageCycleViewListener;

      private Context mContext;

      public ImageCycleAdapter(Context context, ArrayList<BannerDao> adList,
            ImageCycleViewListener imageCycleViewListener) {
         mContext = context;
         mAdList = adList;
         mImageCycleViewListener = imageCycleViewListener;
         mImageViewCacheList = new ArrayList<ImageView>();
      }

      @Override
      public int getCount() {
         return mAdList.size();
      }

      @Override
      public boolean isViewFromObject(View view, Object obj) {
         return view == obj;
      }

      @Override
      public Object instantiateItem(ViewGroup container, final int position) {
         String imageUrl = mAdList.get(position).getPicPath();
         ImageView imageView = null;
         if (mImageViewCacheList.isEmpty()) {
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new LayoutParams(
                  LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);

         } else {
            imageView = mImageViewCacheList.remove(0);
         }
         // 设置图片点击监听
         imageView.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
               System.out.println("这里点击的图片的游标是::"
                     + mAdList.get(position).getRelatedId());
               System.out.println("图片集合的长度是是::" + mAdList.size());
               mImageCycleViewListener.onImageClick(mAdList.get(position),
                     position, v);
            }
         });
         imageView.setTag(imageUrl);
         container.addView(imageView);
         mImageCycleViewListener.displayImage(imageUrl, imageView);
         return imageView;
      }

      @Override
      public void destroyItem(ViewGroup container, int position, Object object) {
         ImageView view = (ImageView) object;
         container.removeView(view);
         mImageViewCacheList.add(view);
      }
   }

   /**
    * 轮播控件的监听事件
    * 
    * @author minking
    */
   public static interface ImageCycleViewListener {

      /**
       * 加载图片资源
       * 
       * @param imageURL
       * @param imageView
       */
      public void displayImage(String imageURL, ImageView imageView);

      /**
       * 单击图片事件
       * position
       * @param
       * @param imageView
       */
      public void onImageClick(BannerDao info, int postion, View imageView);
   }

}

这里有必要说一下，我在实现轮播的时候出现了这样一个问题，就是在几张图片完整的轮播一遍之后会有快速显示所有图片然后才去加载第一张的现象（Bug），不过大家不用担心，这个代码是改好了的，现在我就来说一说我改动的地方，在大概195行的位置（哦，sorry这貌似没有行标），不过没关系好在我有注释，是图片自动轮播Task中这几行代码

if((mImageViews++)==mImageViews.length+1){

           mImageIndex=1;

}

在这几行中之前的代码是++mImageViews，所以出现了上述情况，虽然现在解决了但是至今我也不太清楚为什么要这么改，如果有知道的童鞋希望大家给我留言哈，好了今天就先写到这里吧，以后有什么值得分享的一定还会贴出来的。