随着Android弃用了jcenter库以后,Banner的使用也大大的和以前不同,下面就来介绍一下2.2.2版本banner的使用和Demo
一、改进内容
首先看看新版Banner都改进了哪些内容:
主要改进功能介绍
- 使用了ViewPager2为基础控件 ViewPager2介绍
- 支持了androidx兼容包
- 方便了UI、Indicator自定义
- 支持画廊效果、魅族效果
- 兼容了水平和垂直轮播,也可以实现类似淘宝头条的效果
- 依赖包目前只需要导入了ViewPager2
二、Demo效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/fe4f0282ce2344f494c4278482af8b04.png#pic_center)
二、步骤
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地址