👋

JetpackCompose Pager&Tabレイアウトメモ(スクロールとかスワイプとか)

2022/08/08に公開約1,500字

https://google.github.io/accompanist/pager/#integration-with-tabs

ComposeのPagerを調べていてサンプル通りにならんやんけ!!!!!

と、ブチギレていたら下記のようにすることで解決しました。

よく見たらA common use-case for HorizontalPager is to be used in conjunction with a TabRow or ScrollableTabRow.って書いてましたね

val pagerState = rememberPagerState()
// TabRowではなくScrollableTabRowにすることでサンプルと同じ挙動にできる
TabRow(
    // Our selected tab is our current page
    selectedTabIndex = pagerState.currentPage,
    // Override the indicator, using the provided pagerTabIndicatorOffset modifier
    indicator = { tabPositions ->
        TabRowDefaults.Indicator(
            Modifier.pagerTabIndicatorOffset(pagerState, tabPositions)
        )
    }
) {
    // Add tabs for all of our pages
    pages.forEachIndexed { index, title ->
        Tab(
            text = { Text(title) },
            selected = pagerState.currentPage == index,
            onClick = { /* TODO */ },
        )
    }
}

HorizontalPager(
    count = pages.size,
    state = pagerState,
) { page ->
    // TODO: page content
}

rememberPagerStateの引数であるinitialPageに値を入れることで

初期インデックスを操作できる。

val pagerState = rememberPagerState(initialPage = 3)

こんな感じ。


tabタップ時にそのtabに遷移する方法は

pagerState.animateScrollToPage()に

移動したいインデックスを投げることで遷移することができる。

// pagerState.animateScrollToPageを行うにはcoroutineScopeで行う
coroutineScope.launch {
    pagerState.animateScrollToPage(index)
}

こんな感じ


因みに横も縦もPagerしたい場合は

HorizontalPagerをVerticalPagerでラップすればできます。


それといい感じのカスタムTabレイアウトの記事があったので

https://stackoverflow.com/questions/71376670/how-to-customize-tabs-in-jetpack-compose

Discussion

ログインするとコメントできます