Baike.dev
All toolsOnline toolsAI codingTrendingOpen sourceNewsSubmit
Log in
< Back to tools
B

banner

> 编程语言
Open source

ViewPager,ViewPager2无限轮播功能。自定义Indicator,支持一屏三页,支持仿魅族banner效果。极其简单的使用方式

706 stars0 likes0 views
WebsiteGitHub

About

ViewPager,ViewPager2无限轮播功能。自定义Indicator,支持一屏三页,支持仿魅族banner效果。极其简单的使用方式

Android轮播控件

全新升级,基于ViewPager2实现无限轮播功能。可以自定义indicator,需自定义实现 Indicator 接口,内置了的IndicatorView,支持五种动画切换。支持传入RecyclerView.Adapter 即可实现无限轮播,支持任何ReyclerView.Apdater框架,集成使用请参考Demo。

  • 支持自动轮播
  • 支持一屏三页
  • 支持自定义Indicator
  • 支持自定义view
  • 支持垂直滚动
  • 支持任意RecyclerView.adapter
  • 目前就4个类,良好的代码封装,更多请参考代码实现。

ViewPager2是androidx中的 还在使用support请使用ViewPager版本(持续维护...)banner请点击

效果图

点击下载 banner.apk 体验


基本使用的功能,请下载apk体验更流畅
描述 普通样式 两边缩放
一屏三页
IndicatorView IndicatorStyle
INDICATOR_CIRCLE INDICATOR_CIRCLE_RECT
INDICATOR_BEZIER INDICATOR_DASH
INDICATOR_BIG_CIRCLE

注意:0.0.5版本开始,IndicatorView更新

  • INDICATOR_DASH:不再提供默认的长度,默认是没有长度的,一定要设置setIndicatorSelectedRatio属性,将圆点进行拉伸为矩形。

  • INDICATOR_BIG_CIRCLE:不再提供默认的Max圆,默认是一样大的,所以看起来没有效果,一定要设置indicatorSelectedRadius属性,控制选中的大小。

效果图 1 2
收集更多的效果
Indicator查看simple代码
...

版本更新内容点击查看

使用步骤

Step 1.依赖banner

Gradle

groovy
    repositories {
        mavenCentral()
    }
	
dependencies{
    //已迁移至mavenCentral
    implementation 'io.github.zguop:pager2Banner:1.0.5'
}

或者引用本地lib

groovy
compile project(':pager2banner')

Step 2.xml

xml
     

Step 3.自定义RecyclerView.Adapter

java
//自定义adapter
public class ImageAdapter extends RecyclerView.Adapter 
 
//或者使用其他三方框架,都是支持的,如:BRVAH
public class ImageAdapter extends BaseQuickAdapter {
    public ImageAdapter() {
        super(R.layout.item_image);
    }
    @Override
    protected void convert(@NonNull BaseViewHolder helper, String item) {
        Glide.with(mContext)
                .load(item)
                .into((ImageView) helper.getView(R.id.img));
    }
}

Step 4.在页面中使用Banner

…

简单设置一屏三页效果

java

//设置左右页面露出来的宽度及item与item之间的宽度
.setPageMargin(UIUtil.dip2px(this, 20), UIUtil.dip2px(this, 10))
//内置ScaleInTransformer,设置切换缩放动画
.setPageTransformer(true, new ScaleInTransformer())
    
支持访魅族样式
java
//单独设置OverlapSliderTransformer,项目里有,可以拷贝到项目中使用 kotlin实现的-。-
 .addPageTransformer(new OverlapSliderTransformer(banner.getViewPager2().getOrientation(), 0.25f, 0, 1,0))

关于ViewPager切换动画

pager2banner 只内置了 ScaleInTransformer ,这个比较常用。 demo里集成了以下两个ViewPager切换动画,请运行Sample查看动画效果,需要哪个拷贝到项目中用好了。

ViewPagerTransforms

MagicViewPager

介绍一下 IndicatorView

内置的indicator很强大,可以做到很多效果了,很灵活,可以运行demo尝试改变一下参数:

