JetpackComposeのHorizontalPagerにPaging indicatorを使ってみた。

こちらでHorizontalPagerを使ってみましたが、それにプラスで、開いているページがわかるような丸い点を下に表示してみようと思います。

HorizontalPagerSample.kt

const val PAGE = 3
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun HorizontalPagerSample() {
    val pagerState = rememberPagerState(initialPage = 0)
    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        HorizontalPager(
            state = pagerState,
            pageCount = PAGE
        ) { page ->
            Column(
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier
                    .width(300.dp)
                    .height(200.dp)
                    .background(
                        color = Color.Gray,
                        shape = RoundedCornerShape(8.dp)
                    )
            ) {
                Text(text = "ページ数： $page")
            }
        }
        Row(
            Modifier
                .wrapContentHeight()
                .fillMaxWidth()
                .padding(top = 16.dp),
            horizontalArrangement = Arrangement.Center
        ) {
            repeat(PAGE) { iteration ->
                val color =
                    if (pagerState.currentPage == iteration) Color.Black else Color.Gray
                Box(
                    modifier = Modifier
                        .padding(2.dp)
                        .clip(CircleShape)
                        .background(color)
                        .size(6.dp)
                )
            }
        }
    }
}

この部分が追加した箇所です。

Row(
    Modifier
        .wrapContentHeight()
        .fillMaxWidth()
        .padding(top = 12.dp),
    horizontalArrangement = Arrangement.Center
) {
    repeat(PAGE) { iteration ->
        val color =
            if (pagerState.currentPage == iteration) Color.Black else Color.Gray
        Box(
            modifier = Modifier
                .padding(2.dp)
                .clip(CircleShape)
                .background(color)
                .size(8.dp)
        )
    }
}

ページ数とpagerStateが分かれば簡単に実装することができました。