基于ViewPager实现的无限循环轮播控件

AdPlayBanner是一个Android平台基于ViewPager实现的轮播图插件，主要用以自动或者手动地播放轮播图，提供了Fresco、Picasso、Glide等图片加载方式供用户使用，以及多种图片切换动画，设置轮播时间，设置数据源顺序，提供不一样分页指示器等功能，实现了一键式、灵活式的控件使用方式。下面是效果图：

目前AdPlayBanner已经开源到了Github上面，你们能够在Github上面查看本控件的Demo，或者直接使用。

若是你想了解AdPlayBanner的实现思路，能够移步到《手把手、脑把脑教你实现一个无限循环的轮播控件》，里面已经把实现过程告诉你们，或者能够下载demo来自行理解。

1、使用方法

1.添加依赖

bintray依赖

若是使用bintray依赖，直接在模块目录下的build.gradle文件添加依赖：

dependencies {
	  compile 'com.ryane.banner:banner-lib:0.5'
}
复制代码

jitpack依赖

若是使用jitpack依赖，会须要操做多一步骤。

首先，在项目级别的build.gradle文件添加依赖：

allprojects {
	repositories {
		...
		maven { url 'https://jitpack.io' }
	}
}
复制代码

而后，在模块目录下的build.gradle文件添加依赖：

dependencies {
	  compile 'com.github.ryanlijianchang:AdPlayBanner:v0.5'
}
复制代码

2.在布局文件中添加控件

在布局文件中添加AdPlayBanner控件，根据本身的须要设置高度，注意，控件须要在一个布局（能够是LinearLayout，RelativeLayout，FrameLayout等）以内。

<com.ryane.banner.AdPlayBanner
    android:id="@+id/game_banner"
    android:layout_width="match_parent"
    android:layout_height="200dp" />
复制代码

3.在Activity中绑定控件

mAdPlayBanner = (AdPlayBanner) findViewById(R.id.game_banner);
复制代码

4.添加网络权限

因为加载的是网络图片，因此须要在Manifests文件中添加网络请求权限

<uses-permission android:name="android.permission.INTERNET" />
复制代码

5.初始化Fresco

默认使用Fresco加载图片，因此按照Fresco官方作法，须要在Application建立时初始化Fresco，常规作法以下：

(1) 建立MyApplication类继承Application，而后在onCreate()方法中初始化Fresco：

public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Fresco.initialize(this);
    }
}
复制代码

(2) 在Manifests文件中标签中增长 android:name="你的类名":

<application
    android:name=".MyApplication"
	...>

	...

</application>
复制代码

固然，若是你不使用Fresco加载，以上步骤能够跳过。

6.一键式使用

AdPlayBanner使用了Builder设计模式，因此能够经过一键式写法来直接装载AdPlayBanner，固然也可使用常规写法。在使用以前须要先设置数据源，使用ArrayList来封装数据，而AdPageInfo是一个封装好的Bean类，封装以下：

public class AdPageInfo implements Parcelable {
    public String title;    // 广告标题
    public String picUrl;   // 广告图片url
    public String clickUlr; // 图片点击url
    public int order;       // 顺序
}
复制代码

在设置完数据源mDatas以后，使用Builder模式写法，一句话就可使用AdPlayBanner了。注意，setUp()方法必须在调用完全部API以后，最后调用：

mAdPlayBanner.setInfoList(mDatas).setUp();
复制代码

固然，你也可使用常规写法：

mAdPlayBanner.setInfoList(mDatas);
mAdPlayBanner.setUp();
复制代码

7.关闭AdPlayBanner

在显示AdPlayBanner的页面生命周期到达onDestroy()时，建议调用mAdPlayBanner.stop()方法结束AdPlayBanner，避免内存泄漏。

---

2、功能介绍

1.自定义数据顺序

在调用setUp()方法以前，咱们须要设置数据源，每一页的数据使用AdPageInfo来封装，它里面就有一个int型变量order,咱们经过给每个AdPageInfo赋值order，AdPlayBanner就会自动按照order的大小来排序，如：

咱们封装了三个数据到ArrayList里面，按顺序是图片1->图片2->图片3

List<AdPageInfo> mDatas = new ArrayList<>();
AdPageInfo info1 = new AdPageInfo("图片1", "http://osjnd854m.bkt.clouddn.com/pic1_meitu_1.jpg", "连接1", 3);
AdPageInfo info2 = new AdPageInfo("图片2", "http://osjnd854m.bkt.clouddn.com/pic1_meitu_2.jpg", "连接2", 2);
AdPageInfo info3 = new AdPageInfo("图片3", "http://osjnd854m.bkt.clouddn.com/pic1_meitu_3.jpg", "连接3", 1);
mDatas.add(info1);
mDatas.add(info2);
mDatas.add(info3);
复制代码

