Jetpack Compose Academy · Lektion

TabRow und wischbare Seiten

Fügen Sie horizontale Tabs mit Paging hinzu.

TabRow und wischbare Seiten ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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! 🚀

Häufig gestellte Fragen

Ist die Lektion „TabRow und wischbare Seiten“ kostenlos?

Ja — der vollständige Text von „TabRow und wischbare Seiten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „TabRow und wischbare Seiten“?

Fügen Sie horizontale Tabs mit Paging hinzu. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?

Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „TabRow und wischbare Seiten“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?

Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Jetpack Compose Academy