无量变何以质变

 
 

---

概述

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

轮播.gif

 

需要定制的特性

1.是否显示指示器

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

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

4.是否自动轮播

5.左右无边界轮播

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

实现思路

我们都知道ViewPager是可以左右滑动的，并且可以设置Adapter, 那如果能够设置为无限大，且每隔一段时间就调用滑动，即可达到轮播效果，主要需要解决以下几个问题：如何实现无限循环，自动轮播以及兼容手势滑动。

---

1）实现无限循环

首先实现左右无限循环的效果，思路就是将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) {
        }

}

 
 

---

2）实现自动轮播

实现了左右无限轮播，接下来就要让它能够自动动起来，这里采用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);
}

 
 

---

3）兼容手势滑动

实现了自动轮播之后，我们还要兼容用户主动滑动的场景，即用户主动滑动时，应该暂停自动轮询，先以用户主动滑动的动作为主，当用户放开手指之后，再重新继续自动轮询，既然要区分是否是手势滑动，可以在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将当前的轮询暂停

 
 

---

4）添加轮播指示器

以上完成了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重新绘制。
 
 

---

5）开放滑动监听接口

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

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

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);
    }
};

 
 

---

6）提供设置Banner数据接口

提供一个供外界设置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集合，将其设置进去，开启你的自动轮播吧~~~

 
 

---

后续

最近有点沉迷于自定义View，其实很多看似很基础的东西还是很重要的，底层基础决定上层建筑，本篇的轮播效果尽管并不复杂，但是巧妙利用View的属性有时候能够带来不错的效果。这里还存在一个无限大所导致的内存隐患问题，不知道广大简友有没有更好的方案进行优化？

源码传送门：GitHub-ZJYWidget-YCircleProgressBar
CSDN博客：IT_ZJYANG
简          书：Android小Y
里面还有很多实用的自定义View源码及demo，会长期维护，欢迎Star~ 如有不足之处或建议还望指正，相互学习，相互进步，如果觉得不错动动小手给个Star， 谢谢~