装载以后运行，可见轮播顺序是按照order的顺序来播放：

2.无限循环轮播

不少轮播插件没有实现无限循环轮播这个功能, 而在AdPlayBanner上获得了实现，以下图可见，当咱们无限循环滑动时，插件仍能正常运行：

3.支持三种图片加载方式

目前比较主流的Fresco、Picasso、Glide三种图片加载方式在AdPlayBanner中都支持，至于三者的区别我就不赘述了，默认是使用Fresco方式加载，具体调用方法setImageLoadType(ImageLoaderType type)，只须要将传入数据设置为：FRESCO、GLIDE、PICASSO其中一种便可，一样，也是能够经过代码一键式使用，例如使用Glide方式加载（其余加载方式使用相似），使用方法以下：

mAdPlayBanner
        .setInfoList((ArrayList<AdPageInfo>) mDatas)
        .setImageLoadType(Glide)	// 设置Glide类型的图片加载方式
        .setUp();
复制代码

4.支持多种ScaleType

在AdPlayBanner中，能够根据用户须要设置图片的ScaleType，具体效果和ImageView的ScaleType一致，默认是使用FIT_XY，可是在AdPlayBanner中比ImageView少了一种MATRIX类型，在AdPlayBanner中具体支持的ScaleType有以下：FIT_XY、FIT_START、FIT_CENTER、FIT_END、CENTER、CENTER_CROP、CENTER_INSIDE其中，具体调用方法setImageViewScaleType(ScaleType scaleType)，只须要将具体的ScaleType传入便可，一样，也是能够经过代码一键式使用，例如设置ScaleType为FIT_START（其余相似），使用方法以下：

mAdPlayBanner
        .setInfoList((ArrayList<AdPageInfo>) mDatas)
        .setImageViewScaleType(FIT_START)	// 设置FIT_START类型的ScaleType
        .setUp();
复制代码

5.支持不一样页码指示器

在AdPlayBanner中，提供了数字型、点型和空型页码指示器，用户能够经过调用setIndicatorType(IndicatorType type)，传入NONE_INDICATOR，NUMBER_INDICATOR，POINT_INDICATOR其中一种，便可显示对应的页码指示器，三种页码指示器对应效果以下：

(1) NONE_INDICATOR：空型页码指示器

(2) NUMBER_INDICATOR：数字页码指示器

(3) POINT_INDICATOR：点型页码指示器

使用方法也是很是简单，如我须要使用数字型页码指示器，使用方法以下：

mAdPlayBanner
        .setInfoList((ArrayList<AdPageInfo>) mDatas)
        .setIndicatorType(NUMBER_INDICATOR)		//使用数字页码指示器
        .setUp();
复制代码

此外，你也能够调用setNumberViewColor(int normalColor, int selectedColor, int numberColor)来修改数字型页码指示器的样式，normalColor为数字没选中时的背景颜色，selectedColor为数字选中时的背景颜色，numberColor为数字的字体颜色，例如我经过调用这个方法，把三个颜色都改变掉（注意：传入int型颜色必须ARGB8888的颜色类型，或者经过资源文件定义颜色再获取才有效），使用方法以下：

mAdPlayBanner
        .setInfoList((ArrayList<AdPageInfo>) mDatas)
        .setIndicatorType(NUMBER_INDICATOR)     //使用数字页码指示器
        .setNumberViewColor(0xff00ffff, 0xffff3333, 0xff0000ff)
        .setUp();
复制代码

获得以下效果：

6.添加灵活性标题

在AdPlayBanner中，只须要调用addTitleView(TitleView mTitleView)，就能够插入标题了，而且该标题的灵活性很强，能够根据用户须要修改标题的背景、位置、字体大小、padding、magin等，先上一个提供的默认效果：

因为是使用了默认的效果，因此用法也是很是简单：

mAdPlayBanner
        .setInfoList((ArrayList<AdPageInfo>) mDatas)
        .setIndicatorType(POINT_INDICATOR)     //使用数字页码指示器
        .addTitleView(TitleView.getDefaultTitleView(getApplicationContext()))  // 使用默认标题
        .setUp();
复制代码

咱们能够看到咱们经过调用addTitleView(TitleView mTitleView)，传入一个TitleView便可以生成标题，而上面是调用了AdPlayBanner提供的一个默认标题，固然，咱们也说了这个标题的灵活性很强，就是咱们能够设置TitleView的属性，咱们来看一下TitleView提供了哪些API：