java
    .setIndicatorRatio(1f) //ratio,默认值是1 ,也就是说默认是圆点,根据这个值,值越大,拉伸越长,就成了矩形,小于1,就变扁了呗
    .setIndicatorRadius(2f) // radius 点的大小
    .setIndicatorSelectedRatio(3) 
    .setIndicatorSelectedRadius(2f)
    .setIndicatorStyle(IndicatorView.IndicatorStyle.INDICATOR_BIG_CIRCLE)       

如何自定义Indicator

…

Banner提供的方法介绍,banner未提供任何自定义属性

方法名 描述
addPageTransformer(ViewPager2.PageTransformer transformer) 设置viewpager2的自定义动画,支持多个添加
setOuterPageChangeListener(ViewPager2.OnPageChangeCallback listener) 设置viewpager2的滑动监听
setAutoTurningTime(long autoTurningTime) 设置自动轮播时长
setAutoPlay(boolean autoPlay) 设置是否自动轮播,大于1页可以轮播
setIndicator(Indicator indicator) 设置indicator
setIndicator(Indicator indicator, boolean attachToRoot) 设置indicator
setAdapter(@Nullable RecyclerView.Adapter adapter) 加载数据,此方法时开始轮播的方法,请再最后调用
setAdapter(@Nullable RecyclerView.Adapter adapter, int startPosition) 重载方法,设置轮播的起始位置
isAutoPlay() 是否无限轮播
getCurrentPager() 获取viewPager2当前位置
startTurning() 开始轮播
stopTurning() 停止轮播
setPageMargin(int multiWidth, int pageMargin) 设置一屏多页
setPageMargin(int leftWidth, int rightWidth, int pageMargin) 设置一屏多页,方法重载
setOffscreenPageLimit(int limit) 同viewPager2用法
setOrientation(@ViewPager2.Orientation int orientation) 设置viewpager2滑动方向
ViewPager2 getViewPager2() 获取viewpager2
RecyclerView.Adapter getAdapter() 获取apdater
setPagerScrollDuration(long pagerScrollDuration) 设置viewpager2的切换时长

内置IndicatorView使用方法介绍,没有提供任何自定义属性

方法名 描述
setIndicatorRadius(float indicatorRadius) 设置圆点半径
setIndicatorSpacing(float indicatorSpacing) 设置圆点间距
setIndicatorStyle(@IndicatorStyle int indicatorStyle) 设置圆点切换动画,内置五种切换动画,请参考Sample
setIndicatorColor(@ColorInt int indicatorColor) 设置默认的圆点颜色
setIndicatorSelectorColor(@ColorInt int indicatorSelectorColor) 设置选中的圆点颜色
setParams(RelativeLayout.LayoutParams params) 设置IndicatorView在banner中的位置,默认底部居中,距离底部10dp,请参考Sample
setIndicatorRatio(float indicatorRatio) 设置indicator比例,拉伸圆为矩形,设置越大,拉伸越长,默认1.0
setIndicatorSelectedRadius(float indicatorSelectedRadius) 设置选中的圆角,默认和indicatorRadius值一致,可单独设置选中的点大小
setIndicatorSelectedRatio(float indicatorSelectedRatio) 设置选中圆比例,拉伸圆为矩形,控制该比例,默认比例和indicatorRatio一致,默认值1.0

总结

xiexie ni de guāng gù ! 喜欢的朋友轻轻右上角赏个star,您的鼓励会给我持续更新的动力。

Issues· 0 open

View all issuesOpen on GitHub

No open issues yet, or sync has not completed.

> Tags

Javabannerindicatorviewviewpager

No comments yet. Be the first to share.

> Details

PublishedAug 1, 2026
UpdatedSep 17, 2026
Category编程语言
PricingOpen source

> Related tools

T
TypeScript
JavaScript 的超集,为前端与全栈提供静态类型
P
Python
通用编程语言,广泛用于 Web、数据与 AI
G
Go
Google 推出的简洁高效系统语言