Android+Kotlin使用Banner实现图片轮播

2021 年 08 月 23 日

3729 次浏览

2012字数

# Banner

banner是一个github上的开源框架，集成了viewpager，可以实现图片的自动轮播

github地址：[New Tab (github.com)](https://github.com/youth5201314/banner)

## 使用步骤

### 1.添加依赖

```groovy
implementation 'com.github.bumptech.glide:glide:3.7.0'
implementation 'io.github.youth5201314:banner:2.2.2'
```

### 2.添加布局

```xml
 <com.youth.banner.Banner
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="100dp"
      android:layout_height="150dp"
      android:id="@+id/banner"
      app:title_textsize="10sp"
      android:layout_alignParentEnd="true"
      android:background="@color/color_main"
      android:layout_above="@+id/linear_home_study"/>
```

### 3.在Activity或Fragment中实现

```kotlin
//图片地址，可以是在线或本地图片
var imageUrls = listOf(
                R.mipmap.lunbo1,
                R.mipmap.lunbo2,
                R.mipmap.lunbo3,
                R.mipmap.lunbo4
        )
//轮播方式中有标题时必须设置标题
        val arrayTitle = arrayListOf<String>("乐学1年卡", "乐学2年卡", "0-N1签约班","0-N2签约班")
        banner.apply {
            //轮播样式
            setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE)
            setImageLoader(MyLoader())
            setImages(imageUrls)
            setBannerAnimation(Transformer.Default)
            setBannerTitles(arrayTitle)
            setDelayTime(6000)
            isAutoPlay(true)
            //指示器位置
            setIndicatorGravity(BannerConfig.RIGHT)
            start()
        }
//图片点击事件
        banner.setOnBannerListener {
            //获取当前点击的图片
            position -> Log.i("shdiefhue",position.toString())
        }
       //自定义的图片加载器
    private inner class MyLoader : ImageLoader() {
        override fun displayImage(context: Context, path: Any, imageView: ImageView) {
            Glide.with(context).load(path).into(imageView)
        }
    }
```

下面是各种轮播样式的解释：

BannerConfig.NOT_INDICATOR 不显示指示器和标题 setBannerStyle 
BannerConfig.CIRCLE_INDICATOR 显示圆形指示器 setBannerStyle 
BannerConfig.NUM_INDICATOR 显示数字指示器 setBannerStyle 
BannerConfig.NUM_INDICATOR_TITLE 显示数字指示器和标题 setBannerStyle 
BannerConfig.CIRCLE_INDICATOR_TITLE 显示圆形指示器和标题（垂直显示） setBannerStyle 
BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE 显示圆形指示器和标题（水平显示） setBannerStyle 
BannerConfig.LEFT 指示器居左 setIndicatorGravity 
BannerConfig.CENTER 指示器居中 setIndicatorGravity 
BannerConfig.RIGHT 指示器居右 setIndicatorGravity

Android+Kotlin使用Banner实现图片轮播