打造 Compose 版本的 Banner-有解無憂

沒有 ViewPager ？

前段時間 Compose 出來 beta 版本的時候就想著寫寫玩一玩，把自己寫的玩安卓重構成 Compose 版本的，于是就寫了幾篇文章：

初探 Compose 版本的玩安卓
再探 Compose 版本的玩安卓
Compose 實作下拉重繪和上拉加載
Compose Android 開發終極挑戰賽: 天氣應用

如果想學習 Compose 的話，可以去看看，里面有詳細的代碼供你參考：Github 地址：github.com/zhujiang521…，別忘了是 main 分支，

大家想看可以先看看前幾篇文章，雖然對這篇文章沒有直接的關聯，但畢竟會有好處的，

這篇說什么大家看題目應該就知道了，就是 Banner ，之前寫安卓的時候這都不是事，不管是自己使用 ViewPager 實作又或者是直接使用三方庫，都不是什么難事；特別是使用三方庫，添加一行依賴基本就沒啥事了，但，，，現在使用 Compose 該怎么搞？

本來想著 Compose 中怎么著也應該有類似于 ViewPager 的東西，但找遍了愣是沒找見，什么情況？沒有？那怎么搞？自己定義？

柳暗花明！

正當一籌莫展的時候，又想起來再看看 Google 官方給的 Demo 吧，沒準能獲得一些有用的資訊呢！

果然！在官方 Jetcaster 這個 Demo 中竟然自定義有類似 ViewPager 的控制元件：Pager ，別的不說，先來貼下地址：

https://github.com/android/compose-samples/tree/1630f6b35ac9e25fb3cd3a64208d7c9afaaaedc5/Jetcaster

上面是 Jetcaster 專案的地址，下面再貼下 Pager 的地址吧，免得大家還得找：

https://github.com/android/compose-samples/blob/1630f6b35ac9e25fb3cd3a64208d7c9afaaaedc5/Jetcaster/app/src/main/java/com/example/jetcaster/util/Pager.kt#L130

創建公共庫

上面既然已經貼了官方的代碼了，本著有現成就不重復制造輪子的原則，就不自定義 ViewPager 了（主要是懶），直接把官方的拿過來借鑒下，然后再自己簡單實作和封裝了下，下面是成果樣式，大家湊合看：

banner1

還不錯吧，哈哈哈！來看看使用這個 Banner 需要怎么做吧：

第一步肯定需要添加依賴了：

首先需要在你專案根目錄下的 build.gradle 檔案中添加以下內容：

	allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

然后需要在你的 module 中的 build.gradle 檔案中添加依賴：

	dependencies {
	        implementation 'com.github.zhujiang521:Banner:1.3.3'
	}

接下來需要先定義下 Banner 的 Model ：

data class BannerBean(
    override val data: Any? = null
) : BaseBannerBean()

Model 很簡單，只有一個引數，繼承自 BaseBannerBean ，可能有人就說了，BaseBannerBean 是個啥玩意？別著急，后面會說的，現在先這樣用！

val items = arrayListOf(
            BannerBean(
                "https://wanandroid.com/blogimgs/8a0131ac-05b7-4b6c-a8d0-f438678834ba.png",
            ),
            BannerBean(
                "https://www.wanandroid.com/blogimgs/62c1bd68-b5f3-4a3c-a649-7ca8c7dfabe6.png",
            ),
            BannerBean(
                "https://www.wanandroid.com/blogimgs/50c115c2-cf6c-4802-aa7b-a4334de444cd.png",
            ),
            BannerBean(
                "https://www.wanandroid.com/blogimgs/90c6cc12-742e-4c9f-b318-b912f163b8d0.png",
            ),
        )

BannerPager(
    items = items
) { item ->
    Toast.makeText(context, "item:$item", Toast.LENGTH_SHORT).show()
    Log.e(TAG, "Notes: 哈哈哈:$item")
}

