轮播图效果实现详解

关于轮播图的介绍有很多,但是在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; }

1. 所以不难猜测,就是因为循环次数太多,才导致了 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);}@Overrideprotected void onDetachedFromWindow() {        super.onDetachedFromWindow();       setPlaying(false);}@Overrideprotected void onWindowVisibilityChanged(int visibility) {        if(visibility == View.GONE){        // 停止轮播               setPlaying(false);        }else if(visibility == View.VISIBLE){        // 开始轮播               setPlaying(true);       }       super.onWindowVisibilityChanged(visibility);}

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

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

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