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
}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Compose是一种用于在应用程序中展示多个像或内容的UI组件。通过轮,用户可以轮流浏览各个像或内容,以实现更好的可视化效果和用户体验。在Compose中,您可以使用不同的方式来实现自定义轮,具体取决于您的需求和设计。 一个常见的实现方式是使用Compose中的Pager组件。Pager组件允许您在多个页面之间进行滑动,并可以根据需要自定义页面内容。您可以在Pager组件中定义一个列表,每个列表项包含一个像或内容,并通过滑动来切换页面。这样,就可以创建一个基本的轮。 下面是一个使用Compose的Pager组件实现轮的简单示例代码: ```kotlin val images = listOf( "https://example.com/image1.jpg", "https://example.com/image2.jpg", "https://example.com/image3.jpg" ) Pager(count = images.size) { index -> Image( painter = rememberImagePainter(images[index]), contentDescription = null, modifier = Modifier .fillMaxWidth() .aspectRatio(16 / 9f) ) } ``` 在上面的示例中,我们创建了一个包含三个像的列表,并将其传递给Pager组件。在Pager的每个页面中,我们使用Image组件来展示对应的像。您可以根据实际需求自定义像的加载方式、显示效果和页面切换动画等。 如果您需要更复杂的轮,例如添加指示器、自定义动画或手势交互等功能,您可以进一步扩展上述示例代码,或者使用现有的第三方库来实现。例如,您可以使用Compose Transformer库来实现更丰富的轮效果。 希望以上信息对您有所帮助!如果您还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值