android 自动循环,打造一个丝滑般自动轮播无限循环Android库

2.自定义Indicator样式

BannerViewPager开放了众多设置Indicator样式的接口，比如可以设置Indicator的滑动模式、颜色、半径大小、位置等。目前Indicator的滑动模式仅支持NORMAL和SMOOTH两种，后续可能会支持更多滑动模式，敬请期待。两种模式效果如下:

NORMAL

SMOOTH

3.自定义IndicatorView

如果以上样式不能满足你的需求，BannerViewPager还提供了完全自定义IndicatorView的功能。只要继承BaseIndicatorView或者实现IIndicator接口，并重写相应方法，就可以为所欲为的打造任意的Indicator了。下图是一个自定义仿支付宝的Indicator：

4.自定义Transform

关于Transform更好的方式应该是留给开发者自己去实现，因此BannerViewPager中仅仅内置了四种常用Transform样式，如果不能满足需求，可以通过getViewPager.setPageTransformer(ViewPager.PageTransformer transformer)设置自定义的Transform。四种内置Transform样式如下：

STACK

ROTATE

DEPTH

ACCORDION

当然，BannerViewPager的功能并不仅仅局限于此，更多功能就不再贴图，可以看下面所有开放的API接口。

二、BannerViewPager开放的API

BannerViewPager开放了众多API,以供满足不同的需求，具体如下表：

方法名

方法描述

说明

BannerViewPager setCanLoop(boolean canLoop)

是否开启循环

默认值true

BannerViewPager setAutoPlay(boolean autoPlay)

是否开启自动轮播

默认值true

BannerViewPager setInterval(int interval)

自动轮播时间间隔

单位毫秒，默认值3000

BannerViewPager setScrollDuration(int scrollDuration)

设置页面滚动时间

设置页面滚动时间

BannerViewPager setRoundCorner(int radius)

设置圆角

默认无圆角 需要SDK_INT>=LOLLIPOP(API 21)

BannerViewPager setOnPageClickListener(OnPageClickListener onPageClickListener)

设置页面点击事件

BannerViewPager setHolderCreator(HolderCreator holderCreator)

设置HolderCreator

必须设置HolderCreator，否则会抛出NullPointerException

BannerViewPager showIndicator(boolean showIndicator)

是否显示指示器

默认值true

BannerViewPager setIndicatorStyle(IndicatorStyle indicatorStyle)

设置指示器样式

可选枚举(CIRCLE, DASH) 默认CIRCLE

BannerViewPager setIndicatorGravity(int gravity)

指示器位置

可选值(CENTER、START、END)默认值CENTER

BannerViewPager setIndicatorColor(int normalColor,int checkedColor)

指示器圆点颜色

normalColor：未选中时颜色默认"#8C6C6D72"， checkedColor：选中时颜色 默认"#8C18171C"

BannerViewPager setIndicatorSlideMode(IndicatorSlideMode slideMode)

设置Indicator滑动模式

可选(NORMAL、SMOOTH)，默认值SMOOTH

BannerViewPager setIndicatorRadius(int radius)

设置指示器圆点半径

默认值4dp

BannerViewPager setIndicatorRadius(int normalRadius,int checkRadius)

设置指示器圆点半径

normalRadius:未选中时半径 checkedRadius:选中时的半径,默认值4dp

BannerViewPager setIndicatorWidth(int indicatorWidth)

设置指示器宽度，如果是圆形指示器，则为直径

默认值8dp

BannerViewPager setIndicatorWidth(int normalWidth, int checkWidth)

设置指示器宽度，如果是圆形指示器，则为直径

默认值8dp

BannerViewPager setIndicatorHeight(int indicatorHeight)

设置指示器高度，仅在Indicator样式为DASH时有效

默认值normalIndicatorWidth/2

BannerViewPager setIndicatorGap(int indicatorMargin)

指示器圆点间距

默认值为指示器宽度(或者是圆的直径)

BannerViewPager setIndicatorView(IIndicator indicatorView)

设置自定义指示器

