1. Banner 是什么
Banner能实现循环播放多个广告图片和手动滑动循环等功能。
因为原生ViewPager并不支持循环翻页, 要实现循环还得需要自己去动手。
Banner框架可以进行不同样式、不同动画设置, 以及完善的api方法能满足大部分软件首页轮播图效果的需求。
下载地址:https://github.com/youth5201314/banner
Gradle 添加依赖
dependencies{
compile 'com.youth.banner:banner:1.4.8' //最新版本
or
compile 'com.youth.banner:banner:1.3.3' //旧版本,旧版本用法下面有跳转链接
2. 简单使用
2.1 在布局文件中添加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="高度自己设置"
2.2 重写布局加载器
public class GlideImageLoader extends ImageLoader
@Override
public void displayImage(Context context, Object path, ImageView imageView) {
/**
注意:
1.图片加载器由自己选择,这里不限制,只是提供几种使用方法
2.返回的图片路径为Object类型,由于不能确定你到底使用的那种图片加载器,
传输的到的是什么格式,那么这种就使用Object接收和返回,你只需要强转成你传输的类型就行,
切记不要胡乱强转!
*/
eg:
//Glide 加载图片简单用法
Glide.with(context)
.load(path)//图片地址
.crossFade()
.into(imageView);
//Picasso 加载图片简单用法
Picasso.with(context).load(path).into(imageView)
//用fresco加载图片简单用法,记得要写下面的createImageView方法
Uri uri = Uri.parse((String) path);
imageView.setImageURI(uri);
}
//提供createImageView 方法,如果不用可以不重写这个方法,主要是方便自定义ImageView的创建
@Override
public ImageView createImageView(Context context) {
//使用fresco,需要创建它提供的ImageView,当然你也可以用自己自定义的具有图片加载功能的ImageView
SimpleDraweeView simpleDraweeView=new SimpleDraweeView(context);
return
2.3 在Activity或者Fragment中配置Banner
--------------------------简单使用-------------------------------
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Banner banner = (Banner) findViewById(R.id.banner);
//设置图片加载器
banner.setImageLoader(new GlideImageLoader());
//设置图片集合
banner.setImages(images);
//banner设置方法全部调用完毕时最后调用
banner.start();
//或者链式调用
banner.setImages(MyApplication.images)
.setImageLoader(new GlideImageLoader())
.start();
}
--------------------------详细使用-------------------------------
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Banner banner = (Banner) findViewById(R.id.banner);
//设置banner样式
banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE);
//设置图片加载器
banner.setImageLoader(new GlideImageLoader());
//设置图片集合
banner.setImages(images);
//设置banner动画效果
banner.setBannerAnimation(Transformer.DepthPage);
//设置标题集合(当banner样式有显示title时)
banner.setBannerTitles(titles);
//设置自动轮播,默认为true
banner.isAutoPlay(true);
//设置轮播时间
banner.setDelayTime(1500);
//设置指示器位置(当banner模式中有指示器时)
banner.setIndicatorGravity(BannerConfig.CENTER);
//banner设置方法全部调用完毕时最后调用
banner.start();
}
-----------------当然如果你想偷下懒也可以这么用--------------------
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Banner banner = (Banner) findViewById(R.id.banner);
banner.setImages(images)
.setImageLoader(new GlideImageLoader())
.setBannerAnimation(Transformer.FlipHorizontal)
.start();
2.4 增加体验
//如果你需要考虑更好的体验,可以这么操作
@Override
protected void onStart() {
super.onStart();
//开始轮播
banner.startAutoPlay();
}
@Override
protected void onStop() {
super.onStop();
//结束轮播
3. Banner 各种强大动画
.setBannerAnimation(Transformer.DepthPage);
4. Banner 各种内置样式
六种格式
.setImages(MyApplication.images)
.setBannerTitles(MyApplication.titles)
.setBannerStyle(BannerConfig.NOT_INDICATOR)
.setImageLoader(new GlideImageLoader())
.start();
5. Banner 设置指示器位置
就是小圆点的位置
.setIndicatorGravity(BannerConfig.LEFT);
banner.setIndicatorGravity(BannerConfig.CENTER);
banner.setIndicatorGravity(BannerConfig.RIGHT);
6. Banner 自定义样式
com.youth.banner.Banner
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/banner1"
android:layout_width="match_parent"
android:layout_height="200dp"
app:indicator_drawable_selected="@drawable/selected_radius"
app:indicator_drawable_unselected="@drawable/unselected_radius"
app:indicator_height="8dp"
app:indicator_margin="4dp"
app:indicator_width="8dp" />
<com.youth.banner.Banner
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/banner2"
android:layout_width="match_parent"
android:layout_height="200dp"
app:indicator_drawable_selected="@color/main_color"
app:indicator_drawable_unselected="@android:color/white"
app:indicator_height="4dp"
app:indicator_margin="4dp"
app:indicator_width="20dp" />
<com.youth.banner.Banner
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/banner3"
android:layout_width="match_parent"
android:layout_height="200dp"
app:title_background="#555CB85C"
app:title_textsize="10sp"
app:title_textcolor="@android:color/white"
app:title_height="30dp"/>