全面总结轮播图

轮播图作为一个被用烂了的功能,实在是太常见了. 虽然有统计说十个人里面, 9.9个都不会去点它... 但是,你不能阻止产品依然喜欢用它. 嗯,这个地方不知道该放什么,那就来个轮播图吧.

关于轮播图的介绍有很多,但是在android里,可以实现这个功能的方法并不多.这篇文章,就是对这些方法做个总结,算是一个记录(有的方式,只介绍下思路,因为我最终并不会采用).

方式一: 使用 ViewFlipper

ViewFlipper ,作为一个 ViewGroup 它可以控制它的子view切换. 就自动播放来说,它比viewpager更加强大,也更简单:

  • setAutoStart(true) ; // 设置自动播放
  • showNext(); //下一页
  • showPrevious(); //上一页
  • setFlipInterval(5000);//设置播放间隔时间
  • setInAnimation(); //设置进入的动画
  • setOutAnimation();//...

ViewFlipper关于自动播放的API非常方便,并且它默认就会无限循环,可是它的缺点也很明显,那就是不能响应手势. 当然,我们可以通过重写 onTouch 方法,如果向左滑动,那就切换到下一页;向右滑动,就切到上一页. 但是就算这样也仅仅只能简单的做下控制,并不能实时响应手势滑动的距离,所以一般不会采用.感兴趣的可以自行百度.

方式二:使用viewpager的第一种姿势

这个是被很多人称为 真.无限滚动 .光用文字可能不好表达,容我简单的画个草图.

1.png

原理就是这样,对源数据作下处理,将末尾数据复制一份,插入到最前面;将原来第一条数据复制到最后面. 然后在滑到头的时候,偷偷重置下下标.这样就让人感觉无限滚动了. 至于怎么 偷偷的切换 , 代码如下:

addOnPageChangeListener(new OnPageChangeListener() {
    boolean needChange;
    int changeIndex;
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        // 内容大于 1 ,才做轮播处理
        if(adapter == null || adapter.getCount() <= 1){
            needChange = false;
            return;
        }
       if(position == 0){// 0 -> 倒数第二个
           needChange = true;
           changeIndex = adapter.getCount() - 2;
       }else if(position == adapter.getCount() - 1){ // 最后 -> 下标1
           needChange = true;
           changeIndex = 1;
       }else {
           needChange = false;
       }
    }

    @Override
    public void onPageSelected(int position) {
    }

    @Override
    public void onPageScrollStateChanged(int state) {
       if (ViewPager.SCROLL_STATE_IDLE == state && needChange) {
          needChange = false;
          // 切换时不显示动画
          setCurrentItem(changeIndex,false);
      }
    }
 });

这样就实现了真正的无限滚动,然后再加个定时器做自动播放,似乎就没有任何问题了. 但是,这种方式实现的轮播图有两个问题

  • 有的图片加载框架会水土不服,可能会在刷新数据的时候出现闪烁. 比如我使用 Glide的时候没问题,但是如果改用velloy,就会出现.也许是我使用 velloy的姿势不对?
  • 在有的手机上,快速的连续滑动的时候,偶尔会卡顿.

因为上面的问题,使我不得不放弃了 真.无限滚动

方式三: 使用viewpager的第二种姿势

这种方式的原理相对于 方式二 来说,简单的多,并且只能算 伪.无限滚动 .
就是在设置适配器的时候,getCount返回个非常大的数(Integer.MAX_VALUE), 然后让数据不断的重复再重复的显示. 需要注意的是,一开始的下标不能为0,而是在中间的某个位置,这样才能保证两个方向都可以滑动

