@Composable
private fun HomeMediaStreamBannerIndicator(index: Int, count: Int, pageState: PagerState) {
if (count > 1) {
val diameter = dp2px(6)
val radius = diameter shr 1
val spacing = dp2px(4)
val canvasWidth = (diameter + spacing) * count - spacing
Canvas(
modifier = Modifier
.padding(bottom = 14.dp)
.wrapContentWidth(),
) {
val centerY = size.height / 2
val startX = (size.width - canvasWidth) / 2
// 绘制灰色圆点
for (i in 0 until count) {
drawCircle(
color = Color_FFF.copy(alpha = 0.2f),
radius = radius.toFloat(),
center = Offset(
x = startX + i * (diameter + spacing),
y = centerY
)
)
}
//滑动指示器
val w = maxOf((1 + abs(pageState.currentPageOffsetFraction) * 3) * diameter, diameter.toFloat())
val sy = centerY - radius
val sx = if (pageState.currentPageOffsetFraction >= 0) {
//右滑
startX + index * (diameter + spacing) - radius
} else if (pageState.currentPageOffsetFraction < 0) {
//左滑
startX + diameter + index * (diameter + spacing) - radius - w
} else {
//停止滑动
startX + index * (diameter + spacing) - radius
}
drawRoundRect(
color = Color_FFF,
topLeft = Offset(sx, sy),
cornerRadius = CornerRadius(6.dp.toPx()),
size = Size(width = w, height = diameter.toFloat())
)
}
}
}
image.png
image.png
@Composable
private fun HomeMediaStreamBannerIndicator(index: Int, count: Int, pageState: PagerState) {
if (count > 1) {
Row(
modifier = Modifier
.height(60.dp)
.wrapContentWidth(),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
) {
repeat(count) { page ->
val offset = (pageState.currentPage - page) + pageState.currentPageOffsetFraction
val scale = lerp(1f, 2.5f, 1f - offset.absoluteValue.coerceIn(0f, 1f))
val color = lerp(Color_FFF.copy(alpha = 0.2f), Color_FFF, 1f - offset.absoluteValue.coerceIn(0f, 1f))
Box(
modifier = Modifier
.padding(horizontal = 4.dp)
.width((6.dp * scale).coerceAtLeast(6.dp))
.height(6.dp)
.background(color, shape = RoundedCornerShape(size = 6.dp))
)
}
}
}
}
image.png
