Banner

Banner 2.0 全新升级

只做一个可以自定义的轮播容器，不侵入UI ———— Banner 2.0

Banner 1.4.10(还想看老版本的可以点击这里)

阔别已久，从新回归

• 首先我声明几点：
  • 这只是一个开源库，如果满意你可以使用、可以借鉴修改，希望对你们有所帮助。
  • 如果不满意请友好的提出，注明错误的详细信息或者修改建议，好的想法和自定义的东西亦可以直接提交，大家都能来一起完善。
  • 如果你觉得实在是没用，也请你做一个有自我修养的人。

主要改进功能介绍

最开始是想上传以前基于viewpager更新好的版本，但是看着viewpager2正式版已经出来了，就上新的吧，viewpager2确实比viewpager性能好很多。

• [x] 使用了ViewPager2为基础控件 ViewPager2介绍
• [x] 支持了androidx兼容包
• [x] 方便了UI、Indicator自定义
• [x] 支持画廊效果、魅族效果
• [x] 兼容了水平和垂直轮播，也可以实现类似淘宝头条的效果
• [x] 依赖包目前只需要导入了ViewPager2

效果图

更多效果运行demo查看

内置了多种PageTransformer效果

方法

更多方法以实际使用为准，下面不一定全部列出了

Attributes属性

在banner布局文件中调用,如果你自定义了indicator请做好兼容处理。 下面的属性并不是每个指示器都用得到，所以使用时要注意！

使用步骤

以下提供的是最简单的步骤，需要复杂的样式自己可以自定义

Step 1.依赖banner

Gradle

repositories {
    maven { url "https://s01.oss.sonatype.org/content/groups/public" }
}

dependencies{
    //2.1.0以前jcenter的依赖
    //implementation 'com.youth.banner:banner:2.1.0'
    //现在Maven Central
    implementation 'io.github.youth5201314:banner:2.2.2'

}

Step 2.添加权限到你的 AndroidManifest.xml

<!-- if you want to load images from the internet -->
<uses-permission android:name="android.permission.INTERNET" /> 

Step 3.在布局文件中添加Banner，可以设置自定义属性

！！！此步骤可以省略，可以直接在Activity或者Fragment中new Banner();

<com.youth.banner.Banner
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/banner"
    android:layout_width="match_parent"
    android:layout_height="高度自己设置" />

Step 4.继承BannerAdapter，和RecyclerView的Adapter一样（如果你只是图片轮播也可以使用默认的）

！！！此步骤可以省略，图片轮播提供有默认适配器，其他的没有提供是因为大家的可变性要求不确定，所以直接自定义的比较好。

/**
 * 自定义布局，下面是常见的图片样式，更多实现可以看demo，可以自己随意发挥
 */
public class ImageAdapter extends BannerAdapter<DataBean, ImageAdapter.BannerViewHolder> {

    public ImageAdapter(List<DataBean> mDatas) {
        //设置数据，也可以调用banner提供的方法,或者自己在adapter中实现
        super(mDatas);
    }

    //创建ViewHolder，可以用viewType这个字段来区分不同的ViewHolder
    @Override
    public BannerViewHolder onCreateHolder(ViewGroup parent, int viewType) {
        ImageView imageView = new ImageView(parent.getContext());
        //注意，必须设置为match_parent，这个是viewpager2强制要求的
        imageView.setLayoutParams(new ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT));
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        return new BannerViewHolder(imageView);
    }

    @Override
    public void onBindView(BannerViewHolder holder, DataBean data, int position, int size) {
        holder.imageView.setImageResource(data.imageRes);
    }

    class BannerViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;

        public BannerViewHolder(@NonNull ImageView view) {
            super(view);
            this.imageView = view;
        }
    }
}

Step 5.Banner具体方法调用

public class BannerActivity extends AppCompatActivity {
    public void useBanner() {
        //--------------------------简单使用-------------------------------
        banner.addBannerLifecycleObserver(this)//添加生命周期观察者
                .setAdapter(new BannerExampleAdapter(DataBean.getTestData()))
                .setIndicator(new CircleIndicator(this));
        
        //—————————————————————————如果你想偷懒，而又只是图片轮播————————————————————————
         banner.setAdapter(new BannerImageAdapter<DataBean>(DataBean.getTestData3()) {
                    @Override
                    public void onBindView(BannerImageHolder holder, DataBean data, int position, int size) {
                        //图片加载自己实现
                        Glide.with(holder.itemView)
                             .load(data.imageUrl)
                             .apply(RequestOptions.bitmapTransform(new RoundedCorners(30)))
                             .into(holder.imageView);
                    }
                })
                .addBannerLifecycleObserver(this)//添加生命周期观察者
                .setIndicator(new CircleIndicator(this));
        //更多使用方法仔细阅读文档，或者查看demo
    }
}

Banner使用中优化体验

如果你需要考虑更好的体验，可以看看下面的代码

Step 1.（可选）生命周期改变时

public class BannerActivity {
  
    //方法一：自己控制banner的生命周期
    
    @Override
    protected void onStart() {
        super.onStart();
        //开始轮播
        banner.start();
    }
    
    @Override
    protected void onStop() {
        super.onStop();
        //停止轮播
        banner.stop();
    }
    
    @Override
    protected void onDestroy() {
        super.onDestroy();
        //销毁
        banner.destroy();
    }
    
    //方法二：调用banner的addBannerLifecycleObserver()方法，让banner自己控制
   
    protected void onCreate(Bundle savedInstanceState) {
         //添加生命周期观察者
        banner.addBannerLifecycleObserver(this);
    }
}

常见问题（收录被反复询问的问题）

• 网络图片加载不出来？

  banner本身不提供图片加载功能，首先确认banner本身使用是否正确，具体参考demo， 然后请检查你的图片加载框架或者网络请求框架，服务端也可能加了https安全认证，是看下是否报有证书相关错误

• 怎么实现视频轮播？

  demo中有实现类似淘宝商品详情的效果，第一个放视频，后面的放的是图片，并且可以设置首尾不能滑动。 因为大家使用的播放器不一样业务环境也不同，具体情况自己把握，demo就是给一个思路哈！可以参考和修改

• 我想指定轮播开始的位置？

  现在提供了setStartPosition()方法，在sheAdapter和setDatas直接调用一次就行了，当然setAdapter后通过setCurrentItem设置也行

• 父控件滑动时，banner切换会获取焦点，然后自动全部显示。不想让banner获取焦点可以给父控件加上：

      //banner也一定要用最新版哦！
      android:focusable="true"
      android:focusableInTouchMode="true"
  

• 怎么设置圆角？ 1、调用提供的方法或者自定义属性进行设置，这里设置的是banner本身的圆角，不是轮播内view的圆角 2、在adapter中对自定义的view进行自己实现，就拿图片举例：可以自己定义一个圆角的ImageView控件，或者使用glide渲染都行。请举一反三，view都自定义了还有什么不能改的？

Thanks

• MZBannerView
• MagicViewPager
• zguop的viewpager2的滑动时间解决方案

联系方式

• 我的个人微博：https://weibo.com/u/3013494003 有兴趣的也可以关注，大家一起交流
• 有问题可以加群大家一起交流，如果你觉得对你有帮助可以扫描下面支付宝二维码随意打赏下哦！

更新说明

更新说明