老实说,如果方式二没上那些问题的话,身为强迫症的我,是不会接受方式三的. 不过在使用方式三实现轮播图的时候,也遇到几个问题,值得说一下.

  1. 一开始我担心内存占用较大,事实证明想太多了.因为viewpager默认只会初始化当前位置,及当前位置左右各一个. 并且在代码中,我也会对ImageView做复用处理,所以不用担心内存问题.

  2. 还是数据刷新的问题,前面我们说过,因为要左右都可以"无限滚动",所以在 notifyDataSetChanged() 之后,需要通过
    viewPager.setCurrentItem(data.size() x 非常大的数,false);让viewpager默认显示在中间某个位置. 但这会引发 ANR, 通过查看源码,发现它内部调用了
    void setCurrentItemInternal(int item, boolean smoothScroll, boolean always, int velocity)

    在该方法内部,又发现了这个

     for (int i = 0; i < mItems.size(); i++) {    
         mItems.get(i).scrolling = true;
     }
    

    所以不难猜测,就是因为循环次数太多,才导致了 ANR 问题.对这个问题,研究了很久也没有找到好的解决办法.甚至仅仅只是setCurrentItem(1000,false),也有ANR的风险.

    但奇怪的是,当设置适配器之后,第一个调用 setCurrentItem 是没有问题的. 所以,我不得不放弃了通过 notifyDataSetChanged 更新数据的方式,退而求其次,每次都重新设置适配器. 这样在复用上做出妥协,内存占用肯定是有所增加的.还好,通过监控可以发现,多次刷新数据后,内存并不会增加太多,而是会稳定在一定范围.

以上就是方式三实现轮播图的原理了,当然还有一些细节需要处理.

  • 自动轮播
public synchronized void setPlaying(boolean playing){    
    if(!isPlaying && playing && viewPager.getAdapter() != null && viewPager.getAdapter().getCount() > 2){        
        handler.postDelayed(playTask,5000);        
        isPlaying = true;    
    }else if(isPlaying && !playing){        
        handler.removeCallbacksAndMessages(null);        
        isPlaying = false;   
    }
 }

 ...

 private Runnable playTask = new  Runnable(){    
    @Override    
    public void run() {        
         viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);        
         handler.postDelayed(this,5000);    
    }
 };
  • 事件处理,因为轮播图常常会在 RecyclerView 或者 ScrollView里面,所以为了更好的兼容性,以及实现触摸暂停,事件处理是有必要的.
 @Override
 public boolean dispatchTouchEvent(MotionEvent ev) {    
    switch (ev.getAction()) {        
      case MotionEvent.ACTION_DOWN:            
         startX = (int) ev.getX();            
         startY = (int) ev.getY();                       
         getParent().requestDisallowInterceptTouchEvent(true);            
         setPlaying(false);            
         break;        
     case MotionEvent.ACTION_MOVE:            
         int moveX = (int) ev.getX();            
         int moveY = (int) ev.getY();            
         int disX = moveX - startX;            
         int disY = moveY - startY;            
         getParent().requestDisallowInterceptTouchEvent(2 * Math.abs(disX) > Math.abs(disY));            
         setPlaying(false);            
         break;        
      case MotionEvent.ACTION_UP:        
      case MotionEvent.ACTION_CANCEL:            
         setPlaying(true);            
         break;   
     }    
     return super.dispatchTouchEvent(ev);
  }
  • 最后,因为轮播相对来说还是比较占用资源的,所以必要的优化还是要有的,比如页面不可见时自动暂停,可见时恢复播放.
@Overrideprotected 
void onAttachedToWindow() {    
   super.onAttachedToWindow();    
   setPlaying(true);
}

@Override
protected void onDetachedFromWindow() {     
   super.onDetachedFromWindow();    
   setPlaying(false);
}

@Override
protected void onWindowVisibilityChanged(int visibility) {    
    if(visibility == View.GONE){        // 停止轮播        
       setPlaying(false);    
    }else if(visibility == View.VISIBLE){        // 开始轮播        
       setPlaying(true);   
    }    
   super.onWindowVisibilityChanged(visibility);
}

另外作为一个高度独立,可复用的组件,当然要内部就实现圆点指示器了,不过这里就不啰说了.

最后看下效果( 不会做动图(┬_┬) )

S61023-153210.jpg

完整代码点这里

PS: 一开始我想使用泛型,可以接受任何实体集合,然后使用的时候,通过复写方法,达到支持任何图片加载框架. 后来又觉得没有必要,所以内部固定了采用Glide加载图片,如果你想替换,也只是一行代码的事. 同样是支持任何数据类型,只需要让原来的实体实现一个接口就可以了.

以上就是本人在实现轮播图的过程中的思路,遇到的问题,以及最终采用的方案. 也许有什么不对的地方,或者谁有其它的想法,欢迎交流.

推荐阅读更多精彩内容