Banner框架实现图片轮播

Banner 实现图片轮播

简介
导入
自定义样式
快捷使用
总结

Blog如有不对，敬请斧正
喜欢Android的可以关注我，日常更新Android干货
看都看到这了，加个关注叭！

简介

Banner能实现循环播放多个广告图片和手动滑动循环等功能，Banner框架可以进行不同样式、不同动画设置，以及完善的api方法能满足大部分软件首页轮播图效果的需求。

如:

QQ音乐:

网易云:

导入

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

自定义样式

主要是为Banner组件，添加适配器，继承自 BannerAdapter，BannerAdapter又适配器继承自RecyclerView.Adapter，故用法和RecyclerView.Adapter一样
如果RecyclerView还了解的可以看我以前的博客
地址:https://blog.csdn.net/weixin_44758662/article/details/108942044
步骤1:
在XML加入Banner组件

activity_mian.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:app="http://schemas.android.com/apk/res-auto"xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#372E2C2C"><com.youth.banner.Bannerandroid:id="@+id/banner"android:layout_width="match_parent"android:layout_height="110dp"app:banner_radius="15dp"android:layout_marginTop="15dp"android:layout_marginRight="10dp"android:layout_marginLeft="10dp"app:banner_loop_time="2000"/>
</LinearLayout>

要实现的轮播样式XML，我只放了一个ImageView
banner用到的是ViewPage2，ViewPage2规定要layout_width和layout_height要match_parent，所以使用需要注意，不然会抛出错误

mybannerrecycler.xml：

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/img_banner"android:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="fitXY"/>

步骤2:
创建保存轮播样式XML数据的get、set方法，我只有一个ImageView，，故我的只有一个int变量因为 通过R.drawable.xxx获取到的资源文件可以保存为int

infoBean.java

package com.example.CSDN;
public class infoBean {private int picture;infoBean(int picture){this.picture = picture;}public int getPicture() {return picture;}public void setPicture(int picture) {this.picture = picture;}
}

步骤3、创建Banner的适配器
mbanneradapter.java

package com.example.CSDN;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.youth.banner.adapter.BannerAdapter;
import java.util.List;public class mbanneradapter extends BannerAdapter<infoBean,mbanneradapter.mbannerholder> {Context context;/*** 自定义构造方法* @param context  上下文对象* @param datas    传入数据*/public mbanneradapter(Context context,List<infoBean> datas) {super(datas);this.context = context;}@Overridepublic mbannerholder onCreateHolder(ViewGroup parent, int viewType) {return new mbannerholder(LayoutInflater.from(context).inflate(R.layout.mybannerrecycler, parent, false));}@Overridepublic void onBindView(mbannerholder holder, infoBean data, int position, int size) {holder.imageView.setImageResource(data.getPicture());
//设置监听
holder.itemView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {Toast.makeText(context,"第"+(position+1)+"张",Toast.LENGTH_SHORT).show();}
});}public class mbannerholder extends RecyclerView.ViewHolder {ImageView imageView;public mbannerholder(@NonNull View itemView) {super(itemView);imageView = itemView.findViewById(R.id.img_banner);}}
}

步骤4:
在主页面设置banner

package com.example.CSDN;
import android.app.Activity;
import android.os.Bundle;
import com.youth.banner.Banner;
import com.youth.banner.indicator.CircleIndicator;
import java.util.ArrayList;
import java.util.List;public class homeActivity extends Activity {private Banner mbanner;List<infoBean> data = new ArrayList<>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_mian);initDate();mbanner = findViewById(R.id.banner);//设置mbanner设配器
mbanner.setAdapter(new mbanneradapter(homeActivity.this,data));
//是否允许自动轮播
mbanner.isAutoLoop(true);
//设置指示器， CircleIndicator为已经定义好的类，直接用就好
mbanner.setIndicator(new CircleIndicator(this));
//开始轮播
mbanner.start();}/*** 设置数据，可以通过其他方法，这里快捷演示而已*/private void initDate() {data.add(new infoBean(R.drawable.a));data.add(new infoBean(R.drawable.b));data.add(new infoBean(R.drawable.c));data.add(new infoBean(R.drawable.d));data.add(new infoBean(R.drawable.e));}/*** 重写onStop、onDestroy、onStart方法控制banner生命周期，体验更好*/@Overrideprotected void onStop() {super.onStop();mbanner.stop();}@Overrideprotected void onDestroy() {super.onDestroy();mbanner.destroy();}@Overrideprotected void onStart() {super.onStart();mbanner.start();}
}

实现效果:

快捷使用

按照上面的方法，实属有点麻烦，而又只想实现一个图片的轮播效果而已，
那也好办，该框架已经做好了适配器，BannerImageAdapter我们直接用就好了

这样只用一个banner组件和一个添加图片数据的 List<Integer> list = new ArrayList()就好比自定义的方便多了

package com.example.CSDN;
import android.app.Activity;
import android.os.Bundle;
import com.youth.banner.Banner;
import com.youth.banner.adapter.BannerImageAdapter;
import com.youth.banner.holder.BannerImageHolder;
import com.youth.banner.indicator.CircleIndicator;
import java.util.ArrayList;
import java.util.List;public class homeActivity extends Activity {private Banner mbanner;List<Integer> list = new ArrayList();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_mian);initDate();mbanner = findViewById(R.id.banner);//设置mbanner设配器Banner banner = mbanner.setAdapter(new BannerImageAdapter<Integer>(list) {@Overridepublic void onBindView(BannerImageHolder holder, Integer data, int position, int size) {holder.imageView.setImageResource(data);}});
//是否允许自动轮播
mbanner.isAutoLoop(true);
//设置指示器
mbanner.setIndicator(new CircleIndicator(this));
//开始轮播
mbanner.start();}/*** 设置数据，可以通过其他方法，这里快捷演示而已*/private void initDate() {list.add(R.drawable.a);list.add(R.drawable.b);list.add(R.drawable.c);list.add(R.drawable.d);list.add(R.drawable.e);}/*** 重写onStop、onDestroy、onStart方法控制banner生命周期，体验更好*/@Overrideprotected void onStop() {super.onStop();mbanner.stop();}@Overrideprotected void onDestroy() {super.onDestroy();mbanner.destroy();}@Overrideprotected void onStart() {super.onStart();mbanner.start();}
}

总结

下面是banner常用的方法和属性。
常用方法:

方法	详细
setAdapter(T extends BannerAdapter)	设置banner的适配器
getIndicator()	获取你设置的指示器
setIndicator(Indicator)	设置banner轮播指示器
getIndicator()	获取你设置的指示器
setIndicatorSelectedColor(@ColorInt)	设置指示器选中颜色
setIndicatorSpace(int)	设置指示器之间的间距
setBannerGalleryEffect(int,int,float)	画廊效果

XML中banner常用的属性

属性	详细
banner_loop_time	轮播间隔时间，默认3000
banner_radius	banner圆角半径
banner_orientation	轮播方向：horizontal（默认） or vertical
banner_auto_loop	是否自动轮播，默认true