设置自定义指示器后以上关于IndicatorView的参数会部分失效

BannerViewPager setPageTransformerStyle(TransformerStyle style)

设置页面Transformer内置样式

void startLoop

开启自动轮播

初始化BannerViewPager时不必调用该方法,设置setAutoPlay后会调用startLoop

void stopLoop

停止自动轮播

如果开启自动轮播，为避免内存泄漏需要在onStop或onDestory中调用此方法

ViewPager getViewPager

获取BannerViewPager内部封装的ViewPager

List getList

获取Banner中的集合数据

void create(List list)

初始化并构造BannerViewPager

必须调用，否则前面设置的参数无效

三、如何使用BannerViewPager

1.gradle中添加依赖

如果您已迁移到AndroidX请使用latestVersion(>=2.3.0)

implementation'com.zhpan.library:bannerview:latestVersion'

如果未迁移到AndroidX请使用：

implementation'com.zhpan.library:bannerview:2.2.7'

2. 在xml文件中添加如下代码：

android:id="@+id/banner_view"

android:layout_width="match_parent"

android:layout_margin="10dp"

android:layout_height="160dp"/>

3.Banner的Item页面布局

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:id="@+id/banner_image"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="centerCrop"/>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:background="#66000000"

android:gravity="center_vertical">

android:id="@+id/tv_describe"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="center_vertical"

android:layout_marginStart="15dp"

android:gravity="center_vertical"

android:paddingTop="5dp"

android:paddingBottom="5dp"

android:textColor="#FFFFFF"

android:textSize="16sp"/>

4.自定义ViewHolder

