实现思路:使用的官方的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
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)