2.2.2新版Banner轮播图实现

随着Android弃用了jcenter库以后，Banner的使用也大大的和以前不同，下面就来介绍一下2.2.2版本banner的使用和Demo

---

一、改进内容

首先看看新版Banner都改进了哪些内容：

主要改进功能介绍

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

---

二、Demo效果图

二、步骤

1.引入库，依赖banner

//Project中build.Gradle
repositories {
    maven { url "https://s01.oss.sonatype.org/content/groups/public" }
}
//moudle中build.gradle
dependencies{
    //2.1.0以前jcenter的依赖
    //implementation 'com.youth.banner:banner:2.1.0'
    //现在Maven Central
    implementation 'io.github.youth5201314:banner:2.2.2'

}

2.xml文件

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.youth.banner.Banner
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        app:banner_loop_time="2000"
        app:banner_radius="15dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.05"/>


</androidx.constraintlayout.widget.ConstraintLayout>

---

3.activity文件

public class MainActivity extends AppCompatActivity {

    private List<Integer> mBannerList = new ArrayList();
    private Banner mBanner;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        initBanner();
    }

    private void initData(){
        mBannerList.add(R.drawable.lunbo01);
        mBannerList.add(R.drawable.lunbo02);
        mBannerList.add(R.drawable.lunbo03);
        mBannerList.add(R.drawable.lunbo04);
        mBannerList.add(R.drawable.lunbo05);
    }

    private void initBanner(){
        mBanner = findViewById(R.id.banner);
        mBanner.setAdapter(new BannerImageAdapter<Integer>(mBannerList) {
            @Override
            public void onBindView(BannerImageHolder holder, Integer data, int position, int size) {
                holder.imageView.setImageResource(data);
            }

        });
        mBanner.isAutoLoop(true);
        mBanner.setIndicator(new CircleIndicator(this));
        mBanner.start();
    }
}

到此就可以完成上述的轮播图功能！！，文章末尾贴出Demo地址，接下来介绍一下Banner进阶功能使用

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;
        }
    }
}

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
    }
}

6.Banner使用中优化体验

（可选）生命周期改变时

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);
    }
}

7.Demo地址

Demo地址