轮播图框架

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

作者 鸡蛋掉了关注

2016.07.27 10:00* 字数 657 阅读 7662评论 30喜欢 58

---

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

https://github.com/youth5201314/banner

现在的绝大数app都有banner界面，实现循环播放多个广告图片和手动滑动循环等功能。因为ViewPager并不支持循环翻页，
所以要实现循环还得需要自己去动手，我就把项目中的控件剔了出来，希望大家觉得有用。目前框架可以进行不同样式、不同动画设置，
以及完善的api方法能满足大部分的需求了。

效果图

模式图片指示器模式

效果示例

数字模式

效果示例

数字加标题模式

效果示例

指示器加标题模式
垂直显示

效果示例

指示器加标题模式
水平显示

效果示例

联系方式

效果示例

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

常量

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

动画常量类（setBannerAnimation方法调用）

常量类名Transformer.DefaultTransformer.AccordionTransformer.BackgroundToForegroundTransformer.ForegroundToBackgroundTransformer.CubeInTransformer.CubeOutTransformer.DepthPageTransformer.FlipHorizontalTransformer.FlipVerticalTransformer.RotateDownTransformer.RotateUpTransformer.ScaleInOutTransformer.StackTransformer.TabletTransformer.ZoomInTransformer.ZoomOutTransformer.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布局文件中调用）

Attributesformadescribedelay_timeinteger轮播执行时间，默认2000is_auto_playboolean是否自动轮播，默认truetitle_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="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

--------------------------简单使用-------------------------------@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();}--------------------------详细使用-------------------------------@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(Arrays.asList(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()).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);//这里接收数组和集合都行

开发分享

© 著作权归作者所有

举报文章

关注鸡蛋掉了

写了 2961 字，被 30 人关注，获得了 95 个喜欢

我的个人博客：https://youth5201314.github.io/

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！

赞赏支持