ViewPager封装轮播效果+指示器 实现一行代码展示轮播图

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/IT_ZJYANG/article/details/82320367

效果图

平时应用开发中首页经常会有一个Banner轮播的展示，不可避免的需要封装一个自定义View，在使用的时候能够方便的只用一句代码设置图片地址集合，就可以启动轮播效果，本文将通过ViewPager一步步对轮播图进行实现，最终效果如下：

特性

主要支持以下特性：

1.是否显示指示器

2.指示器圆点大小、间距

3.轮播自动切换的间隔时长

4.是否自动轮播

5.左右无边界轮播

注：目前暂时只支持url的图片形式，其他形式例如本地图片可自行在Adapter中instantiateItem方法进行调整，且本文的图片展示是依赖Glide来展示。

实现无限循环

首先实现左右无限循环的效果，思路就是将ViewPager的getCount()返回为Integer.MAX_VALUE，然后在ViewPager每次切换Item的时候，会调用PagerAdapter的instantiateItem方法，这个方法返回当前准备切换到的下标，由于我们设置的Item数量是Integer.MAX_VALUE，因此这里返回的下标有可能是0-2147483647，假设我们要显示的banner图总共有3张，那在第3张即将切换到第1张的时候，需要重新将position置为0，因此可以采用对下标取余的方式让position可以一直处于0-3的无限循环之中，关键代码如下：

private class InnerPagerAdapter extends PagerAdapter {

        public InnerPagerAdapter() {}

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            position %= mBannerUrlList.size();
            if (position < 0) {
                position = mBannerUrlList.size() + position;
            }
            ImageView bannerIv = new ImageView(getContext());
            bannerIv.setScaleType(ImageView.ScaleType.CENTER_CROP);
            bannerIv.setLayoutParams(new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
            Glide.with(getContext()).load(mBannerUrlList.get(position)).into(bannerIv);
            container.addView(bannerIv);
            //bannerIv.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
            return bannerIv;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {

        }
    }

instantiateItem方法中每次将position对banner的size取余，然后用一个ImageView来展示图片，并动态添加到container中去，相当于将ImageView添加到ViewPager的每个子项的父布局中去。

以上实现了无边界循环轮播，但是我们一般要求在一开始的时候（当前处于第1张）往左边滑动就可以滑回最后一张，假设初始值是0的话，往左是没法滑动的，因此还要将ViewPager的初始值设置为MAX_VALUE/2（这样是个人都滑不完吧Orz....）

实现自动轮播

实现了左右无限轮播，接下来就要让它能够自动动起来，这里采用handler的方式，每次将下标+1之后setCurrentItem为新的下标，关键代码如下：

/**
 * 是否自动滑动
 */
private boolean mIsAutoScroll = true;
/**
 * 默认页面之间自动切换的时间间隔
 */
private long mDelayTime = 2000;
//播放标志
private boolean isPlay = false;
//触发轮播的消息标志位
private final int PLAY = 0x123;
/**
 * 轮播计时器
 */
private Handler mHandler = new Handler() {
    public void handleMessage(android.os.Message msg) {
        if (msg.what == PLAY && mIsAutoScroll) {
            mBannerViewPager.setCurrentItem(mCurrentIndex);
            if (isPlay) {
                play();
            }
        }
    }
};

public void startPlay(long delayMillis) {
    isPlay = true;
    mDelayTime = delayMillis;
    play();
}

private void play() {
    mCurrentIndex++;
    mHandler.sendEmptyMessageDelayed(PLAY, mDelayTime);
}

兼容手势滑动

实现了自动轮播之后，我们还要兼容用户主动滑动的场景，即用户主动滑动时，应该暂停自动轮询，先以用户主动滑动的动作为主，当用户放开手指之后，再重新继续自动轮询，既然要区分是否是手势滑动，可以在ViewPager的滑动监听接口onPageScrollStateChange中去判断，如下：

/**
     * ViewPager滑动监听
     */
    ViewPager.OnPageChangeListener mPageListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }

        @Override
        public void onPageSelected(int position) {
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            onPageScrollStateChange(state);
        }
    };


 /**
     * 手指滑动时暂停自动轮播，手指松开时重新启动自动轮播
     *
     * @param state
     */
    private void onPageScrollStateChange(int state) {
        if (!mIsAutoScroll) {
            return;
        }
        switch (state) {
            case ViewPager.SCROLL_STATE_IDLE:
                if (!mGestureScroll) {
                    return;
                }
                mGestureScroll = false;
                mHandler.removeMessages(PLAY);
                mHandler.sendEmptyMessageDelayed(PLAY, 100);
                break;
            case ViewPager.SCROLL_STATE_DRAGGING:
                // 手指滑动时，清除播放下一张，防止滑动过程中自动播放下一张
                mGestureScroll = true;
                mHandler.removeMessages(PLAY);
                break;
            default:
                break;
        }
    }

