引言
在app中，轮播已是一种非常普遍的效果了，通常会出现在首页的列表头部进行banner（广告位）轮播展现。以下为轮播效果图：
轮播
- 轮播效果简单地可以拆分为：
- 循环：第一页左滑，能滑倒最后一页；最后一页右滑，能滑倒第一页。
- 定时：设定一个时间单位，每隔一个时间单位触发自动滑动。这里又一个优化点，就是当页面pause或者destroy的时候，轮播的定时器也要跟随pause或者destroy。
- 触点暂停：当手指点击或者滑动轮播控件的时候，轮播效果要暂停掉，否则会影响用户的操作体验。
依赖
maven:
<dependency>
<groupId>com.xpleemoon.view</groupId>
<artifactId>carouselviewpager</artifactId>
<version>0.1.0</version>
<type>pom</type>
</dependency>
or gradle:
compile 'com.xpleemoon.view:carouselviewpager:0.1.0'
实现
我们采用ViewPager+PagerAdapter+SingleThreadScheduledExecutor的方式来实现轮播。
循环
为了让ViewPager达到循环的目的，只需要对PagerAdapter做处理即可，先来看我们实现的抽象PagerAdapter：
/**
* {@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 getCountOfVisual();
/**
* 实际数据量
* <ul>
* <li>{@link #getCount()}>{@link #getCountOfVisual()}</li>
* </ul>
*
* @return
*/
@Override
public final int getCount() {
long realDataCount = getCountOfVisual();
if (realDataCount > 1) {
realDataCount = getCountOfVisual() * 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 % getCountOfVisual();
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 = getCountOfVisual();
mViewPager.setCurrentItem(position, false);
} else if (position == getCount() - 1) {
position = getCountOfVisual() - 1;
mViewPager.setCurrentItem(position, false);
}
}
}
- 首先来看getCount()和getCountOfVisual()：
- getCountOfVisual()是抽象方法，用来表示ViewPager绑定的实际数据列表的长度。
- getCount()是final方法，意味着子类不能重写，同时该方法还做了特殊处理。
- 当getCountOfVisual()返回1（即肉眼可见有1屏）的时候，那么getCount()就返回1，也就是对于程序来说实际有1屏
- 当getCountOfVisual()返回大于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页
- 综上，我们的循环效果就完美实现了。
定时和触点暂停
- 老规矩先上代码：
/**
* 轮播效果的{@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的生命周期方法：
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private CarouselViewPager mCarouselView;
private CarouselPagerAdapter mAdapter;
private IndicatorDotView mIndicatorDotView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mCarouselView = (CarouselViewPager) findViewById(R.id.carousel);
mAdapter = new SimpleCarouselAdapter(mCarouselView,
new int[]{R.layout.page1, R.layout.page2, R.layout.page3});
mCarouselView.setAdapter(mAdapter);
mIndicatorDotView = (IndicatorDotView) findViewById(R.id.indicator);
mIndicatorDotView.setCount(mAdapter.getCountOfVisual(), 0); // init indicator
mCarouselView.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
@Override
public void onPageSelected(int position) {
super.onPageSelected(position);
// position % mAdapter.getCountOfVisual()——因为CarouselViewPager实现的原因，这里的position已经不是我们视觉上所看到的position了
mIndicatorDotView.setSelectPosition(position % mAdapter.getCountOfVisual());
}
});
findViewById(R.id.resume).setOnClickListener(this);
findViewById(R.id.pause).setOnClickListener(this);
}
@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);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.resume:
mCarouselView.setLifeCycle(CarouselViewPager.RESUME);
Toast.makeText(getApplicationContext(), "resume carousel", Toast.LENGTH_SHORT).show();
break;
case R.id.pause:
mCarouselView.setLifeCycle(CarouselViewPager.PAUSE);
Toast.makeText(getApplicationContext(), "pause carousel", Toast.LENGTH_SHORT).show();
break;
}
}
private static class SimpleCarouselAdapter extends CarouselPagerAdapter<CarouselViewPager> {
private int[] viewResIds;
public SimpleCarouselAdapter(CarouselViewPager viewPager, int[] viewResIds) {
super(viewPager);
this.viewResIds = viewResIds;
}
@Override
public int getCountOfVisual() {
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，定时任务通过对标记位的判断，来决定是否执行。
至此，整个轮播的实现过程就已经完成。附上源码
网友评论
比如添加三个元素
@Override
public final void finishUpdate(ViewGroup container) {
// 数量为1，不做position替换
if (getCount() <= 1) {
return;
}
int position = mViewPager.getCurrentItem();
// ViewPager的更新即将完成，替换position，以达到无限循环的效果
if (position == 0) {
mViewPager.setCurrentItem(3, false);
} else if (position == 4) {
// position = getCountOfVisual() - 1;
Log.d("ccmax",""+position);
mViewPager.setCurrentItem(1, false);
}
}