JetpackComposeのHorizontalPagerを使ってみた。

今回はHorizontalPagerを使用してみました。

今回は下記1.4.0での実装方法です。

"androidx.compose.foundation:foundation:1.4.0"

サンプルコード

HorizontalPagerSample.kt

const val PAGE = 3
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun HorizontalPagerSample() {
    val pagerState = rememberPagerState(initialPage = 0)
    Box(
        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")
            }
        }
    }
}

こちらがシンプルなHorizontalPagerの使用方法ですpageCountがページ数を設定します。
シンプルに書けるので、Composableのメリットですね！

実行結果