[游戏开发]28. Compose轮播图Banner 无限轮播 自动轮播

实现思路：使用的官方的HorizontalPager来创建一个比较大的集合，因为Horizontal Pager内部是LazyRom来实现的 不会造成内存问题

首先引入依赖

  def accompanist_version = '0.20.2'
    implementation "com.google.accompanist:accompanist-pager:${accompanist_version}"
    //不使用可以不依赖
    implementation "com.google.accompanist:accompanist-pager-indicators:${accompanist_version}"

代码如下

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun BannerPage(navCtrl: NavHostController, title: String) {
    CommonToolbar(navCtrl, title) {
        Spacer(modifier = Modifier.height(20.dp))
        //非自动轮播可以手动
        PagerOne()
        Spacer(modifier = Modifier.height(20.dp))
        //自动轮播
        PagerOne(auto = true, autoTime = 2500)
    }
}


@OptIn(ExperimentalPagerApi::class)
@Composable
fun PagerOne(auto: Boolean = false, autoTime: Long = 3000L) {
    val list = mutableListOf<String>()
    repeat(10) {
        list.add("Item $it")
    }
    val startIndex = Int.MAX_VALUE / 2
    val pagerState = rememberPagerState(initialPage = startIndex)
    val pageCountIndex = remember {
        derivedStateOf {
            (pagerState.currentPage - startIndex).floorMod(list.size)
        }
    }
    
    //使用时间来驱动轮播的时间间隔问题
    var currentTime by remember {
        mutableStateOf(10L)
    }

    if (auto) {
        LaunchedEffect(key1 = currentTime) {
            delay(autoTime)
            if (pagerState.currentPage == Int.MAX_VALUE - 1) {
                pagerState.animateScrollToPage(0)
            } else {
                pagerState.animateScrollToPage(pagerState.currentPage + 1)
            }
            currentTime = System.currentTimeMillis()
        }
    }
    
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .aspectRatio(16 / 9f)
    ) {
        HorizontalPager(
            count = Int.MAX_VALUE,
            state = pagerState,
            contentPadding = PaddingValues(horizontal = 0.dp),
            itemSpacing = 0.dp,
            modifier = Modifier
                .fillMaxSize()
        ) { index ->
            Box(
                modifier = Modifier
                    .padding(horizontal = 10.dp)
                    .background(Color.Blue)
                    .fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
                Image(
                    painter = painterResource(id = R.mipmap.coil_icon3),
                    contentDescription = null,
                    contentScale = ContentScale.FillBounds,
                    modifier = Modifier.fillMaxSize()
                )
                Text(
                    text = "index:$index page index:${pageCountIndex.value}",
                    modifier = Modifier
                        .padding(16.dp)
                        .background(MaterialTheme.colors.surface, RoundedCornerShape(4.dp))
                        .sizeIn(minWidth = 40.dp, minHeight = 40.dp)
                        .padding(8.dp)
                        .wrapContentSize(Alignment.Center)
                )
            }
        }
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 10.dp)
                .align(Alignment.BottomCenter),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            repeat(list.size) { index ->
                Box(
                    modifier = Modifier
                        .padding(start = 2.dp, end = 2.dp)
                        .width(if (index == pageCountIndex.value) 12.dp else 4.dp)
                        .height(4.dp)
                        .clip(if (index == pageCountIndex.value) RoundedCornerShape(2.dp) else CircleShape)
                        .background(
                            color = if (index == pageCountIndex.value) Color.Red else Color.DarkGray,
                            shape = if (index == pageCountIndex.value) RoundedCornerShape(2.dp) else CircleShape
                        )
                )
            }
        }
    }
}
//官方demo的一个算法
private fun Int.floorMod(other: Int): Int = when (other) {
    0 -> this
    else -> this - floorDiv(other) * other
}

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