基於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…