怎么樣，是不是 so easy ？只需要傳入定義好的 items ，沒錯，只需要傳入你的資料集合就可以了，函式物件中的引數是回呼回來的資料，直接做你想做的事就可以了！是不是心動了？？？上面圖中的 indicator 顏色也太丑了，直男審美，大家別介意！哈哈哈，放心吧，如果想換顏色什么的都可以直接換！快來詳細看看還有什么功能吧！

@Composable
fun <T : BaseBannerBean> BannerPager(
    items: List<T> = arrayListOf(),
    repeat: Boolean = true,
    config: BannerConfig = BannerConfig(),
    indicator: Indicator = CircleIndicator(),
    onBannerClick: (T) -> Unit
)

來一個一個引數看看啥意思吧：

items：資料源，可以看到資料源使用到了泛型，這里為什么使用泛型下面再說，這里只要知道必須是繼承自 BaseBannerBean 就可以了
repeat：是否允許自動輪播
config：Banner 的一些配置引數
indicator：Banner 指示器，你可以使用默認的 CircleIndicator 或 NumberIndicator ，也可以自定義，僅需要繼承 Indicator 即可，
onBannerClick：Banner 的點擊事件，會回呼回一個泛型引數供大家使用

通過上面的這些引數可以修改很多你想要的樣式！

圖片動起來

這里我選擇使用 Timer 來實作讓圖片動起來！來看看代碼吧：

val timer = Timer()
val mTimerTask: TimerTask = object : TimerTask() {
    override fun run() {
        viewModelScope.launch {
            if (pagerState.currentPage == pagerState.maxPage) {
                pagerState.currentPage = 0
            } else {
                pagerState.currentPage++
            }
            pagerState.fling(-1f)
        }
    }
}

timer?.schedule(mTimerTask, 5000, 3000)

就是當當前頁碼和最大頁碼相同的時候手動置為 0 就可以了，嗯，就這！是不是太簡單了，哈哈哈，別想太多，其實就這么簡單，然后通過 pagerState 中的 fling 方法讓圖片動起來！ pagerState 是什么在下面會有介紹的，

BaseBannerBean

本來想一塊一塊給大家說的，但想了想還是直接根據寫好的一步步深入比較好理解，

咱們先來看看 items ，可以看到它繼承自 BaseBannerBean ，那這個 BaseBannerBean 又是個什么東西呢？它不是個東西，它只是為了抽象，為了能統一對圖片做處理，廢話不多說，直接看代碼：

/**
 * Banner Model 的基類
 */
abstract class BaseBannerBean {
    // 圖片資源 可以是：url、檔案路徑或者是 drawable id
    abstract val data: Any?
}

對，沒了，就這么點內容！只有一個 data ，有什么用注釋也寫了，就是圖片資源，為了方便統一做處理所以才抽出來的！

最開始的時候這塊我其實寫了三個變數：一個 url ，一個檔案路徑，一個 drawable id ，然后再判斷哪個不為空進行處理，但是后來想了想弄成一個就可以了啊，一個圖片而已嘛！

下面來一步一步看看怎么使用吧：

Pager(
    state = pagerState,
    modifier = Modifier.fillMaxWidth().height(config.bannerHeight)
) {
    val item = items[page]
    BannerCard(
        bean = item,
        modifier = Modifier.fillMaxSize().padding(config.bannerImagePadding),
        shape = config.shape
    ) {
        Log.d(TAG, "item is :${item.javaClass}")
        onBannerClick(item)
    }
}

上面代碼中的 Pager 就是上面提到的官方的 Compose 版本的 ViewPager ，使用很簡單，但是需要傳入一個 pagerState ，這個 pagerState 里面保存著最大頁碼、最小頁碼和當前頁碼，隨時更新狀態，創建方法很簡單：

val pagerState: PagerState = remember { PagerState() }

然后把 pagerState 直接像上面那樣穿進去就行，

BannerCard

跑題了跑題了，這一小塊說的是圖片，，，，繼續看，上面代碼中的 BannerCard 就是顯示圖片的控制元件，來看看怎么寫的吧：

/**
 * Banner 圖片展示卡片
 *
 * @param bean banner Model
 * @param modifier
 */
