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

DonKingLiang發表於2017-05-04
原文網址 : https://juejin.im/post/590b13775c497d00585742bb
Android控制元件

今天給大家講解的是Android輪播圖控制元件CustomBanner的使用。CustomBanner是我在GitHub上傳的一個Android輪播圖控制元件。在上一篇部落格 《Android輪播圖控制元件的實現詳解》中，我詳細分析了CustomBanner的實現思路和核心程式碼，還沒有看過的同學建議先看一下，這樣無論是你想自己實現一個輪播圖控制元件，還是使用CustomBanner都大有好處。

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

1、引入依賴 在Project的build.gradle在新增以下程式碼

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

在Module的build.gradle在新增以下程式碼

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

2、編寫佈局

	<!-- 設定普通指示器 -->
	<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"/> //指示器型別 沒有指示器
複製程式碼

3、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(引數);
複製程式碼

效果圖

演示.gif

CustomBanner的使用就介紹到這裡了，大家在使用中如果發現什麼問題或是有什麼建議，歡迎評論留言。

文章已同步到我的CSDN部落格

相關文章