Banner 浅析

2019-11-10 18:10:37

字体：大中小

来源：转载

供稿：网友

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. 简单使用

！！！此步骤可以省略，直接在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 simpleDraweeView; }}--------------------------简单使用-------------------------------@OverridePRotected 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();}--------------------------详细使用-------------------------------@Overrideprotected 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();}-----------------当然如果你想偷下懒也可以这么用--------------------@Overrideprotected 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 增加体验

//如果你需要考虑更好的体验，可以这么操作@Overrideprotected void onStart() { super.onStart(); //开始轮播 banner.startAutoPlay();}@Overrideprotected void onStop() { super.onStop(); //结束轮播 banner.stopAutoPlay();} //设置banner动画效果 banner.setBannerAnimation(Transformer.DepthPage);

这里写图片描述

六种格式

//默认是CIRCLE_INDICATOR banner.setImages(MyApplication.images) .setBannerTitles(MyApplication.titles) .setBannerStyle(BannerConfig.NOT_INDICATOR) .setImageLoader(new GlideImageLoader()) .start();

这里写图片描述

就是小圆点的位置

banner.setIndicatorGravity(BannerConfig.LEFT);banner.setIndicatorGravity(BannerConfig.CENTER);banner.setIndicatorGravity(BannerConfig.RIGHT); <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"/>

这里写图片描述