ViewPager的SCRPLL_STATE_IDLE状态是表示用户手指松开时，这个时候就继续sendMessage启动轮询，SCROLL_STATE_DRAGGING状态表示用户手指正在滑动过程中，removeMessage将当前的轮询暂停

添加轮播指示器

以上完成了ViewPager的部分，实现了轮播图的自动轮询效果，但一般轮播图都会有个小小的指示器来让用户感知当前处于哪个banner，一共有多少个banner，所以我们还需套自定义一个指示器View

/**
     * 指示器View
     */
    public class BannerIndicator extends View{

        private int mCellCount;
        private int currentPosition;
        private Paint mPaint;
        /**
         * 指示器小圆点半径
         */
        private int mCellRadius = dp2px(3);
        /**
         * 指示器小圆点间距
         */
        private int mCellMargin = dp2px(4);
        /**
         * 指示器小圆点激活状态的颜色
         */
        private int mIndicatorColor = Color.parseColor("#000000");

        public BannerIndicator(Context context) {
            super(context);
            init();
        }

        public void init(){
            mPaint = new Paint();
            mPaint.setAntiAlias(true);
        }

        public void setCellCount(int cellCount) {
            mCellCount = cellCount;
            invalidate();
        }

        public void setCurrentPosition(int currentPosition) {
            this.currentPosition = currentPosition;
            invalidate();
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            // 重新测量当前界面的宽度
            int width = getPaddingLeft() + getPaddingRight() + mCellRadius * 2 * mCellCount + mCellMargin * (mCellCount - 1);
            int height = getPaddingTop() + getPaddingBottom() + mCellRadius * 2;
            width = resolveSize(width, widthMeasureSpec);
            height = resolveSize(height, heightMeasureSpec);
            setMeasuredDimension(width, height);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            for (int i = 0; i < mCellCount; i++) {
                if (i == currentPosition) {
                    mPaint.setColor(mIndicatorColor);
                } else {
                    mPaint.setColor(Color.WHITE);
                }
                int left = getPaddingLeft() + i * mCellRadius * 2 + mCellMargin * i;

                canvas.drawCircle(left + mCellRadius, getHeight() / 2, mCellRadius, mPaint);
            }
        }
    }

其实就是根据banner的数量来进行绘制每个小圆圈的位置，并且用一个currentPosition来标志当前哪个小圆圈是处于激活的状态，显示不同的颜色。在ViewPager每次回调onPageSelect的时候，将当前的currentPosition也同步更新，并且调用invalidate触发onDraw重新绘制。

开放滑动监听接口

最后，虽然内部实现了自动轮播，但是我们还是要将滑动切换的接口放开来：

/**
     * 滚动监听回调接口
     */

    ScrollPageListener mScrollPageListener;

    public void setScrollPageListener(ScrollPageListener mScrollPageListener) {
        this.mScrollPageListener = mScrollPageListener;
    }

    public interface ScrollPageListener {
        void onPageSelected(int position);
    }


ViewPager.OnPageChangeListener mPageListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }

        @Override
        public void onPageSelected(int position) {
            if (mScrollPageListener != null) {
                mScrollPageListener.onPageSelected(smallPos);
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            onPageScrollStateChange(state);
        }
    };

完整代码

/**
 * Created by zhengjiayang on 2018/8/31.
 * 自定义Banner轮播View
 */

public class BannerView extends FrameLayout{

