基于ViewPager的轮播完美实现

引言

在app中，轮播已是一种非常普遍的效果了，通常会出现在首页的列表头部进行banner（广告位）轮播展现。以下为轮播效果图：



轮播效果简单地可以拆分为：

循环：第一页左滑，能滑倒最后一页；最后一页右滑，能滑倒第一页。

定时：设定一个时间单位，每隔一个时间单位触发自动滑动。这里又一个优化点，就是当页面pause或者destroy的时候，轮播的定时器也要跟随pause或者destroy。

触点暂停：当手指点击或者滑动轮播控件的时候，轮播效果要暂停掉，否则会影响用户的操作体验。

实现

我们采用ViewPager+PagerAdapter+SingleThreadScheduledExecutor的方式来实现轮播。

循环

为了让ViewPager达到循环的目的，只需要对PagerAdapter做处理即可，先来看我们实现的抽象PagerAdapter：

package com.xpleemoon.library;

import android.support.annotation.IntRange;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

/**
* {@link CarouselViewPager 轮播控件}所需的adapter
*
* @author xpleemoon
*/
public abstract class CarouselPagerAdapter<V extends CarouselViewPager> extends PagerAdapter {
/**
* 系数，可以自行设置，但又以下原则需要遵循：
* <ul>
* <li>必须大于1</li>
* <li>尽量小</li>
* </ul>
*/
private static final int COEFFICIENT = 10;
private V mViewPager;

public CarouselPagerAdapter(V viewPager) {
this.mViewPager = viewPager;
}

/**
* @return 实际数据数量
*/
@IntRange(from = 0)
public abstract int getRealDataCount();

@Override
public final int getCount() {
long realDataCount = getRealDataCount();
if (realDataCount > 1) {
realDataCount = getRealDataCount() * COEFFICIENT;
realDataCount = realDataCount > Integer.MAX_VALUE ? Integer.MAX_VALUE : realDataCount;
}
return (int) realDataCount;
}

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

@Override
public final Object instantiateItem(ViewGroup container, int position) {
position = position % getRealDataCount();
return this.instantiateRealItem(container, position);
}

public abstract Object instantiateRealItem(ViewGroup container, int position);

@Override
public final void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}

@Override
public final void finishUpdate(ViewGroup container) {
// 数量为1，不做position替换
if (getCount() <= 1) {
return;
}

int position = mViewPager.getCurrentItem();
// ViewPager的更新即将完成，替换position，以达到无限循环的效果
if (position == 0) {
position = getRealDataCount();
mViewPager.setCurrentItem(position, false);
} else if (position == getCount() - 1) {
position = getRealDataCount() - 1;
mViewPager.setCurrentItem(position, false);
}
}
}

首先来看getCount()和getRealDataCount()：

getRealDataCount()是抽象方法，用来表示ViewPager绑定的实际数据列表的长度。

getCount()是final方法，意味着子类不能重写，同时该方法还做了特殊处理。

当getRealDataCount()返回1（即肉眼可见有1屏）的时候，那么getCount()就返回1，也就是对于程序来说实际有1屏

当getRealDataCount()返回大于1，假设为3（即肉眼可见3屏）的时候，那么getCount()就返回30，也就是对于程序来说实际有30屏。那么可以想象一下，当我们不到达页面边界（第1屏或第30屏），是不是就完成了循环的效果呢。BUT，当到达边界，第1屏没法左滑，第30屏没法右滑，这和真正的轮播需求还是有差距的。

OK，带着上面的问题再来看finishUpdate()，它也是一个final方法，它的效果实际上就是一个偷偷替换问题。（此处参考自循环广告位组件的实现）

当我们的getCount()（程序页面数量）小于等于1时，不做替换

当我们的getCount()（程序页面数量）大于1时，还是假设为30。获取ViewPager当前的页面位置，然后判断程序边界。

当前程序页面为第1页（对于肉眼来说为第1页），则直接替换为程序页面的第4页

当前程序页面为最后一页（对于肉眼来说为第3页），则直接替换为程序页面的第3页

综上，我们的循环效果就完美实现了。

定时和触点暂停

老规矩先上代码：

package com.xpleemoon.library;

import android.content.Context;
import android.support.annotation.IntDef;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

