前言
平时应用开发中首页经常会有一个Banner轮播的展示,不可避免的需要封装一个自定义View,在使用的时候能够方便的只用一句代码设置图片地址集合,就可以启动轮播效果,本文将通过ViewPager一步步对轮播图进行实现,最终效果如下:
源码传送门:https://github.com/GitHubZJY/ZJYWidget
里面还有很多实用的自定义View源码及demo,互相学习,互相进步,欢迎Star~
特性
主要支持以下特性:
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集合,将其设置进去,开启你的自动轮播吧~~~