    /**
     * 轮播图ViewPager
     */
    private ViewPager mBannerViewPager;
    /**
     * 轮播指示器
     */
    private BannerIndicator mIndicator;
    /**
     * 指示器小圆点半径
     */
    private int mCellRadius = dp2px(3);
    /**
     * 指示器小圆点间距
     */
    private int mCellMargin = dp2px(4);
    /**
     * 指示器小圆点激活状态的颜色
     */
    private int mIndicatorColor = Color.parseColor("#000000");
    /**
     * 是否自动滑动
     */
    private boolean mIsAutoScroll = true;
    /**
     * 默认页面之间自动切换的时间间隔
     */
    private long mDelayTime = 2000;
    /**
     * 轮播图地址集合
     */
    private List<String> mBannerUrlList;
    /**
     * 轮播内部Adapter,实现无限轮播
     */
    private InnerPagerAdapter mAdapter;
    /**
     * 当前真正的下标，初始值为MAX的一半，以解决初始无法左滑的问题
     */
    private int mCurrentIndex = Integer.MAX_VALUE / 2;
    //播放标志
    private boolean isPlay = false;
    //触发轮播的消息标志位
    private final int PLAY = 0x123;
    //标志是否是手势操作造成的滑动
    private boolean mGestureScroll = false;

