Android輪播圖控件CustomBanner的使用講解

今天給你們講解的是Android輪播圖控件CustomBanner的使用。CustomBanner是我在GitHub上傳的一個Android輪播圖控件。在上一篇博客 《Android輪播圖控件的實現詳解》中，我詳細分析了CustomBanner的實現思路和核心代碼，尚未看過的同窗建議先看一下，這樣不管是你想本身實現一個輪播圖控件，仍是使用CustomBanner都大有好處。

如今咱們開始講解CustomBanner的具體使用，CustomBanner在GitHub的地址是：github.com/donkinglian…

一、引入依賴 在Project的build.gradle在添加如下代碼

allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}
複製代碼

在Module的build.gradle在添加如下代碼

dependencies {
	        compile 'com.github.donkingliang:CustomBanner:1.1.0'
	}
複製代碼

二、編寫佈局

<!-- 設置普通指示器 -->
	<com.donkingliang.banner.CustomBanner xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="180dp" app:indicatorStyle="ORDINARY" //指示器類型 普通指示器 app:indicatorGravity="CENTER_HORIZONTAL" //指示器的位置 有左。中、右三個值 app:indicatorSelectRes="@drawable/shape_point_select" //指示器的選中的樣式 app:indicatorUnSelectRes="@drawable/shape_point_unselect" //指示器的未選中的樣式 app:indicatorInterval="5dp"/> //指示器的點的間隔


	<!-- 設置數字指示器 -->
	<com.donkingliang.banner.CustomBanner xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="180dp" app:indicatorStyle="NUMBER" //指示器類型 數字指示器 app:indicatorGravity="RIGHT"/> //指示器的位置 有左。中、右三個值


	<!-- 設置沒有指示器 -->
	<com.donkingliang.banner.CustomBanner xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="180dp" app:indicatorStyle="NONE"/> //指示器類型 沒有指示器
複製代碼

三、CustomBanner的方法使用 1）、設置數據

mBanner.setPages(new CustomBanner.ViewCreator<String>() {
    @Override
    public View createView(Context context, int position) {
        //這裏返回的是輪播圖的項的佈局 支持任何的佈局
        //position 輪播圖的第幾個項
        ImageView imageView = new ImageView(context);
        return imageView;
    }

    @Override
    public void updateUI(Context context, View view, int position, String data) {
     //在這裏更新輪播圖的UI
     //position 輪播圖的第幾個項
     //view 輪播圖當前項的佈局 它是createView方法的返回值
     //data 輪播圖當前項對應的數據
    Glide.with(context).load(data).into((ImageView) view);
    }
}, beans);
複製代碼

輪播圖的佈局支持任何的佈局，輪播圖的數據類型也是支持任何的數據類型，這裏只是用ImageView和String舉例而已。

2）、其餘方法的使用

//設置指示器類型，有普通指示器(ORDINARY)、數字指示器(NUMBER)和沒有指示器(NONE)三種類型。
//這個方法跟在佈局中設置app:indicatorStyle是同樣的
mBanner.setIndicatorStyle(CustomBanner.IndicatorStyle.ORDINARY);

//設置兩個點圖片做爲翻頁指示器，只有指示器爲普通指示器(ORDINARY)時有用。
//這個方法跟在佈局中設置app:indicatorSelectRes、app:indicatorUnSelectRes是同樣的。
//第一個參數是指示器的選中的樣式，第二個參數是指示器的未選中的樣式。
mBanner.setIndicatorRes(R.drawable.shape_point_select,R.drawable.shape_point_unselect)；
      
//設置指示器的指示點間隔，只有指示器爲普通指示器(ORDINARY)時有用。
//這個方法跟在佈局中設置app:indicatorInterval是同樣的。
mBanner.setIndicatorInterval(20)

//設置指示器的方向。
//這個方法跟在佈局中設置app:indicatorGravity是同樣的。
mBanner.setIndicatorGravity(CustomBanner.IndicatorGravity.CENTER_HORIZONTAL)

//設置輪播圖自動滾動輪播，參數是輪播圖滾動的間隔時間
//輪播圖默認是不自動滾動的，若是不調用這個方法，輪播圖將不會自動滾動。
mBanner.startTurning(3600);

//中止輪播圖的自動滾動
mBanner.stopTurning();

//設置輪播圖的滾動速度
mBanner.setScrollDuration(500);

//設置輪播圖的點擊事件
mBanner.setOnPageClickListener(new CustomBanner.OnPageClickListener<String>() {
    @Override
    public void onPageClick(int position, String str) {
     //position 輪播圖的第幾個項
     //str 輪播圖當前項對應的數據
    }
});
複製代碼

以上是CustomBanner的主要經常使用方法，更多方法請查看源碼。

3）、CustomBanner的不少方法都支持方法的鏈式調用，好比如下的方法能夠這樣調用。

mBanner.setPages(參數, 參數).setIndicatorRes(參數, 參數).setIndicatorGravity(參數).startTurning(參數);
複製代碼

效果圖

CustomBanner的使用就介紹到這裏了，你們在使用中若是發現什麼問題或是有什麼建議，歡迎評論留言。

文章已同步到個人CSDN博客