您的位置:首页 > 移动开发 > Android开发

Android广告图片轮播控件,支持无限循环和5种主题,可以灵活设置轮播样式、时间、位置、图片加载框架等!

2017-08-23 16:02 921 查看

传送门(最新文档信息请跳转到github查看)

https://github.com/youth5201314/banner

现在的绝大数app都有banner界面,实现循环播放多个广告图片和手动滑动循环等功能。因为ViewPager并不支持循环翻页,

所以要实现循环还得需要自己去动手,我就把项目中的控件剔了出来,希望大家觉得有用。目前框架可以进行不同样式、不同动画设置,

以及完善的api方法能满足大部分的需求了。

效果图

模式图片
指示器模式

效果示例

数字模式

效果示例

数字加标题模式

效果示例

指示器加标题模式

垂直显示


效果示例

指示器加标题模式

水平显示


效果示例

联系方式



效果示例

如果遇到问题和建议欢迎在给我发送邮件或者加入qq群,希望让这个工程越来越完善。

常量

常量名称描述所属方法
BannerConfig.NOT_INDICATOR不显示指示器和标题setBannerStyle
BannerConfig.CIRCLE_INDICATOR显示圆形指示器setBannerStyle
BannerConfig.NUM_INDICATOR显示数字指示器setBannerStyle
BannerConfig.NUM_INDICATOR_TITLE显示数字指示器和标题setBannerStyle
BannerConfig.CIRCLE_INDICATOR_TITLE显示圆形指示器和标题(垂直显示)setBannerStyle
BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE显示圆形指示器和标题(水平显示)setBannerStyle
BannerConfig.LEFT指示器居左setIndicatorGravity
BannerConfig.CENTER指示器居中setIndicatorGravity
BannerConfig.RIGHT指示器居右setIndicatorGravity

动画常量类(setBannerAnimation方法调用)

常量类名
Transformer.Default
Transformer.Accordion
Transformer.BackgroundToForeground
Transformer.ForegroundToBackground
Transformer.CubeIn
Transformer.CubeOut
Transformer.DepthPage
Transformer.FlipHorizontal
Transformer.FlipVertical
Transformer.RotateDown
Transformer.RotateUp
Transformer.ScaleInOut
Transformer.Stack
Transformer.Tablet
Transformer.ZoomIn
Transformer.ZoomOut
Transformer.ZoomOutSlide

方法

方法名描述版本限制
setBannerStyle(int bannerStyle)设置轮播样式(默认为CIRCLE_INDICATOR)
setIndicatorGravity(int type)设置指示器位置(没有标题默认为右边,有标题时默认左边)
isAutoPlay(boolean isAutoPlay)设置是否自动轮播(默认自动)1.3.3结束
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<String> titles)设置轮播要显示的标题和图片对应(如果不传默认不显示标题)1.3.3结束
setBannerTitles(List<String> 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开始
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布局文件中调用)

Attributesformadescribe
delay_timeinteger轮播执行时间,默认2000
is_auto_playboolean是否自动轮播,默认true
title_backgroundcolorreference标题栏的背景色
title_textcolorcolor标题字体颜色
title_textsizedimension标题字体大小
title_heightdimension标题栏高度
indicator_widthdimension指示器圆形按钮的宽度
indicator_heightdimension指示器圆形按钮的高度
indicator_margindimension指示器之间的间距
indicator_drawable_selectedreference指示器选中效果
indicator_drawable_unselectedreference指示器未选中效果
image_scale_typeenum(fit_xy/center_crop)和imageview的ScaleType作用一样

[ 点击查看 ViewPager的PageTransformer用法 ]

使用步骤

Step 1.依赖banner

Gradle

dependencies{
compile 'com.youth.banner:banner:1.4.8'  //最新版本
or
compile 'com.youth.banner:banner:1.3.3' //旧版本,旧版本用法下面有跳转链接
}

或者引用本地lib

compile project(':banner')

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

<!-- if you want to load images from the internet -->
<uses-permission android:name="android.permission.INTERNET" />

<!-- if you want to load images from a file OR from the internet -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

Step 3.在布局文件中添加Banner,可以设置自定义属性

!!!此步骤可以省略,直接在Activity或者Fragment中new Banner();

<com.youth.banner.Banner
xmlns:app="
c810 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) {
/**
常用的图片加载库:
Universal Image Loader:一个强大的图片加载库,包含各种各样的配置,最老牌,使用也最广泛。
Picasso: Square出品,必属精品。和OkHttp搭配起来更配呦!
Volley ImageLoader:Google官方出品,可惜不能加载本地图片~
Fresco:Facebook出的,天生骄傲!不是一般的强大。
Glide:Google推荐的图片加载库,专注于流畅的滚动。
*/

//Glide 加载图片简单用法
Glide.with(context).load(path).into(imageView);

//Picasso 加载图片简单用法
Picasso.with(context).load(path).into(imageView)

//用fresco加载图片简单用法
Uri uri = Uri.parse((String) path);
imageView.setImageURI(uri);
}
//提供createImageView 方法,如果不用可以不重写这个方法,方便fresco自定义ImageView
@Override
public ImageView createImageView(Context context) {
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(Arrays.asList(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();
}

混淆代码

# 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);//这里接收数组和集合都行
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