@Composable
fun <T : BaseBannerBean> BannerCard(
    bean: T,
    modifier: Modifier = Modifier,
    shape: Shape = RoundedCornerShape(10.dp),
    onBannerClick: () -> Unit,
) {
    if (bean.data == null) {
        throw NullPointerException("Url or imgRes or filePath must have a not for empty.")
    }

    Card(
        shape = shape,
        modifier = modifier
    ) {
        val imgModifier = Modifier.clickable(onClick = onBannerClick)
        when (bean.data) {
            is String -> {
                val img = bean.data as String
                if (img.contains("https://") || img.contains("http://")) {
                    Log.d(TAG, "PostCardPopular: 加載網路圖片")
                    CoilImage(
                        data = img,
                        contentDescription = null,
                        modifier = imgModifier
                    )
                } else {
                    Log.d(TAG, "PostCardPopular: 加載本地圖片")
                    val bitmap = BitmapFactory.decodeFile(img)
                    Image(
                        modifier = imgModifier,
                        painter = BitmapPainter(bitmap.asImageBitmap()),
                        contentDescription = "",
                        contentScale = ContentScale.Crop
                    )
                }
            }
            is Int -> {
                Log.d(TAG, "PostCardPopular: 加載本地資源圖片")
                Image(
                    modifier = imgModifier,
                    painter = painterResource(bean.data as Int),
                    contentDescription = "",
                    contentScale = ContentScale.Crop
                )
            }
            else -> {
                throw IllegalArgumentException("引數型別不符合要求，只能是：url、檔案路徑或者是 drawable id")
            }
        }
    }
}

雖然代碼看著不少，但是邏輯是不是很清晰，傳進來的 BaseBannerBean 中的 data 如果為空的話直接拋例外，因為圖片資源都為空了還搞什么飛機啊！對不？下面就根據不同資源直接加載圖片就行了，

這里需要特別說的有兩點：

當圖片資源為圖片路徑的時候，需要通過 BitmapFactory 先轉成 Bitmap ，然后還需要把 Bitmap 通過 Bitmap 的擴展方法 asImageBitmap 轉成 ImageBitmap ，這樣才能在 Compose 的 Image 中使用，
網路圖片的加載這里用到了一個三方加載庫 coil ，具體是什么就不過多介紹了，大家可以去百度下，在 Kotlin 中還是推薦使用 coil ，當然 Glide 也支持了 Compose ，大家可以隨便使用，

本地圖片

在最開始的時候已經試了網路圖片，這里咱們剛說過還可以使用本地圖片，來試試吧：

val items2 = arrayListOf(
    BannerBean(R.drawable.banner1),
    BannerBean(R.drawable.banner2),
    BannerBean(R.drawable.banner3),
    BannerBean(R.drawable.banner4),
)

BannerPager(
    modifier = Modifier.padding(top = 10.dp),
    items = items2,
    indicator = CircleIndicator(gravity = BannerGravity.BottomLeft)
) { item ->
    Toast.makeText(context, "item:$item", Toast.LENGTH_SHORT).show()
}

嗯，感覺比網路圖片還簡單啊，哈哈哈！運行下看看吧：

banner2

嘿嘿嘿！大家有沒有發現什么不一樣？指示器是不是跑到左邊了！哈哈哈，因為上面 CircleIndicator 中加了 BannerGravity.BottomLeft ，所以就在左邊，這個下面會詳細給大家介紹，而且加載本地圖片完全沒有問題，而且由于是本地的，比加載網路圖片快得多！

Banner配置類

上面 BannerPager 中引數的一個型別，咱們來看看這個類可以修改什么東西吧：

data class BannerConfig(
    // banner 高度
    var bannerHeight: Dp = 210.dp,
    // banner 圖片距離四周的 padding 值
    var bannerImagePadding: Dp = 8.dp,
    // banner 圖片的 shape
    var shape: Shape = RoundedCornerShape(10.dp),
    // banner 切換間隔時間
    var intervalTime: Long = 3000
)

注釋中基本都寫了，banner 高度、距離四周的 padding 值、圖片的 shape 以及切換間隔時間都可以在這里進行設定，當然不設定也可以，不設定的話就是默認值，也夠用了！