/**
* 轮播效果的{@link ViewPager}
* <ol>
* <li>当attach到window上时，会自动触发轮播定时任务</li>
* <li>当从window中detach时，会触发关闭轮播定时任务</li>
* </ol>
*
* @author xpleemoon
*/
public class CarouselViewPager extends ViewPager {
@IntDef({RESUME, PAUSE, DESTROY})
@Retention(RetentionPolicy.SOURCE)
public @interface LifeCycle {
}

public static final int RESUME = 0;
public static final int PAUSE = 1;
public static final int DESTROY = 2;
/**
* 生命周期状态，保证{@link #mCarouselTimer}在各生命周期选择执行策略
*/
private int mLifeCycle = RESUME;
/**
* 是否正在触摸状态，用以防止触摸滑动和自动轮播冲突
*/
private boolean mIsTouching = false;
/**
* 轮播定时器
*/
private ScheduledExecutorService mCarouselTimer;

public CarouselViewPager(Context context) {
super(context);
}

public CarouselViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}

public void setLifeCycle(@LifeCycle int lifeCycle) {
this.mLifeCycle = lifeCycle;
}

@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
mIsTouching = true;
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
mIsTouching = false;
break;
}
return super.onTouchEvent(ev);
}

@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
shutdownTimer();
mCarouselTimer = Executors.newSingleThreadScheduledExecutor();
mCarouselTimer.scheduleAtFixedRate(new Runnable() {
@Override
public void run() {
switch (mLifeCycle) {
case RESUME:
if (!mIsTouching
&& getAdapter() != null
&& getAdapter().getCount() > 1) {
post(new Runnable() {
@Override
public void run() {
setCurrentItem(getCurrentItem() + 1);
}
});
}
break;
case PAUSE:
break;
case DESTROY:
shutdownTimer();
break;
}
}
}, 1000 * 2, 1000 * 2, TimeUnit.MILLISECONDS);
}

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

private void shutdownTimer() {
if (mCarouselTimer != null && mCarouselTimer.isShutdown() == false) {
mCarouselTimer.shutdown();
}
mCarouselTimer = null;
}
}

定时

先来看定时器的实现（Executors.newSingleThreadScheduledExecutor()），是一个单线程的线程池，那为什么不用Timer来进行实现呢。参考自《Java并发编程实战》：

Timer只会创建一个线程并且不会捕获异常，因此当TimerTask抛出未检查的异常时将会终止Timer。这种情形下，Timer将因无法恢复线程执行行，而是错误地促使整个Timer被取消了，那么整个定时任务就无法调度来。而SingleThreadScheduledExecutor不会有这些问题，当线程池中的唯一线程因特殊原因挂掉，线程池会自动开启一个新线程，保证定时任务继续。

Timer基于绝对时间，SingleThreadScheduledExecutor基于想对时间。

接着来看定时器任务的触发和停止：

触发，onAttachedToWindow()

停止，onDetachedFromWindow()

然后来看定时器基于生命周期的恢复、暂停、销毁，当前做了简单处理（暂停＝＝销毁），代码简单就不做介绍。而生命周期是在外部调用setLifeCycle()实现，具体代码可见MainActivity的生命周期方法：

package com.xpleemoon.carouselviewpager;

import android.support.v4.view.PagerAdapter;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.xpleemoon.library.CarouselPagerAdapter;
import com.xpleemoon.library.CarouselViewPager;

public class MainActivity extends AppCompatActivity {
private CarouselViewPager mCarouselView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mCarouselView = (CarouselViewPager) findViewById(R.id.carousel);
PagerAdapter adapter = new SimpleCarouselAdapter(mCarouselView,
new int[]{R.layout.page1, R.layout.page2, R.layout.page3});
mCarouselView.setAdapter(adapter);
}

@Override
protected void onResume() {
super.onResume();
mCarouselView.setLifeCycle(CarouselViewPager.RESUME);
}

@Override
protected void onPause() {
super.onPause();
mCarouselView.setLifeCycle(CarouselViewPager.PAUSE);
}

@Override
protected void onDestroy() {
super.onDestroy();
mCarouselView.setLifeCycle(CarouselViewPager.DESTROY);
}

private static class SimpleCarouselAdapter extends CarouselPagerAdapter<CarouselViewPager> {
private int[] viewResIds;

public SimpleCarouselAdapter(CarouselViewPager viewPager, int[] viewResIds) {
super(viewPager);
this.viewResIds = viewResIds;
}

@Override
public int getRealDataCount() {
return viewResIds != null ? viewResIds.length : 0;
}

@Override
public Object instantiateRealItem(ViewGroup container, int position) {
int resId = viewResIds[position];
View bannerView = LayoutInflater.from(container.getContext()).inflate(resId, null);
container.addView(bannerView, ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT);
return bannerView;
}
}
}

最后来看触点停止的实现：onTouchEvent()根据手势状态来设置标记位mIsTouching，定时任务通过对标记位的判断，来决定是否执行。

至此，整个轮播的实现过程就已经完成。附上源码