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

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

現在我們開始講解CustomBanner的具體使用，CustomBanner在GitHub的位址是：https://github.com/donkingliang/CustomBanner

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()

//設定訓示器的方向。
//這個方法跟在布局中設定app:indicatorGravity是一樣的。
mBanner.setIndicatorGravity(CustomBanner.IndicatorGravity.CENTER_HORIZONTAL)

//設定輪播圖自動滾動輪播，參數是輪播圖滾動的間隔時間
//輪播圖預設是不自動滾動的，如果不調用這個方法，輪播圖将不會自動滾動。
mBanner.startTurning();

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

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

//設定輪播圖的點選事件
mBanner.setOnPageClickListener(new CustomBanner.OnPageClickListener<String>() {
    @Override
    public void onPageClick(int position, String str) {
     //position 輪播圖的第幾個項
     //str 輪播圖目前項對應的資料
    }
});
           

以上是CustomBanner的主要常用方法，更多方法請檢視源碼。

3）、CustomBanner的很多方法都支援方法連綴，比如以下的方法可以這樣調用。

效果圖

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