概述
平时应用开发中首页经常会有一个Banner轮播的展示，不可避免的需要封装一个自定义View，在使用的时候能够方便的只用一句代码设置图片地址集合，就可以启动轮播效果，本文将通过ViewPager一步步对轮播图进行实现，最终效果如下：
需要定制的特性
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集合，将其设置进去，开启你的自动轮播吧~~~
后续
ViewPager不止可以做轮播，还支持自定义各种切换动画，详见我另一篇文章 Android ViewPager多屏显示、切换动画，让你的轮播炫起来
最近有点沉迷于自定义View，其实很多看似很基础的东西还是很重要的，底层基础决定上层建筑，本篇的轮播效果尽管并不复杂，但是巧妙利用View的属性有时候能够带来不错的效果。这里还存在一个无限大所导致的内存隐患问题，不知道广大简友有没有更好的方案进行优化？
源码传送门：GitHub-ZJYWidget-YCircleProgressBar
CSDN博客：IT_ZJYANG
简 书：Android小Y
里面还有很多实用的自定义View源码及demo，会长期维护，欢迎Star~ 如有不足之处或建议还望指正，相互学习，相互进步，如果觉得不错动动小手点个喜欢， 谢谢~