    /**
     * 轮播计时器
     */
    private Handler mHandler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            if (msg.what == PLAY && mIsAutoScroll) {
                mBannerViewPager.setCurrentItem(mCurrentIndex);
                if (isPlay) {
                    play();
                }
            }
        }
    };

    public BannerView(Context context) {
        this(context, null);
    }

    public BannerView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public BannerView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    public void init(Context context, AttributeSet attrs){
        initBannerViewPager(context, attrs);
        initIndicatorView(context);
    }

    /**
     * 初始化ViewPager
     * @param context
     * @param attrs
     */
    private void initBannerViewPager(Context context, AttributeSet attrs){
        mBannerViewPager = new ViewPager(context, attrs);
        LayoutParams bannerParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        addView(mBannerViewPager, bannerParams);
        mBannerViewPager.addOnPageChangeListener(mPageListener);
        mBannerUrlList = new ArrayList<>();
        mAdapter = new InnerPagerAdapter();
        mBannerViewPager.setAdapter(mAdapter);
        mBannerViewPager.setCurrentItem(Integer.MAX_VALUE / 2);
    }

    /**
     * 初始化指示器
     * @param context
     */
    private void initIndicatorView(Context context){
        mIndicator = new BannerIndicator(context);
        LayoutParams indicatorParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, dp2px(40));
        indicatorParams.gravity = BOTTOM | CENTER_HORIZONTAL;
        addView(mIndicator, indicatorParams);
    }

    /**
     * ViewPager滑动监听
     */
    ViewPager.OnPageChangeListener mPageListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }

        @Override
        public void onPageSelected(int position) {
            //此处返回的position是大数
            if (position == 0 || mBannerUrlList.isEmpty()) {
                return;
            }
            setScrollPosition(position);
            int smallPos = position % mBannerUrlList.size();
            mIndicator.setCurrentPosition(smallPos);
            if (mScrollPageListener != null) {
                mScrollPageListener.onPageSelected(smallPos);
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            onPageScrollStateChange(state);
        }
    };

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int height = 0;
        int hMode = MeasureSpec.getMode(heightMeasureSpec);
        int hSize = MeasureSpec.getSize(heightMeasureSpec);
        if(hMode ==  MeasureSpec.UNSPECIFIED || hMode == MeasureSpec.AT_MOST){
            height = dp2px(200);
        }else {
            height = hSize;
        }
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(height,
                MeasureSpec.EXACTLY);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    /**
     * 设置Banner图片地址数据
     * @param bannerData
     */
    public void setBannerData(List<String> bannerData) {
        mBannerUrlList.clear();
        mBannerUrlList.addAll(bannerData);
        mAdapter.notifyDataSetChanged();
        startPlay(mDelayTime);
        mIndicator.setCellCount(bannerData.size());
    }

    /**
     * 开始播放
     *
     * @param delayMillis
     */
    public void startPlay(long delayMillis) {
        isPlay = true;
        mDelayTime = delayMillis;
        play();
    }

    private void play() {
        mCurrentIndex++;
        mHandler.sendEmptyMessageDelayed(PLAY, mDelayTime);
    }

    /**
     * 停止播放
     */
    public void stopPlay() {
        isPlay = false;
    }

    /**
     * 手指滑动时暂停自动轮播，手指松开时重新启动自动轮播
     *
     * @param state
     */
    private void onPageScrollStateChange(int state) {
        if (!mIsAutoScroll) {
            return;
        }
        switch (state) {
            case ViewPager.SCROLL_STATE_IDLE:
                if (!mGestureScroll) {
                    return;
                }
                mGestureScroll = false;
                mHandler.removeMessages(PLAY);
                mHandler.sendEmptyMessageDelayed(PLAY, 100);
                break;
            case ViewPager.SCROLL_STATE_DRAGGING:
                // 手指滑动时，清除播放下一张，防止滑动过程中自动播放下一张
                mGestureScroll = true;
                mHandler.removeMessages(PLAY);
                break;
            default:
                break;
        }
    }

    /**
     * 滑动的时候更新下标
     *
     * @param position
     */
    public void setScrollPosition(int position) {
        mCurrentIndex = position;
    }

    /**
     * 内部Adapter，包装setAdapter传进来的adapter，设置getCount返回Integer.MAX_VALUE
     */
    private class InnerPagerAdapter extends PagerAdapter {

        public InnerPagerAdapter() {}

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            position %= mBannerUrlList.size();
            if (position < 0) {
                position = mBannerUrlList.size() + position;
            }
            ImageView bannerIv = new ImageView(getContext());
            bannerIv.setScaleType(ImageView.ScaleType.CENTER_CROP);
            bannerIv.setLayoutParams(new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
            Glide.with(getContext()).load(mBannerUrlList.get(position)).into(bannerIv);
            container.addView(bannerIv);
            //bannerIv.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
            return bannerIv;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {

        }
    }

    /**
     * 设置是否自动轮播
     * @param isAuto
     */
    public void setAutoScrollEnable(boolean isAuto) {
        mIsAutoScroll = isAuto;
    }

    /**
     * 设置是否显示指示器
     * @param flag
     */
    public void setHasIndicator(boolean flag){
        mIndicator.setVisibility(flag ? VISIBLE : GONE);
    }

    /**
     * 指示器View
     */
    public class BannerIndicator extends View{

        private int mCellCount;
        private int currentPosition;
        private Paint mPaint;

        public BannerIndicator(Context context) {
            super(context);
            init();
        }

        public void init(){
            mPaint = new Paint();
            mPaint.setAntiAlias(true);
        }

        public void setCellCount(int cellCount) {
            mCellCount = cellCount;
            invalidate();
        }

        public void setCurrentPosition(int currentPosition) {
            this.currentPosition = currentPosition;
            invalidate();
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            // 重新测量当前界面的宽度
            int width = getPaddingLeft() + getPaddingRight() + mCellRadius * 2 * mCellCount + mCellMargin * (mCellCount - 1);
            int height = getPaddingTop() + getPaddingBottom() + mCellRadius * 2;
            width = resolveSize(width, widthMeasureSpec);
            height = resolveSize(height, heightMeasureSpec);
            setMeasuredDimension(width, height);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            for (int i = 0; i < mCellCount; i++) {
                if (i == currentPosition) {
                    mPaint.setColor(mIndicatorColor);
                } else {
                    mPaint.setColor(Color.WHITE);
                }
                int left = getPaddingLeft() + i * mCellRadius * 2 + mCellMargin * i;

                canvas.drawCircle(left + mCellRadius, getHeight() / 2, mCellRadius, mPaint);
            }
        }
    }

    /**
     * dp转px
     * @param dpVal   dp value
     * @return px value
     */
    public int dp2px(float dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal,
                getContext().getResources().getDisplayMetrics());
    }

    /**
     * 滚动监听回调接口
     */

    ScrollPageListener mScrollPageListener;

    public void setScrollPageListener(ScrollPageListener mScrollPageListener) {
        this.mScrollPageListener = mScrollPageListener;
    }

    public interface ScrollPageListener {
        void onPageSelected(int position);
    }
}

应用

提供一个供外界设置banner数据的方法：

/**
     * 设置Banner图片地址数据
     * @param bannerData
     */
    public void setBannerData(List<String> bannerData) {
        mBannerUrlList.clear();
        mBannerUrlList.addAll(bannerData);
        mAdapter.notifyDataSetChanged();
        startPlay(mDelayTime);
        mIndicator.setCellCount(bannerData.size());
    }

xml布局中引用（如果是wrap_content，默认是200dp的高度，可在自定义View的onMeasure中自行调整）：

<com.example.zjy.zjywidget.banner.BannerView
        android:id="@+id/banner_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </com.example.zjy.zjywidget.banner.BannerView>

从此之后实现Banner轮播效果就方便多了，只需要一句代码即可：

mBannerView.setBannerData(getBannerData());

getBannerData就是你的图片url集合，将其设置进去，开启你的自动轮播吧~~~