這塊咱們也可以修改下里面的值看看效果！

BannerPager(
    items = items2,
    indicator = CircleIndicator(gravity = BannerGravity.BottomLeft),
    config = BannerConfig(
        bannerHeight = 250.dp,
        bannerImagePadding = 0.dp,
        shape = RoundedCornerShape(0),
        intervalTime = 1000
    )
) { item ->
    Toast.makeText(context, "item:$item", Toast.LENGTH_SHORT).show()
}

可以看到上面咱們修改了 BannerConfig 的默認值，將高度改為了 250dp，圖片的 Padding 值改為了 0dp，圓角也設定為了 0，切換時間改為了 1 秒，來看看效果吧：

banner3

是不是基本符合咱們心中的樣子，而且加載速度變快了許多，圓角也沒了，成了長方形！

Banner 指示器

這一塊需要好好說說，其實 Banner 并沒有多少東西，也就一個圖片區域，剩下的就是指示器了，一般都是指示器各種樣式花里胡哨的！

我在這里一共默認了兩種指示器，一種是常見的圓形的指示器，另一種是數字的指示器，出來的效果大家應該在上面都看見了，

來看看指示器是怎么寫的，如果你想自定義的話該怎么做！

/**
 * 指示器基類，如果需要自定義指示器，需要繼承此類，并實作 [DrawIndicator] 方法
 * 別忘了在重寫方法上添加 @Composable 注解
 */
abstract class Indicator {

    abstract var gravity: Int

    @Composable
    abstract fun DrawIndicator(pagerState: PagerState)

}

上面代碼看注釋就能明白，這是一個抽象類，是所有 Banner 指示器的基類，里面有一個 gravity ，我定義了三個：

/**
 * BannerGravity 設定指示器位置
 */
object BannerGravity {

    // 底部居中
    const val BottomCenter = 0
    // 底部左邊
    const val BottomLeft = 2
    // 底部右邊
    const val BottomRight = 3

}

為什么只定義三個呢？因為我覺得也就這幾種情況了，，，如果還有別的的話，之后我再加，

圓形指示器

接下來先來看看圓形指示器的寫法吧：

/**
 * 圓形指示器 eg：，，. ，，
 *
 * @param indicatorColor 指示器默認顏色
 * @param selectIndicatorColor 指示器選中顏色
 * @param indicatorDistance 指示器之間的距離
 * @param indicatorSize 指示器默認圓大小
 * @param selectIndicatorSize 指示器選中圓大小
 * @param gravity 指示器位置
 */
class CircleIndicator(
    var indicatorColor: Color = Color(30, 30, 33, 90),
    var selectIndicatorColor: Color = Color.Green,
    var indicatorDistance: Int = 50,
    var indicatorSize: Float = 10f,
    var selectIndicatorSize: Float = 13f,
    override var gravity: Int = BottomCenter,
) : Indicator() {

    @Composable
    override fun DrawIndicator(pagerState: PagerState) {
        for (pageIndex in 0..pagerState.maxPage) {
            Canvas(modifier = Modifier.fillMaxSize()) {
                val canvasWidth = size.width
                val canvasHeight = size.height
                val color: Color
                val inSize: Float
                if (pageIndex == pagerState.currentPage) {
                    color = selectIndicatorColor
                    inSize = selectIndicatorSize
                } else {
                    color = indicatorColor
                    inSize = indicatorSize
                }
                val start = when (gravity) {
                    BottomCenter -> {
                        val width = canvasWidth - pagerState.maxPage * indicatorDistance
                        width / 2
                    }
                    BottomLeft -> {
                        100f
                    }
                    BottomRight -> {
                        canvasWidth - pagerState.maxPage * indicatorDistance - 100f
                    }
                    else -> 100f
                }
                drawCircle(
                    color,
                    inSize,
                    center = Offset(start + pageIndex * indicatorDistance, canvasHeight)
                )
            }
        }
    }
}

上面代碼雖然有點多，但是邏輯其實很簡單，回圈畫圓，通過 PagrState 來判斷是否是當前頁面，然后畫不同的顏色，

