zguop / Banner
Licence: apache-2.0
🔥🔥ViewPager,ViewPager2无限轮播功能。自定义Indicator,支持一屏三页,支持仿魅族banner效果。极其简单的使用方式
Stars: ✭ 393
Programming Languages
java
68154 projects - #9 most used programming language
Projects that are alternatives of or similar to Banner
ViewWorld
自定义View合集,展示各种自定义View/控件。项目包含了自定义Banner轮播图控件,自定义验证码输入框,自定义TabLayout等控件,持续更新中😉😉😉
Stars: ✭ 94 (-76.08%)
Mutual labels: view, banner, viewpager
SimpleSlider
A simple slider allows you to easily use.
Stars: ✭ 78 (-80.15%)
Mutual labels: banner, viewpager, indicator
IndicatorView
IndicatorView Library For Android
Stars: ✭ 41 (-89.57%)
Mutual labels: view, viewpager, indicator
Banner
🔥🔥🔥Banner 2.0 来了!Android广告图片轮播控件,内部基于ViewPager2实现,Indicator和UI都可以自定义。
Stars: ✭ 11,682 (+2872.52%)
Mutual labels: viewpager, banner, indicator
Bannerlayout
Support unlimited picture rotation BannerLayout, the minimum implementation of the code banner
Stars: ✭ 92 (-76.59%)
Mutual labels: view, viewpager, banner
Bannerviewpager
🚀 An awesome banner view for Android,Based on ViewPager2. 这可能是全网最好用的ViewPager轮播图。简单、高效,一行代码实现循环轮播,一屏三页任意变,指示器样式任你挑。
Stars: ✭ 2,603 (+562.34%)
Mutual labels: viewpager, banner, indicator
Cardslider
Card Slider is an android component allows you to implement carousel effect with infinite indicators and more features
Stars: ✭ 160 (-59.29%)
Mutual labels: view, viewpager, indicator
Android-Universal-ViewPager-Indicator
Android Universal ViewPager Indicator
Stars: ✭ 41 (-89.57%)
Mutual labels: viewpager, indicator
Banner
布局可xml定制任意布局的banner控件,不仅局限于图片轮播哦,轻松解决各种需求。Android广告图片轮播控件,支持无限循环和多种主题,可以灵活设置轮播样式、动画、轮播和切换时间、位置、图片加载框架 以及视频轮播等!
Stars: ✭ 35 (-91.09%)
Mutual labels: banner, viewpager
ArcPageIndicator
Android Page Indicator for ViewPager with original animations. It uses an ellipse to dispose indication spots, and can draw a hand, like in old elevators.
Stars: ✭ 73 (-81.42%)
Mutual labels: viewpager, indicator
AutoScrollLoopViewPager
AutoScrollLoopViewPager, 无限轮播的Banner
Stars: ✭ 46 (-88.3%)
Mutual labels: banner, viewpager
Walk-Through-Screen
This library provides easy ways to add onboarding or pager screens with different animation and indicators.
Stars: ✭ 31 (-92.11%)
Mutual labels: viewpager, indicator
Cmpagetitleview
✍️一分钟集成类似抖音,新浪微博,腾讯视频,网易新闻,今日头条等常见的标题栏样式,api灵活易扩展,支持Cocoapods和Masonry布局,支持ChildController的完整生命周期
Stars: ✭ 270 (-31.3%)
Mutual labels: viewpager, indicator
Instagramactivityindicator
Activity Indicator similar to Instagram's.
Stars: ✭ 138 (-64.89%)
Mutual labels: view, indicator
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
dependencies{
implementation 'com.to.aboomy:pager2banner:1.0.3' //最新版本
}
或者引用本地lib
compile project(':pager2banner')
Step 2.xml
<com.to.aboomy.pager2banner.Banner
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="150dp"/>
Step 3.自定义RecyclerView.Adapter
//自定义adapter
public class ImageAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>
//或者使用其他三方框架,都是支持的,如:BRVAH
public class ImageAdapter extends BaseQuickAdapter<String, BaseViewHolder> {
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
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
banner = findViewById(R.id.banner);
//使用内置Indicator
IndicatorView indicator = new IndicatorView(this)
.setIndicatorColor(Color.DKGRAY)
.setIndicatorSelectorColor(Color.WHITE);
//创建adapter
ImageAdapter adapter = new ImageAdapter();
//传入RecyclerView.Adapter 即可实现无限轮播
banner.setIndicator(indicator)
.setAdapter(adapter);
}
简单设置一屏三页效果
//设置左右页面露出来的宽度及item与item之间的宽度
.setPageMargin(UIUtil.dip2px(this, 20), UIUtil.dip2px(this, 10))
//内置ScaleInTransformer,设置切换缩放动画
.setPageTransformer(true, new ScaleInTransformer())
支持访魅族样式
//单独设置OverlapSliderTransformer,项目里有,可以拷贝到项目中使用 kotlin实现的-。-
.addPageTransformer(new OverlapSliderTransformer(banner.getViewPager2().getOrientation(), 0.25f, 0, 1,0))
关于ViewPager切换动画
pager2banner 只内置了 ScaleInTransformer ,这个比较常用。 demo里集成了以下两个ViewPager切换动画,请运行Sample查看动画效果,需要哪个拷贝到项目中用好了。
介绍一下 IndicatorView
内置的indicator很强大,可以做到很多效果了,很灵活,可以运行demo尝试改变一下参数:
.setIndicatorRatio(1f) //ratio,默认值是1 ,也就是说默认是圆点,根据这个值,值越大,拉伸越长,就成了矩形,小于1,就变扁了呗
.setIndicatorRadius(2f) // radius 点的大小
.setIndicatorSelectedRatio(3)
.setIndicatorSelectedRadius(2f)
.setIndicatorStyle(IndicatorView.IndicatorStyle.INDICATOR_BIG_CIRCLE)
如何自定义Indicator
/**
* 可以实现该接口,自定义Indicator 可参考内置的{@link IndicatorView}
*/
public interface Indicator {
/**
* 当数据初始化完成时调用
*
* @param pagerCount pager数量
*/
void initIndicatorCount(int pagerCount);
/**
* 返回一个View,添加到banner中
*/
View getView();
/**
* banner是一个RelativeLayout,设置banner在RelativeLayout中的位置,可以是任何地方
*/
RelativeLayout.LayoutParams getParams();
void onPageScrolled(int position, float positionOffset, @Px int positionOffsetPixels);
void onPageSelected(int position);
void onPageScrollStateChanged(int state);
}
//举个栗子
public class IndicatorView extends View implements Indicator{
@Override
public void initIndicatorCount(int pagerCount) {
this.pagerCount = pagerCount;
setVisibility(pagerCount > 1 ? VISIBLE : GONE);
requestLayout();
}
@Override
public View getView() {
return this;
}
/**
* 控制Indicator在Banner中的位置,开发者自行实现
*/
@Override
public RelativeLayout.LayoutParams getParams() {
if (params == null) {
params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
params.addRule(RelativeLayout.CENTER_HORIZONTAL);
params.bottomMargin = dip2px(10);
}
return params;
}
/**
* banner切换时同步回调的三个方法
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
selectedPage = position;
offset = positionOffset;
invalidate();
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
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,您的鼓励会给我持续更新的动力。
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].