👋

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

2022/08/08に公開

Jetpack Compose

tech

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レイアウトの記事があったので

Discussion