publicclassNetViewHolderimplementsViewHolder{

privateImageView mImageView;

privateTextView mTextView;

@Override

publicView createView(ViewGroup viewGroup, Context context, intposition){

View view = LayoutInflater.from(context).inflate(R.layout.item_net, viewGroup, false

mImageView = view.findViewById(R.id.banner_image);

mTextView = view.findViewById(R.id.tv_describe);

returnview;

}

@Override

publicvoidonBind(Context context, BannerData data, intposition, intsize){

ImageLoaderOptions options = newImageLoaderOptions.Builder.into(mImageView).load(data.getImagePath).placeHolder(R.drawable.placeholder).build;

ImageLoaderManager.getInstance.loadImage(options);

mTextView.setText(data.getTitle);

}

}

5.BannerViewPager参数配置

privateBannerViewPager mBannerViewPager;

privatevoidinitViewPager{

mBannerViewPager = findViewById(R.id.banner_view);

mBannerViewPager.showIndicator( true)

.setInterval( 3000)

.setCanLoop( false)

.setAutoPlay( true)

.setRoundCorner(DpUtils.dp2px( 7))

.setIndicatorColor(Color.parseColor( "#935656"), Color.parseColor( "#FF4C39"))

.setIndicatorGravity(BannerViewPager.END)

.setScrollDuration( 1000).setHolderCreator(NetViewHolder:: new)

.setOnPageClickListener(position -> {

BannerData bannerData = mBannerViewPager.getList.get(position);

Toast.makeText(NetworkBannerActivity. this,

"点击了图片"+ position + " "+ bannerData.getDesc, Toast.LENGTH_SHORT).show;

}).create(mList);

}

6.开启与停止轮播

如果开启了自动轮播功能，请务必在onDestroy中停止轮播，以免出现内存泄漏。

@Override

protectedvoidonDestroy{

super.onDestroy;

if(mBannerViewPager != null)

mViewpager.stopLoop;

}

为了节省性能也可以在onStop中停止轮播，在onResume中开启轮播：

@Override

protectedvoidonStop{

super.onStop;

if(mBannerViewPager != null)

mBannerViewPager.stopLoop;

}

@Override

protectedvoidonResume{

super.onResume;

if(mBannerViewPager != null)

mBannerViewPager.startLoop;

}

7.高级功能---自定义IndicatorView

(1)自定义View并继承BaseIndicatorView

publicclassDashIndicatorViewextendsBaseIndicatorViewimplementsIIndicator{

privatePaint mPaint;

privatefloatsliderHeight;

...省略部分代码

publicDashIndicatorView(Context context, AttributeSet attrs, intdefStyleAttr){

super(context, attrs, defStyleAttr);

mPaint = newPaint;

mPaint.setColor(normalColor);

mPaint.setAntiAlias( true);

sliderHeight = normalIndicatorWidth / 2;

}

@Override

protectedvoidonMeasure(intwidthMeasureSpec, intheightMeasureSpec){

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

setMeasuredDimension(( int) ((mPageSize - 1) *mIndicatorGap + normalIndicatorWidth * mPageSize),

( int) (sliderHeight));

}

@Override

protectedvoidonDraw(Canvas canvas){

super.onDraw(canvas);

mPaint.setColor(normalColor);

for( inti = 0; i < mPageSize; i++) {

mPaint.setColor(normalColor);

canvas.drawRect(i * (normalIndicatorWidth) + i * +mIndicatorGap, 0, i * (normalIndicatorWidth) + i * +mIndicatorGap + normalIndicatorWidth, sliderHeight, mPaint);

}

drawSliderStyle(canvas);

}

@Override

publicvoidonPageSelected(intposition){

super.onPageSelected(position);

}

@Override

publicvoidonPageScrolled(intposition, floatpositionOffset, intpositionOffsetPixels){

super.onPageScrolled(position, positionOffset, positionOffsetPixels);

}

@Override

publicvoidonPageScrollStateChanged(intstate){

super.onPageScrollStateChanged(state);

}

privatevoiddrawSliderStyle(Canvas canvas){

mPaint.setColor(checkedColor);

floatleft = currentPosition * (checkedIndicatorWidth) + currentPosition * +mIndicatorGap + (checkedIndicatorWidth + mIndicatorGap) * slideProgress;

canvas.drawRect(left, 0, left + checkedIndicatorWidth, sliderHeight, mPaint);

}

publicDashIndicatorView setSliderHeight(intsliderHeight){

this.sliderHeight = sliderHeight;

returnthis;

}

}

(2)BannerViewPager设置自定义Indicator

privatevoidsetUpViewPager{

viewPager = findViewById(R.id.banner_view);

List list= Arrays.asList(picUrls);

viewPager.setAutoPlay( false).setCanLoop( true)

.setRoundCorner(DpUtils.dp2px( 5))

.setIndicatorView(setupIndicatorView( list.size))

.setHolderCreator(SlideModeViewHolder:: new).create( list);

}

privateDashIndicatorView setupIndicatorView(intpageSize){

DashIndicatorView indicatorView = newDashIndicatorView( this);

indicatorView.setPageSize(pageSize);

indicatorView.setIndicatorWidth(DpUtils.dp2px( 8), DpUtils.dp2px( 8

indicatorView.setSliderHeight(DpUtils.dp2px( 4));

indicatorView.setIndicatorGap(DpUtils.dp2px( 5));

indicatorView.setCheckedColor(getResources.getColor(R.color.colorAccent));

indicatorView.setNormalColor(getResources.getColor(R.color.colorPrimary));

returnindicatorView;

}

四、TODO 版本计划

优化及重构IndicatorView~~(2.0.1)

修复2.1.0以前版本循环滑动时第一张切换卡顿问题~~ (2.1.0.1)

增加页面滑动动画~~(2.1.2)

迁移AndroidX~~(2.2.0)

增加IndicatorView的滑动样式~~(2.2.2)

增添更多Indicator样式(2.3.+)

ViewPager更换为ViewPager2 (3.0.0)

目前Indicator部分代码比较乱，还有很大很大的优化空间，后续版本将持续优化

关于实现原理将会再下一篇文章中讲解。

都看到这里了，确定不留下你的star、fork？🙈链接再放一次,🙈🙈开启疯狂暗示🙈🙈如果有好的Idea也欢迎Pull Request。

作者：smilyy

链接：https://juejin.im/post/5d6bce24f265da03db0790d1