Kotlin-使用BGABanner实现获取服务器数据的轮播图

这两天在学习BGABanner和Retrofit2,刚好想到有一个很实用的功能

获取服务器数据的轮播图，于是便写了一个Demo

效果图

1.在gradle中引入

//bga-banner
    implementation 'cn.bingoogolapple:bga-banner:2.2.5@aar'
    implementation 'com.android.support:support-v4:27.1.1'
//Retrofit相关
    implementation(['com.squareup.okhttp3:logging-interceptor:3.9.0',//用于查看http请求时的log
                    'com.squareup.retrofit2:retrofit:2.3.0',
                    'com.squareup.retrofit2:adapter-rxjava2:2.3.0',
                    'com.squareup.retrofit2:converter-gson:2.3.0'])
    //RxJava相关
    implementation(['io.reactivex.rxjava2:rxandroid:2.0.1',
                    'io.reactivex.rxjava2:rxjava:2.1.3'])
    //Glide
    implementation 'com.github.bumptech.glide:glide:4.7.1'

2.在布局文件中添加 BGABanner

<cn.bingoogolapple.bgabanner.BGABanner
    android:id="@+id/numBanner"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    app:banner_pageChangeDuration="1000"
    app:banner_pointAutoPlayInterval="3000"
    app:banner_pointAutoPlayAble="true"
    app:banner_transitionEffect="defaultEffect"
    app:banner_indicatorGravity="bottom|right"
    app:banner_placeholderDrawable="@drawable/main_bagbanner_holder"

    app:banner_isNumberIndicator="true"
    app:banner_numberIndicatorBackground="@drawable/shape_number_indicator_background"
    app:banner_numberIndicatorTextColor="@android:color/white"
    app:banner_numberIndicatorTextSize="10sp"
    app:banner_isNeedShowIndicatorOnOnlyOnePage="true"/>

3.请求网络数据

interface Engine {

    @GET("{itemCount}item.json")
    fun fetchItemsWithItemCount(@Path("itemCount") itemCount: Int): Call<BannerModel>
}

data class BannerModel(
        var imgs: List<String>,
        var tips: List<String>
)

class ApiClient private constructor() {
    lateinit var service: Engine
    private object Holder {
        val INSTANCE = ApiClient()
    }
    companion object {
        val instance by lazy { Holder.INSTANCE }
    }
    fun init() {//在Application的onCreate中调用一次即可
        val okHttpClient = OkHttpClient().newBuilder()
                //输入http连接时的log，也可添加更多的Interceptor
                .addInterceptor(HttpLoggingInterceptor().setLevel(
                        if (BuildConfig.DEBUG) HttpLoggingInterceptor.Level.BODY
                        else HttpLoggingInterceptor.Level.NONE
                )).build()
        //链式调用 retrofit
        val retrofit = Retrofit.Builder()
                .baseUrl("http://bgashare.bingoogolapple.cn/banner/api/")
                .addConverterFactory(GsonConverterFactory.create())
                .addCallAdapterFactory(RxJava2CallAdapterFactory.create())
                .client(okHttpClient)
                .build()
        service = retrofit.create(Engine::class.java)
    }
}

在App中调用

class App : Application(){
   override fun onCreate() {
       super.onCreate()
       ApiClient.instance.init()
   }
}

AndroidManifest.xml中声明

android:name=".application.App"

4.配置 BGABanner 的数据源

第一种方式配置数据源

通过传入图片资源 id 的方式配置数据源，主要用于引导页每一页都是只显示图片的情况

//BGABanner绑定id
var poitBanner = findViewById<BGABanner>(R.id.poitBanner)
numBanner=findViewById<BGABanner>(R.id.numBanner)

// Bitmap 的宽高在 maxWidth maxHeight 和 minWidth minHeight 之间
var localImageSize: BGALocalImageSize = BGALocalImageSize(720, 1280, 320F, 640F)

//配置poitBanner数据源
//通过传入图片资源 id 的方式配置数据源，主要用于引导页每一页都是只显示图片的情况
poitBanner.setData(localImageSize, ImageView.ScaleType.CENTER_CROP, R.drawable.uoko_guide_background_1,
        R.drawable.uoko_guide_background_2, R.drawable.uoko_guide_background_3)
//轮播图点击事件
poitBanner?.setDelegate { banner, itemView, model, position ->
    Toast.makeText(banner.context, "点击了第" + (position + 1) + "页", Toast.LENGTH_SHORT).show()
}

第二种方式配置数据源

通过传入数据模型并结合 Adapter 的方式配置数据源。这种方式主要用于加载网络图片

//配置numBanner数据源
//  通过传入数据模型并结合 Adapter 的方式配置数据源。这种方式主要用于加载网络图片
override fun fillBannerItem(banner: BGABanner?, itemView: ImageView, model: String?, position: Int) {
    Glide.with(this)
            .load(model)
            .apply(RequestOptions().placeholder(R.drawable.uoko_guide_background_3).error(R.drawable.uoko_guide_background_3).dontAnimate().centerCrop())
            .into(itemView)
}

override fun onBannerItemClick(banner: BGABanner?, itemView: ImageView?, model: String?, position: Int) {
    Toast.makeText(this, "点击了第" + (position + 1) + "页", Toast.LENGTH_SHORT).show()
}

//配置适配器和点击监听事件
numBanner?.setAdapter(this)
numBanner?.setDelegate(this)
//网络请求
ApiClient.instance.service?.fetchItemsWithItemCount(5)?.enqueue(object : Callback<BannerModel> {
    override fun onFailure(call: Call<BannerModel>?, t: Throwable?) {

    }
    override fun onResponse(call: Call<BannerModel>?, response: Response<BannerModel>?) {
          mbannerModel= response?.body()
        //配置numBanner数据源
        // 通过传入数据模型并结合 Adapter 的方式配置数据源。这种方式主要用于加载网络图片
        numBanner?.setData(mbannerModel?.imgs, mbannerModel?.tips)
    }
})

自定义属性说明：

https://github.com/bingoogolapple/BGABanner-Android

Demo地址：

https://github.com/qingyinz/BGAbannerDemo