JetpackComposeでタブバーとスワイプビューの作成

ViewPager+TabLayoutをJetpackComposeで実装しようと思った
このやり方

・パッケージ
com.google.accompanist:accompanist-pagerは古い
今は、androidx.compose.foundation:foundation:1.4.0

・タブバー
TabRowとTabで実装できる
https://qiita.com/yasukotelin/items/15ffad2c66a642746679

・スワイプ付きビュー
HorizontalViewで実装できる
これはまだ実験APIだから以下をつける必要がある
ここだけ今後心配やなぁ・・・・。

@OptIn(ExperimentalFoundationApi::class)

・ページングとタブの紐付け

val pagerState = rememberPagerState()
TabRow(
    selectedTabIndex = pagerState.currentPage,

Tab(
    selected = pagerState.currentPage == 0,

HorizontalPager(
    state = pagerState

・indicator
indicatorは以下で設定できる
https://google.github.io/accompanist/pager/#integration-with-tabs

TabRow(
    indicator = { tabPositions ->
        TabRowDefaults.Indicator(
            Modifier.tabIndicatorOffset(tabPositions[pagerState.currentPage])
        )
    },

・タブクリック後に画面をスクロールさせる
https://zenn.dev/apple_nktn/articles/2f6617db3bfd41

val scope = rememberCoroutineScope()
Tab(
    onClick = {
        scope.launch {
            pagerState.animateScrollToPage(0)
        }
    },

これで一通り動くようになりましたとさ

Pocket

関連記事: