Banner轮播图

来源：互联网发布：python分割列表split 编辑：程序博客网时间：2024/06/05 08:35

使用前，需要添加依赖库

//最新版本

compile 'com.youth.banner:banner:1.4.10'

//添加ImageLoader的依赖

compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.5'

相关代码：

public class MainActivity extends AppCompatActivity {

String url = "http://pic39.nipic.com/20140226/18071023_164300608000_2.jpg";
String url1 = "http://a0.att.hudong.com/15/08/300218769736132194086202411_950.jpg";
String url2 = "http://img.my.csdn.net/uploads/201309/01/1378037235_7476.jpg";
String url3 = "http://pic39.nipic.com/20140226/18071023_164300608000_2.jpg";
String url4 = "http://a0.att.hudong.com/15/08/300218769736132194086202411_950.jpg";
String url5 = "http://img.my.csdn.net/uploads/201309/01/1378037235_7476.jpg";
ArrayList<String> urls;
private Banner banner;

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

banner = (Banner) findViewById(R.id.mybanner);

initView();

}

private void initView() {
//把图片url存放到集合中
urls = new ArrayList<String>();
urls.add(url);
urls.add(url1);
urls.add(url2);
urls.add(url3);
urls.add(url4);
urls.add(url5);

banner = (Banner) findViewById(R.id.mybanner);

banner.setImageLoader(new MyBannerLoader());//添加自定义的图片加载器
banner.setImages(urls);//设置图片资源
banner.start();//开始轮播
}
}

<com.youth.banner.Banner
android:layout_width="match_parent"
android:layout_height="300dp"
android:id="@+id/mybanner"></com.youth.banner.Banner>

方法

方法名

描述

版本限制

setBannerStyle(int bannerStyle) 设置轮播样式（默认为CIRCLE_INDICATOR）无

setIndicatorGravity(int type) 设置指示器位置（没有标题默认为右边,有标题时默认左边）无

isAutoPlay(boolean isAutoPlay) 设置是否自动轮播（默认自动）无

setViewPagerIsScroll(boolean isScroll) 设置是否允许手动滑动轮播图（默认true） 1.4.5开始

update(List<?> imageUrls,List titles) 更新图片和标题 1.4.5开始

update(List<?> imageUrls) 更新图片 1.4.5开始

startAutoPlay() 开始轮播 1.4开始，此方法只作用于banner加载完毕-->需要在start()后执行

stopAutoPlay() 结束轮播 1.4开始，此方法只作用于banner加载完毕-->需要在start()后执行

start() 开始进行banner渲染 1.4开始

setOffscreenPageLimit(int limit) 同viewpager的方法作用一样 1.4.2开始

setBannerTitle(String[] titles) 设置轮播要显示的标题和图片对应（如果不传默认不显示标题） 1.3.3结束

setBannerTitleList(List titles) 设置轮播要显示的标题和图片对应（如果不传默认不显示标题） 1.3.3结束

setBannerTitles(List titles) 设置轮播要显示的标题和图片对应（如果不传默认不显示标题） 1.4开始

setDelayTime(int time) 设置轮播图片间隔时间（单位毫秒，默认为2000）无

setImages(Object[]/List<?> imagesUrl) 设置轮播图片(所有设置参数方法都放在此方法之前执行) 1.4后去掉数组传参

setImages(Object[]/List<?> imagesUrl,OnLoadImageListener listener) 设置轮播图片，并且自定义图片加载方式 1.3.3结束

setOnBannerClickListener(this) 设置点击事件，下标是从1开始无（1.4.9以后废弃了）

setOnBannerListener(this) 设置点击事件，下标是从0开始 1.4.9以后

setOnLoadImageListener(this) 设置图片加载事件，可以自定义图片加载方式 1.3.3结束

setImageLoader(Object implements ImageLoader) 设置图片加载器 1.4开始

setOnPageChangeListener(this) 设置viewpager的滑动监听无

setBannerAnimation(Class<? extends PageTransformer> transformer) 设置viewpager的默认动画,传值见动画表无

setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer) 设置viewpager的自定义动画无

Attributes属性（banner布局文件中调用）

Attributes

forma

describe

delay_time integer 轮播间隔时间，默认2000

scroll_time integer 轮播滑动执行时间，默认800

is_auto_play boolean 是否自动轮播，默认true

title_background color reference

title_textcolor color 标题字体颜色

title_textsize dimension 标题字体大小

title_height dimension 标题栏高度

