Android——基于ViewPager的轮播（附带生命周期控制

作者: xpleemoon | 来源:发表于2016-01-31 16:21 被阅读7613次

引言

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

轮播

轮播效果简单地可以拆分为：
1. 循环：第一页左滑，能滑倒最后一页；最后一页右滑，能滑倒第一页。
2. 定时：设定一个时间单位，每隔一个时间单位触发自动滑动。这里又一个优化点，就是当页面pause或者destroy的时候，轮播的定时器也要跟随pause或者destroy。
3. 触点暂停：当手指点击或者滑动轮播控件的时候，轮播效果要暂停掉，否则会影响用户的操作体验。

依赖

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，定时任务通过对标记位的判断，来决定是否执行。

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

网友评论

塑料机霸:高能预警。有bug ！
43523efad82b:有bug，第几次轮播之后会从第二张图片直接跳到第一张图片，然后第一张图片会显示两次
Greathouse:还有一种方法：加入有 4 个页面需要轮播，它们的编号为 1、2、3、4。将这 4 个页面存储到 List 中去，List 中的页面顺序为 1、2、3、4。接着在 List 的头尾两端再添加两个页面，这时候 List 中的页面的顺序变为 4、1、2、3、4、1。这样就能造成无限轮播的假象了。

比如添加三个元素

@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);
}
}
热血沸腾:@Greathouse 好奇怪的想法，为什么这么做呢？想想轮播内容都是从服务器返回的，数量不确定如果返回 0 ，1 ， 2 ，3 ，4 个数量，你要一个个输出么，那种逻辑代码除了你恐怕没有人愿意去看。
陌痕丶:找了N篇文章, 都没有提到生命周期, 很好,在你这里提到了优化点..阅读后受用很大.
布条麻绳:滑动到最后一项的时候会直接跳过。

Android——基于ViewPager的轮播（附带生命周期控制

引言

依赖

实现

循环

定时和触点暂停

定时

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

UI & Material Design

自定义控件

程序员