轮播图作为一个被用烂了的功能,实在是太常见了. 虽然有统计说十个人里面, 9.9个都不会去点它... 但是,你不能阻止产品依然喜欢用它. 嗯,这个地方不知道该放什么,那就来个轮播图吧.
关于轮播图的介绍有很多,但是在android里,可以实现这个功能的方法并不多.这篇文章,就是对这些方法做个总结,算是一个记录(有的方式,只介绍下思路,因为我最终并不会采用).
方式一: 使用 ViewFlipper
ViewFlipper ,作为一个 ViewGroup 它可以控制它的子view切换. 就自动播放来说,它比viewpager更加强大,也更简单:
- setAutoStart(true) ; // 设置自动播放
- showNext(); //下一页
- showPrevious(); //上一页
- setFlipInterval(5000);//设置播放间隔时间
- setInAnimation(); //设置进入的动画
- setOutAnimation();//...
ViewFlipper关于自动播放的API非常方便,并且它默认就会无限循环,可是它的缺点也很明显,那就是不能响应手势. 当然,我们可以通过重写 onTouch 方法,如果向左滑动,那就切换到下一页;向右滑动,就切到上一页. 但是就算这样也仅仅只能简单的做下控制,并不能实时响应手势滑动的距离,所以一般不会采用.感兴趣的可以自行百度.
方式二:使用viewpager的第一种姿势
这个是被很多人称为 真.无限滚动 .光用文字可能不好表达,容我简单的画个草图.
原理就是这样,对源数据作下处理,将末尾数据复制一份,插入到最前面;将原来第一条数据复制到最后面. 然后在滑到头的时候,偷偷重置下下标.这样就让人感觉无限滚动了. 至于怎么 偷偷的切换 , 代码如下:
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,而是在中间的某个位置,这样才能保证两个方向都可以滑动
老实说,如果方式二没上那些问题的话,身为强迫症的我,是不会接受方式三的. 不过在使用方式三实现轮播图的时候,也遇到几个问题,值得说一下.
一开始我担心内存占用较大,事实证明想太多了.因为viewpager默认只会初始化当前位置,及当前位置左右各一个. 并且在代码中,我也会对ImageView做复用处理,所以不用担心内存问题.
-
还是数据刷新的问题,前面我们说过,因为要左右都可以"无限滚动",所以在 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);
}
另外作为一个高度独立,可复用的组件,当然要内部就实现圆点指示器了,不过这里就不啰说了.
最后看下效果( 不会做动图(┬＿┬) )
完整代码点这里
PS: 一开始我想使用泛型,可以接受任何实体集合,然后使用的时候,通过复写方法,达到支持任何图片加载框架. 后来又觉得没有必要,所以内部固定了采用Glide加载图片,如果你想替换,也只是一行代码的事. 同样是支持任何数据类型,只需要让原来的实体实现一个接口就可以了.
以上就是本人在实现轮播图的过程中的思路,遇到的问题,以及最终采用的方案. 也许有什么不对的地方,或者谁有其它的想法,欢迎交流.