indicator_width dimension 指示器圆形按钮的宽度

indicator_height dimension 指示器圆形按钮的高度

indicator_margin dimension 指示器之间的间距

indicator_drawable_selected reference 指示器选中效果

indicator_drawable_unselected reference 指示器未选中效果

image_scale_type enum 和imageview的ScaleType作用一样

banner_default_image reference 当banner数据为空是显示的默认图片

banner_layout reference 自定义banner布局文件，但是必须保证id的名称一样（你可以将banner的布局文件复制出来进行修改）

[ 点击查看 ViewPager的PageTransformer用法 ]

使用步骤

Step 1.依赖banner

Gradle

dependencies{

compile 'com.youth.banner:banner:1.4.10' //最新版本

}

或者引用本地lib

compile project(':banner')

Step 2.添加权限到你的 AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

Step 3.在布局文件中添加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="高度自己设置" />

Step 4.重写图片加载器

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

}

Step 5.在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();

}

--------------------------详细使用-------------------------------

@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()).start();

}

Step 6.（可选）增加体验

//如果你需要考虑更好的体验，可以这么操作

@Override

protected void onStart() {

super.onStart();

//开始轮播

banner.startAutoPlay();

}

@Override

protected void onStop() {

super.onStop();

//结束轮播

banner.stopAutoPlay();

}

混淆代码

# glide 的混淆代码

-keep public class * implements com.bumptech.glide.module.GlideModule

-keep public enum com.bumptech.glide.load.resource.bitmap.ImageHeaderParser$** {

**[] $VALUES;

public *;

}

# banner 的混淆代码

-keep class com.youth.banner.** {

}

[历史版本资源地址]

[1.3.3以前旧版本使用文档地址]

常见问题

•问：eclipse怎么使用banner？

◦答：在历史版本列表中下载你想要版本的aar包提取最新资源/也可以自己把工程转成eclipse的

eclipse的集成demo群文件里有共享！

•问：怎么显示的一片空白？

◦答：

1、没有添加网络权限

2、检查图片链接是否能打开。

•问：怎么加载其他图片资源（资源文件、文件、Uri、assets、raw、ContentProvider、sd卡资源）？

◦答：列如！如果你使用的是glide，那么可以如下操作，其他图片图片加载框架可能有不同

//资源文件

Integer[] images={R.mipmap.a,R.mipmap.b,R.mipmap.c};

//Uri

Uri uri = resourceIdToUri(context, R.mipmap.ic_launcher);

Uri[] images={uri};

//文件对象

File[] images={"文件对象","文件对象"};

//raw 两种方式

String[] images={"Android.resource://com.frank.glide/raw/raw_1"};

String[] images={"android.resource://com.frank.glide/raw/"+R.raw.raw_1"};

//ContentProvider

String[] images={"content://media/external/images/media/139469"};

//assets

String[] images={"file:///android_asset/f003.gif"};

//sd卡资源

String[] images={"file://"+ Environment.getExternalStorageDirectory().getPath()+"/test.jpg"};

banner.setImages(images);//这里接收集合,上面写成集合太占地方，这个大家举一反三就行了啊

•问：设置banner指示器颜色怎么变成方的了？

◦答：首先我先要说很多软件的指示器也是矩形的，然后banner的指示器可以设置color、资源图片、drawable文件夹自定义xml，所以形状你自己可以根据需求定义哦！

•问：为什么banner的点击事件没有反应，需要下一次轮播才行？

◦答：请将点击事件放在start方法之前执行，详情可以看demo。

Thanks

•ViewPagerTransforms

更新说明

v1.4.10

很久没有维护banner了，有工作原因比较忙，也有经常遇见一些素质低的人，感觉整个世界都欠他们的，特别影响心情。就放弃更新维护了，

但是这半年每天邮箱都会收到各种建议反馈，也有很多人私信我，所以在此修复一些当前版本bug，

关于有朋友要求让轮播类型可以自定义，不局限于imageview的需求，

这个过段时间再发布一个全新的banner版本，会更加灵活，就不在原来的上面弄了，到时候分两个版本走！

•解决轮播手动滑动跳转问题：从第一张-->最后一张-->直接跳转到第二张

•解决update刷新轮播图崩溃问题

•将onPageScrolled和onPageSelected方法返回的position转成真实的position

•增加属性banner_default_image，设置当banner数据为空是显示的默认图片

•增加属性banner_layout，可以自定义布局文件，但是必须保证id的名称一样

阅读全文

0 0