Android Banner图片轮播

Android Banner图片轮播

效果图

Banner图片轮播

一.为什么要使用Banner图片轮播？

因为现在绝大数app都有banner界面，实现循环播放多个广告图片和手动滑动循环等功能。因为ViewPager并不支持循环翻页， 所以要实现循环还得需要自己去添加。

二.Banner属性

常量

常量名称	描述	所属方法
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)	设置是否自动轮播（默认自动）	无
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 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作用一样

三.接下来就是代码演示了，我这里只运用一种效果

1.依赖Banner

打开bulid.gradle添加依赖包

compile project(':banner')

2.在AndroidManifest.xml清单文件中添加权限

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

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

3.在主布局文件文件中添加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="300dp" />

4.在Activity或者Fragment中设置Banner

详细使用

private Banner banner;
private List mListImage, mListTitle;

@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_INSIDE);
    //设置图片加载器
    banner.setImageLoader(new GlideImageLaoder());
    //实例化图片集合
    mListImage = new ArrayList<>();
    //将图片放入集合中
    mListImage.add("http://img3.imgtn.bdimg.com/it/u=3823223463,3047520970&fm=23&gp=0.jpg");
    mListImage.add("http://img.hc360.com/auto-a/info/images/200803/8998419-10.jpg");
    mListImage.add("http://img.ichemo.cn/model/5188ebc96c74dd.jpg");
    mListImage.add("http://img0.imgtn.bdimg.com/it/u=2631448432,2817427988&fm=214&gp=0.jpg");
    mListImage.add("http://i.ebayimg.com/00/s/MzU1WDcwOQ==/%24%28KGrHqR,%21hYFDuguSMpNBQ8e+seDCQ~~60_1.JPG?set_id=880000500F");
    //设置Banner图片集合
    banner.setImages(mListImage);
    //设置Banner动画效果
    banner.setBannerAnimation(Transformer.DepthPage);
    //实例化Title集合
    mListTitle = new ArrayList<>();
    //将标题放入集合
    mListTitle.add("第一张图片");
    mListTitle.add("第二张图片");
    mListTitle.add("第三张图片");
    mListTitle.add("第四张图片");
    mListTitle.add("第五张图片");
    //设置Banner标题集合（当banner样式有显示title时）
    banner.setBannerTitles(mListTitle);
    //设置轮播时间
    banner.setDelayTime(1000);
    //设置指示器位置（当banner模式中有指示器时）
    banner.setIndicatorGravity(BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE);
    //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.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.setImages(images).setImageLoader(new GlideImageLoader()).start();
}

5.重写图片加载器

public class GlideImageLoader extends ImageLoader {
    @Override
    public void displayImage(Context context, Object path, ImageView imageView) {
        /**
         注意：
         1.图片加载器由自己选择，这里不限制，只是提供几种使用方法
         2.返回的图片路径为Object类型，由于不能确定你到底使用的那种图片加载器，
         传输的到的是什么格式，那么这种就使用Object接收和返回，你只需要强转成你传输的类型就行，
         切记不要胡乱强转！
         */

        //第一种方法：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 null;
    }
}

6.Banner优化（可选）

//如果你需要考虑更好的体验，可以这么操作
@Override
protected void onStart() {
    super.onStart();
    //开始轮播
    banner.startAutoPlay();
}

@Override
protected void onStop() {
    super.onStop();
    //结束轮播
    banner.stopAutoPlay();
}