干货集中营

描述

这可能是全网最好用的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.**{*;}

下载

BannerViewPager-master.zip

源码下载

开源

项目地址:  https://github.com/zhpanvip/BannerViewPager

项目分类:  Android

提 交 者 :  zhpanvip

授权协议 : Apache-2.0