Compose 指示器

@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