• TitleView setTitleColor(int color)：设置标题字体颜色，传入color必须ARGB8888的颜色类型，或者经过资源文件定义颜色再获取才有效。
• setPosition(Gravity gravity)：设置标题在AdPlayBanner中的位置，有PARENT_TOP,PARENT_BOTTOM,PARENT_CENTER三个取值，分别位于父布局顶部，父布局底部，父布局中间。
• setViewBackground(int color)：设置标题的背景颜色，传入int型颜色必须ARGB8888的颜色类型，或者经过资源文件定义颜色再获取才有效。
• TitleView setTitleSize(int size)：设置标题的字体大小，单位是sp。
• setTitleMargin(int left, int top, int right, int bottom)：设置标题的四个方向margin值，单位是dp。
• setTitlePadding(int left, int top, int right, int bottom)：设置标题的四个方向padding值，单位是dp。

一样，TitleView也是支持Builder模式的写法，例如我自定义一个TitleVIew并加到AdPlayBanner中，使用方法以下：

mAdPlayBanner
        .setInfoList((ArrayList<AdPageInfo>) mDatas)
        .setIndicatorType(POINT_INDICATOR)     // 使用数字页码指示器
        .addTitleView(new TitleView(getApplicationContext())    // 建立新的TitleView
                            .setPosition(PARENT_TOP)
                            .setTitleColor(0xffffffff)          // 设置字体颜色
                            .setViewBackground(0x9944ff18)      // 设置标题背景颜色
                            .setTitleSize(18)                   // 设置字体大小
                            .setTitleMargin(0,0,2,0)           // 设置margin值
                            .setTitlePadding(2,2,2,2))          // 设置padding值
        .setUp();
复制代码

效果以下：

7.支持多样式切换动画

因为AdPlayBanner是基于ViewPager实现的，因此AdPlayBanner和ViewPager同样，一样支持自定义的切换动画，只须要经过调用setPageTransformer(ViewPager.PageTransformer transformer)方法，传入一个PageTransformer，便可改变它的切换样式，AdPlayBanner中提供了三种现成的切换方式：

• FadeInFadeOutTransformer：淡入淡出效果

• RotateDownTransformer：旋转效果

• ZoomOutPageTransformer： 空间切换效果

使用起来也是很是简单，例如使用ZoomOutPageTransformer切换效果：

mAdPlayBanner
        .setInfoList((ArrayList<AdPageInfo>) mDatas)
        .setIndicatorType(POINT_INDICATOR)     // 使用数字页码指示器
        .setBannerBackground(0xff000000)       // 设置背景颜色
        .setPageTransformer(new ZoomOutPageTransformer())   // 设置切换效果
        .setUp();
复制代码

固然，你也能够自定义一个transformer实现ViewPager.PageTransformer接口，并重写transformPage(View view, float position)方法便可实现自定义的切换效果。

8.设置是否自动轮播

经过调用setAutoPlay(boolean autoPlay),传入boolean值控制是否自动播放的开关，传入true为自动，传入false为手动。

9.设置是否能够手动滑动

经过调用setCanScroll(boolean canScroll),传入boolean值控制是否能够手动滑动，传入true为能够，传入false为不能够。

10.设置自动滑动间隔时间

经过调用setInterval(int interval)，传入int型的时间（单位ms），便可改变AdPlayBanner自动轮播时的切换时间。

11.设置点击事件监听器

AdPlayBanner支持点击事件监听，经过调用setOnPageClickListener(OnPageClickListener l)，传入OnPageClickListener，便可完成AdPlayBanner的点击监听，使用方法很是简单：

mAdPlayBanner
    .setInfoList((ArrayList<AdPageInfo>) mDatas)
    .setIndicatorType(POINT_INDICATOR)     // 使用数字页码指示器
    .setOnPageClickListener(new AdPlayBanner.OnPageClickListener() {
        @Override
        public void onPageClick(AdPageInfo info, int postion) {
            // 点击操做
        }
    })
    .setUp();
复制代码

12.关闭AdPlayBanner

在离开显示AdPlayBanner的页面时，建议调用stop()方法，避免内存泄漏。

@Override
protected void onDestroy() {
    if (mAdPlayBanner != null) {
        // 结束时须要调用stop释放资源
        mAdPlayBanner.stop();
    }
    super.onDestroy();
}
复制代码

3、API

AdPlayBanner：实现轮播效果的控件

