Jetpack Compose Academy · レッスン

TabRowとスワイプ可能なページ

ページング対応の横タブを追加します。

「TabRowとスワイプ可能なページ」はCoddyKit上の無料Jetpack Compose Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Meet TabRow

While NavigationBar sits at the bottom, TabRow places a row of tabs at the top, perfect for switching between related views on one screen. 🗂️

TabRow vs NavigationBar

Use TabRow for in-screen sections like Posts and About; use NavigationBar for whole app destinations. Different jobs, different bars.

Add Tabs Inside It

A TabRow takes a selectedTabIndex and a content lambda where you emit one Tab per section.

TabRow(selectedTabIndex = index) {
  Tab(/* ... */)
  Tab(/* ... */)
}

Each Tab Is Selectable

Each Tab has its own selected flag and onClick, plus text or an icon, much like a NavigationBarItem.

Tab(
  selected = index == 0,
  onClick = { index = 0 },
  text = { Text("Posts") }
)

Make Pages Swipeable

To swipe between pages, pair the tabs with a HorizontalPager, which shows one full-width page at a time.

val pagerState = rememberPagerState { 3 }
HorizontalPager(state = pagerState) { page -> }

One State, Two Views

The trick is sharing pagerState. The TabRow reads its current page, and the pager drives that page as the user swipes.

TabRow(selectedTabIndex = pagerState.currentPage) { /* ... */ }

Tap Should Scroll the Pager

On a tab tap, call animateScrollToPage so tapping a tab smoothly slides the pager to that page.

scope.launch {
  pagerState.animateScrollToPage(i)
}

Run It in a Scope

Because animateScrollToPage is a suspend call, launch it from a rememberCoroutineScope inside your onClick.

val scope = rememberCoroutineScope()

Scrollable Tabs

Got many tabs? Use ScrollableTabRow so they scroll horizontally instead of cramming into the screen width.

ScrollableTabRow(selectedTabIndex = pagerState.currentPage) { /* ... */ }

Style the Indicator

The moving underline is the indicator slot. You can recolor or resize it to match your theme and brand.

indicator = { tabPositions -> /* custom underline */ }

Pager Plus Tabs Pattern

Combining TabRow and HorizontalPager over one shared state is the standard Compose pattern for swipeable, tabbed screens.

Quick Check

You built swipeable tabbed pages. Final check!

Recap

You mastered TabRow with HorizontalPager: shared pagerState links them, animateScrollToPage handles taps, and ScrollableTabRow fits many tabs. Course done! 🚀

よくある質問

「TabRowとスワイプ可能なページ」レッスンは無料ですか？

はい。「TabRowとスワイプ可能なページ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。

「TabRowとスワイプ可能なページ」で何を学びますか？

ページング対応の横タブを追加します。ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Jetpack Compose Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「TabRowとスワイプ可能なページ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJetpack Compose Academyレッスンでコードを書いて実行できますか？

はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Jetpack Compose Academyに戻る