0Pricing
Jetpack Compose Academy · Ders

TabRow ve Kaydırılabilir Sayfalar

Sayfalama içeren yatay sekmeler ekleyin.

TabRow ve Kaydırılabilir Sayfalar, CoddyKit'te ücretsiz bir Jetpack Compose Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Jetpack Compose Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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

Sıkça Sorulan Sorular

“TabRow ve Kaydırılabilir Sayfalar” dersi ücretsiz mi?

Evet — “TabRow ve Kaydırılabilir Sayfalar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Jetpack Compose Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.

“TabRow ve Kaydırılabilir Sayfalar” dersinde ne öğreneceğim?

Sayfalama içeren yatay sekmeler ekleyin. Jetpack Compose Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Jetpack Compose Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Jetpack Compose Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“TabRow ve Kaydırılabilir Sayfalar” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Jetpack Compose Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Jetpack Compose Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Birden Çok Sekmeli NavigationBar
  2. Seçili Rotayı Vurgulama
  3. Geçişte Sekme Durumunu Koruma
  4. TabRow ve Kaydırılabilir Sayfalar
← Jetpack Compose Academy Sayfasına Dön