AdPlayBanner	解释	备注
addTitleView(TitleView mTitleView)	添加一个TitleView	能够经过TitleView.getDefaultTitleView(Context context)来使用默认的TitleView或者经过new Title()的方式传入
setBannerBackground(int color)	设置AdPlayBanner的背景颜色	传入color必须ARGB8888的颜色类型，或者经过资源文件定义颜色再获取才有效
setIndicatorType(IndicatorType type)	设置页码指示器类型	传入NONE_INDICATOR，NUMBER_INDICATOR，POINT_INDICATOR其中一种
setInterval(int interval)	设置自动轮播时的切换时间	单位ms
setImageLoadType(ImageLoaderType type)	设置图片加载方式	传入FRESCO、GLIDE、PICASSO其中一种
setPageTransformer(ViewPager.PageTransformer transformer)	设置切换动画，若是不设置动画，设置为null	提供了FadeInFadeOutTransformer，RotateDownTransformer，ZoomOutPageTransformer三种，也能够传入自定义的TransFormer
setNumberViewColor(int normalColor, int selectedColor, int numberColor)	设置数字页码的颜色	normalColor 数字正常背景颜色，selectedColor 数字选中背景颜色，numberColor 数字字体颜色
setOnPageClickListener(OnPageClickListener l)	设置事件点击监听器	传入一个OnPageClickListener
setImageViewScaleType(ScaleType scaleType)	设置图片的ScaleType	传入FIT_XY、FIT_START、FIT_CENTER、FIT_END、CENTER、CENTER_CROP、CENTER_INSIDE其中一种
setAutoPlay(boolean autoPlay)	设置是否自动播放	默认为true 自动播放，传入false为手动
setCanScroll(boolean canScroll)	设置是否能够手动滑动	默认为true能够，传入false为不能够
setInfoList(ArrayList pageInfos)	设置Banner的数据源	传入必须为AdPageInfo类型的ArrayList
setUp()	装载AdPlayBanner	必须在以上全部方法调用完以后才能调用
stop()	结束AdPlayBanner	在离开显示AdPlayBanner页面时调用，避免内存泄漏

TitleView ： 标题控件

TitleView	解释	备注
getDefaultTitleView(Context context)	获取一个默认的TitleView	传入一个Context
setTitleSize(int size)	设置字体大小	单位sp
setTitleColor(int color)	设置字体颜色	传入color必须ARGB8888的颜色类型，或者经过资源文件定义颜色再获取才有效
setViewBackground(int color)	设置标题背景	传入color必须ARGB8888的颜色类型，或者经过资源文件定义颜色再获取才有效
setPosition(Gravity gravity)	设置标题在Banner的位置	只能PARENT_TOP,PARENT_BOTTOM,PARENT_CENTER其中一个值
setTitleMargin(int left, int top, int right, int bottom)	设置标题的margin值	单位dp
setTitlePadding(int left, int top, int right, int bottom)	设置标题的padding值	单位dp

AdPageInfo：AdPlayView指定的数据源

AdPageInfo	解释	备注
AdPageInfo(String title, String picUrl, String clickUlr, int order)	构造方法
void setTitle(String title)	设置标题
String getTitle()	获取标题
void setPicUrl(String picUrl)	设置图片源地址
String getPicUrl()	获取图片连接
void setClickUlr(String clickUlr)	设置点击事件地址
String getClickUlr()	获取点击事件连接
void setOrder(int order)	设置排序的优先级	设置了order，AdPlayBanner会根据order的大小由小到大排序
int getOrder()	获取排序优先级

4、版本特性

V0.5

1. 增长setCanScroll(boolean canScroll)接口控制是否能够手动滑动。

V0.4

1. FIX BUG 屡次刷新时数据源为空时形成的崩溃。
2. 代码、布局、性能优化。
3. gradle升级。
4. Fresco升级至V1.8(支持GIF、WebP)；Picasso版本升级至V2.5.2；Glide是V4.0.0。

V0.3

1. 修复了静态变量形成的内存泄漏问题;
2. 提供手动结束Banner播放的接口;

V0.2

1. 支持定义数据顺序；
2. 无限循环轮播；
3. 支持Fresco、Glide、Picasso三种图片加载方式；
4. 支持多种ScaleType；
5. 支持点型、数字型、空型页码指示器；支持修改数字型页码器的样式；
6. 支持灵活性标题；支持修改标题的位置、字体大小、颜色、边距值等属性；
7. 支持多样式切换动画；
8. 支持设置自动轮播开关；
9. 自定义自动滑动间隔时间；
10. 提供点击事件监听器；
11. 支持修改AdPlayBanner的背景颜色；

v0.1

1. 基本框架搭建完成；

5、 Demo

若是你们在使用在仍然有问题，能够经过下载Demo来学习，固然，你们更能够经过查看源代码来学习如何自定义一个轮播控件。

6、后记

AdPlayBanner做为做者的第一个开源控件，做者也是很是用心认真地完成，这个过程也学习到不少东西，可能其中会遇到不少错误，因此但愿你们能够多多包涵，而后把错误提到Issues里面，做者会在看到的第一时间进行修正。在后面的时间里，做者也会将更多的特性加到这个控件里面，因此但愿你们能够加个star，以做为对做者的小小鼓励。 固然，若是你想第一时间联系到做者，不妨尝试如下联系方式：

• Email：liji.anchang@163.com
• CSDN：blog.csdn.net/ljcitworld
• Github：github.com/ryanlijianc…