描述
这可能是全网最好用的Banner。简单、高效,无缝衔接Kotlin。一行代码实现循环轮播,一屏三页任意变,指示器样式任你挑。
腾讯视频、QQ音乐、酷狗音乐、支付宝、天猫、淘宝、优酷视频、喜马拉雅、网易云音乐、哔哩哔哩、全民K歌等App的Banner样式都可以通过BannerViewPager实现哦!
3.0版本新特性
- 基于ViewPager2实现
- 支持多类型Item
- 内存大幅优化,性能大幅提升
- 新增setOrientation,支持竖直滑动
- 新增addPageTransformer与removeTransformer
- setAdapter替换setHolderCreator
- getData替换了getList方法
- registerOnPageChangeCallback替换setOnPageChangeListener
- setUserInputEnabled取代disableTouchScroll
- 移除setPageTransformerStyle
- 移除部分2.x版本已废弃的方法
- 不再支持android support.
效果预览
开放API
方法名 | 方法描述 | 说明 |
---|---|---|
BannerViewPager<T, VH> setCanLoop(boolean) | 是否开启循环 | 默认值true |
BannerViewPager<T, VH> setAutoPlay(boolean) | 是否开启自动轮播 | 默认值true |
BannerViewPager<T, VH> setInterval(int) | 自动轮播时间间隔 | 单位毫秒,默认值3000 |
BannerViewPager<T, VH> setScrollDuration(int) | 设置页面滚动时间 | 设置页面滚动时间 |
BannerViewPager<T, VH> setRoundCorner(int) | 设置圆角 | 默认无圆角 需要SDK_INT>=LOLLIPOP(API 21) |
BannerViewPager<T, VH> setOnPageClickListener(OnPageClickListener) | 设置页面点击事件 | |
BannerViewPager<T, VH> setAdapter(BaseBannerAdapter<T, VH>) | 设置Adapter | 必须设置Adapter,否则会抛出NullPointerException |
BannerViewPager<T, VH> setIndicatorVisibility(int) | indicator visibility | 默认值VISIBLE 2.4.2 新增 |
BannerViewPager<T, VH> setIndicatorStyle(int) | 设置指示器样式 | 可选枚举(CIRCLE, DASH、ROUND_RECT) 默认CIRCLE |
BannerViewPager<T, VH> setIndicatorGravity(int) | 指示器位置 | 可选值(CENTER、START、END)默认值CENTER |
BannerViewPager<T, VH> setIndicatorColor(int,int) | 指示器圆点颜色 | normalColor:未选中时颜色默认"#8C6C6D72", checkedColor:选中时颜色 默认"#8C18171C" |
BannerViewPager<T, VH> setIndicatorSlideMode(int slideMode) | 设置Indicator滑动模式 | 可选(NORMAL、SMOOTH、WORM),默认值NORMAL |
BannerViewPager<T, VH> setIndicatorSliderRadius(int radius) | 设置指示器圆点半径 | 默认值4dp |
BannerViewPager<T, VH> setIndicatorSliderRadius(int normalRadius,int checkRadius) | 设置指示器圆点半径 | normalRadius:未选中时半径 checkedRadius:选中时的半径,默认值4dp |
BannerViewPager<T, VH> setIndicatorSliderWidth(int) | 设置指示器宽度,如果是圆形指示器,则为直径 | 默认值8dp |
BannerViewPager<T, VH> setIndicatorSliderWidth(int normalWidth, int checkWidth) | 设置指示器宽度,如果是圆形指示器,则为直径 | 默认值8dp |
BannerViewPager<T, VH> setIndicatorHeight(int) | 设置指示器高度,仅在Indicator样式为DASH时有效 | 默认值normalIndicatorWidth/2 |
BannerViewPager<T, VH> setIndicatorSliderGap(int) | 指示器圆点间距 | 默认值为指示器宽度(或者是圆的直径) |
BannerViewPager<T, VH> setIndicatorView(IIndicator) | 设置自定义指示器 | 自定义View需要继承BaseIndicatorView或实现IIndicator |
BannerViewPager<T, VH> setPageTransformer(ViewPager2.PageTransformer) | 设置页面Transformer内置样式 | |
BannerViewPager<T, VH> addPageTransformer(ViewPager2.PageTransformer) | 3.0.0新增,添加页面Transformer样式 | |
BannerViewPager<T, VH> removeTransformer(ViewPager2.PageTransformer) | 3.0.0新增,移除页面Transformer | |
BannerViewPager<T, VH> setCurrentItem(int) | Set the currently selected page. | 2.3.5新增 |
int getCurrentItem() | 获取当前position | 2.3.5新增 |
BannerViewPager<T, VH> setPageStyle(PageStyle) | 设置页面样式 | 2.4.0新增 可选(MULTI_PAGE、MULTI_PAGE_SCALE、MULTI_PAGE_OVERLAP) |
BannerViewPager<T, VH> setPageMargin(int) | 设置页面间隔 | 2.4.0新增 |
BannerViewPager<T, VH> setIndicatorMargin(int left, int top, int right, int bottom) | 设置Indicator边距 | 2.4.1新增 |
BannerViewPager<T, VH> registerOnPageChangeCallback(OnPageChangeListener) | 页面改变的监听事件 | 2.4.3新增 |
BannerViewPager<T, VH> setRoundRect(int) | 设置页面滑动方向 | 为BannerViewPager设置圆角 |
BannerViewPager<T, VH> setOrientation(int) | 设置页面滑动方向 | 3.0.0新增 支持水平和竖直滑动 |
BannerViewPager<T, VH> setUserInputEnabled(int) | 是否开启用户输入 | |
void startLoop() | 开启自动轮播 | 初始化BannerViewPager时不必调用该方法,设置setAutoPlay后会调用startLoop() |
void stopLoop() | 停止自动轮播 | |
List<T> getData() | 获取Banner中的集合数据 | |
void create(List list) | 初始化并构造BannerViewPager | 必须调用,否则前面设置的参数无效 |
xml支持的attrs
Attributes | format | description |
---|---|---|
bvp_interval | integer | 自动轮播时间间隔 |
bvp_scroll_duration | integer | 页面切换时滑动时间 |
bvp_can_loop | boolean | 是否循环 |
bvp_auto_play | boolean | 是否自动播放 |
bvp_indicator_checked_color | color | indicator选中时颜色 |
bvp_indicator_normal_color | color | indicator未选中时颜色 |
bvp_indicator_radius | dimension | indicator圆点半径或者Dash模式的1/2宽度 |
bvp_round_corner | dimension | Banner圆角大小 |
bvp_page_margin | dimension | 页面item间距 |
bvp_reveal_width | dimension | 一屏多页模式下两边item漏出的宽度 |
bvp_indicator_style | enum | indicator样式(circle/dash) |
bvp_indicator_slide_mode | enum | indicator滑动模式(normal;smooth;worm) |
bvp_indicator_gravity | enum | indicator位置(center/start/end) |
bvp_page_style | enum | page样式(normal/multi_page/multi_page_overlap/multi_page_scale) |
bvp_indicator_visibility | enum | indicator visibility(visible/gone/invisible) |
如何使用
由于ViewPager2不支持Android support,因此BannerViewPager 3.0不再支持Android support,如果你仍在使用Android support请使用,请移步BannerViewPager 2.x版本
1.gradle中添加依赖
在项目的root build.gradle中添加如下配置:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
添加依赖
implementation 'com.github.zhpanvip:BannerViewPager:latestVersion'
2.在xml文件中添加如下代码:
<com.zhpan.bannerview.bannerviewpager android:id="@+id/banner_view" android:layout_width="match_parent" android:layout_margin="10dp" android:layout_height="160dp"></com.zhpan.bannerview.bannerviewpager>
3.Banner的Item页面布局
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent">
<imageview android:id="@+id/banner_image" android:layout_width="match_parent" android:layout_height="match_parent" android:scaletype="centerCrop"></imageview>
<linearlayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignparentbottom="true" android:background="#66000000" android:gravity="center_vertical">
<textview 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"></textview>
</linearlayout>
</relativelayout>
4.继承BaseViewHolder,并重写相关方法
public class NetViewHolder extends BaseViewHolder <bannerdata> {
public NetViewHolder(@NonNull View itemView) {
super(itemView);
CornerImageView imageView = findView(R.id.banner_image);
imageView.setRoundCorner(BannerUtils.dp2px(0));
}
@Override
public void bindData(BannerData data, int position, int pageSize) {
CornerImageView imageView = findView(R.id.banner_image);
Glide.with(imageView).load(data.getImagePath()).placeholder(R.drawable.placeholder).into(imageView);
}
}</bannerdata>
5.继承BaseBannerAdapter,并重写相关方法
public class HomeAdapter extends BaseBannerAdapter <bannerdata, netviewholder=""> {
@Override
protected void onBind(NetViewHolder holder, BannerData data, int position, int pageSize) {
holder.bindData(data, position, pageSize);
}
@Override
public NetViewHolder createViewHolder(View itemView, int viewType) {
return new NetViewHolder(itemView);
}
@Override
public int getLayoutId(int viewType) {
return R.layout.item_net;
}
}</bannerdata,>
5.BannerViewPager参数配置
private BannerViewPager <custombean, netviewholder=""> mViewPager;
...
private void initViewPager() {
mViewPager = findViewById(R.id.banner_view);
mViewPager
.setAutoPlay(true)
.setIndicatorStyle(IndicatorStyle.ROUND_RECT)
.setIndicatorSliderGap(getResources().getDimensionPixelOffset(R.dimen.dp_4))
.setIndicatorSliderWidth(getResources().getDimensionPixelOffset(R.dimen.dp_4), getResources().getDimensionPixelOffset(R.dimen.dp_10))
.setIndicatorSliderColor(getColor(R.color.red_normal_color), getColor(R.color.red_checked_color))
.setOrientation(ViewPager2.ORIENTATION_VERTICAL)
.setInterval(2000)
.setAdapter(new HomeAdapter())
.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
@Override
public void onPageSelected(int position) {
super.onPageSelected(position);
BannerData bannerData = mViewPagerHorizontal.getData().get(position);
mTvTitle.setText(bannerData.getTitle());
}
}).create(getPicList(4));
}</custombean,>
6.开启与停止轮播
2.5.0之后版本无需自行在Activity或Fragment中管理stopLoop和startLoop方法,但这两个方法依旧保留对外开放
但是为了节省性能建议在onPause中停止轮播,在onResume中开启轮播:
@Override
public void onPause() {
super.onPause();
if (mViewPager != null) {
mViewPager.stopLoop();
}
}
@Override
protected void onResume() {
super.onResume();
if (mBannerViewPager != null)
mBannerViewPager.startLoop();
}
7.高级功能---自定义IndicatorView
在内置Indicator不满足需求时可以通过自定义IndicatorView实现,例子将实现一个如下图所示的IndicatorView。
(1)自定义View并继承BaseIndicatorView
public class FigureIndicatorView extends BaseIndicatorView {
private int radius = DpUtils.dp2px(20);
private int backgroundColor = Color.parseColor("#88FF5252");
private int textColor = Color.WHITE;
private int textSize=DpUtils.dp2px(13);
public FigureIndicatorView(Context context) {
this(context, null);
}
public FigureIndicatorView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public FigureIndicatorView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(2 * radius, 2 * radius);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setColor(backgroundColor);
canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, mPaint);
mPaint.setColor(textColor);
mPaint.setTextSize(textSize);
String text = currentPosition + 1 + "/" + pageSize;
int textWidth = (int) mPaint.measureText(text);
Paint.FontMetricsInt fontMetricsInt = mPaint.getFontMetricsInt();
int baseline = (getMeasuredHeight() - fontMetricsInt.bottom + fontMetricsInt.top) / 2 - fontMetricsInt.top;
canvas.drawText(text, (getWidth() - textWidth) / 2, baseline, mPaint);
}
public void setRadius(int radius) {
this.radius = radius;
}
@Override
public void setBackgroundColor(@ColorInt int backgroundColor) {
this.backgroundColor = backgroundColor;
}
public void setTextSize(int textSize) {
this.textSize = textSize;
}
public void setTextColor(int textColor) {
this.textColor = textColor;
}
}
(2)设置自定义指示器
FigureIndicatorView indicatorView = new FigureIndicatorView(mContext);
indicatorView.setRadius(BannerUtils.dp2px(18));
indicatorView.setTextSize(BannerUtils.dp2px(13));
indicatorView.setBackgroundColor(Color.parseColor("#aa118EEA"));
mViewPager.setIndicatorGravity(IndicatorGravity.END)
.setIndicatorView(indicatorView)
.setHolderCreator(() -> new ImageResourceViewHolder(0))
.create(mDrawableList);
8. 混淆
如果你的项目开启了混淆,并且在项目中使用了setScrollDuration方法,则必须添加以下混淆规则:
-keep class androidx.recyclerview.widget.**{*;}
-keep class androidx.viewpager2.widget.**{*;}
下载
开源
项目地址: https://github.com/zhpanvip/BannerViewPager 项目分类: Android 提 交 者 : zhpanvip 授权协议 : Apache-2.0
天地万法都是一人一念所变现,你是什么,你的世界就是什么,南无大佛顶首楞严经, 南无大乘妙法莲华经