可以看到，圓形指示器中也可以修改一些配置，如果不想用默認的完全可以通過引數進行修改，

代碼很簡單，直接通過 Canvas 畫了幾個圓，上面也說了，顏色大家可以自己進行定義！

還是說一下怎么畫的吧，，，最外面包裹著一個 for 回圈，通過 PageState 可以獲取到頁面的數量及當前頁碼，然后添加一個 Canvas ，獲取下 Canvas 的寬和高，然后獲取當前的顏色，再根據設定的 gravity 獲取下放置的坐標點，最后直接畫上去就可以了！

圓形指示器上面圖中的都是，也展示了在左邊的樣式，這里展示下在右邊的樣子吧：

BannerPager(
    modifier = Modifier.padding(top = 10.dp),
    items = items2,
    indicator = CircleIndicator(gravity = BannerGravity.BottomRight)
) { item ->
    Toast.makeText(context, "item:$item", Toast.LENGTH_SHORT).show()
}

banner4

怎么樣，不丑吧！哈哈哈，

數字指示器

數字指示器和圓形指示器一樣，都繼承自 Indicator：

/**
 * 數字指示器，顯示數字的指示器  eg: 1/5
 *
 * @param backgroundColor 數字指示器背景顏色
 * @param numberColor 數字的顏色
 * @param circleSize 背景圓的半徑
 * @param fontSize 頁碼文字大小
 * @param gravity 指示器位置
 */
class NumberIndicator(
    var backgroundColor: Color = Color(30, 30, 33, 90),
    var numberColor: Color = Color.White,
    var circleSize: Dp = 35.dp,
    var fontSize: TextUnit = 15.sp,
    override var gravity: Int = BottomRight,
) : Indicator() {

    @Composable
    override fun DrawIndicator(pagerState: PagerState) {
        val alignment: Alignment = when (gravity) {
            BannerGravity.BottomCenter -> {
                Alignment.BottomCenter
            }
            BannerGravity.BottomLeft -> {
                Alignment.BottomStart
            }
            BottomRight -> {
                Alignment.BottomEnd
            }
            else -> Alignment.BottomEnd
        }
        Box(modifier = Modifier.fillMaxSize().padding(10.dp), contentAlignment = alignment) {
            Box(
                modifier = Modifier.size(circleSize).clip(CircleShape)
                    .background(color = backgroundColor),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    "${pagerState.currentPage + 1}/${pagerState.maxPage + 1}",
                    color = numberColor,
                    fontSize = fontSize
                )
            }
        }
    }

}

這里原本也想使用 Canvas 畫一下的，但想了想有的朋友可能不喜歡畫，所以就使用 Box 進行布局了，看大家需要了，哪種寫法都是可以的，大家也可以在這里也通過 Canvas 畫一下，同樣的，數字指示器中也可以修改一些配置，如果不想用默認的完全可以通過引數進行修改，

從上面代碼不難看出，數字指示器也可以設定左中右三個地方，就不一一設定了，給大家看一下最常用的右邊的樣式吧：

banner5

小結尾

到這里為止一個 Banner 已經完成了，功能都差不多完成了，但是，，，

凡事就怕但是！但并不是特別好看，不過也無所謂了，已經將介面給大家放開了，直接繼承自己畫就行了，而且 Banner 中的屬性都可以進行設定，其實上面有些還沒有展示，大家可以每個引數都修改試試，會有不一樣的小驚喜的！

其實還有很多沒有寫到的內容，比如圖片切換的影片，，，一個優秀的庫不是一兩天就能寫完的，希望大家能多給我提點建議，

最后放一下 Github 庫的地址吧：https://github.com/zhujiang521/Banner

對大家如果有幫助的話別忘了點贊啊，Github 庫也需要大家的 Star ！感激不盡！！！

就這樣，下回見！

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/271395.html

標籤：其他

上一篇：CodeCraft-21 and Codeforces Round #711 (Div. 2) D. Bananas in a Microwave 優化暴力

下一篇：Android GSYVideoPlayer視頻播放器