Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Sekmeler, ilgili içerik gruplarını düzenlemenize olanak tanır. İki tür sekme vardır:
Birincil sekmeler: İçerik bölmesinin üst kısmında, üst uygulama çubuğunun altında yer alır.
Ana içerik hedeflerini gösterir ve yalnızca bir grup sekme gerektiğinde kullanılmalıdır.
İkincil sekmeler: İçerik alanında, ilgili içeriği daha fazla ayırmak ve hiyerarşi oluşturmak için kullanılır. Bir ekranda birden fazla sekme düzeyi gerektiğinde bu düğmeler gereklidir.
1. Şekil. Birincil sekmeler (1) ve ikincil sekmeler (2).
Bu sayfada, uygulamanızdaki birincil sekmelerin ilgili ekranlar ve temel gezinme ile nasıl gösterileceği açıklanmaktadır.
API yüzeyi
Sekmeleri uygulamak için Tab, PrimaryTabRow ve SecondaryTabRow composable'larını kullanın. Tab composable, satırdaki tek bir sekmeyi temsil eder ve genellikle PrimaryTabRow (birincil gösterge sekmeleri için) veya SecondaryTabRow (ikincil gösterge sekmeleri için) içinde kullanılır.
Tab aşağıdaki temel parametreleri içerir:
selected: Geçerli sekmenin görsel olarak vurgulanıp vurgulanmayacağını belirler.
onClick(): Kullanıcı sekme üzerinde tıkladığında gerçekleştirilecek işlemi tanımlayan zorunlu bir lambda işlevi. Genellikle gezinme etkinliklerini burada işler, seçili sekme durumunu günceller veya ilgili içeriği yüklersiniz.
text: Sekmedeki metni gösterir. İsteğe bağlıdır.
icon: Sekmede bir simge gösterir. İsteğe bağlıdır.
enabled: Sekmenin etkinleştirilip etkinleştirilmediğini ve etkileşimde bulunulup bulunulamayacağını kontrol eder. Yanlış olarak ayarlanırsa sekme devre dışı durumda görünür ve tıklamalara yanıt vermez.
Örnek: Sekme tabanlı gezinme
Aşağıdaki snippet, bir uygulamadaki farklı ekranlar arasında gezinmek için sekmeler içeren bir üst gezinme çubuğu uygular:
Bu sayfadaki içerik ve kod örnekleri, İçerik Lisansı sayfasında açıklanan lisanslara tabidir. Java ve OpenJDK, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-08-28 UTC.
[null,null,["Son güncelleme tarihi: 2025-08-28 UTC."],[],[],null,["Tabs allow you to organize groups of related content. There are two types of\ntabs:\n\n- **Primary tabs**: Placed at the top of the content pane under a top app bar. They display the main content destinations, and should be used when just one set of tabs are needed.\n- **Secondary tabs**: Used within a content area to further separate related content and establish hierarchy. They are necessary when a screen requires more than one level of tabs.\n\n**Figure 1.** Primary tabs (1) and secondary tabs (2).\n\nThis page shows how to display primary tabs in your app with related screens and\nbasic navigation.\n\nAPI surface\n\nUse the [`Tab`](/reference/kotlin/androidx/compose/material3/package-summary#Tab(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.interaction.MutableInteractionSource)), [`PrimaryTabRow`](/reference/kotlin/androidx/compose/material3/package-summary#PrimaryTabRow(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1,kotlin.Function0,kotlin.Function0)), and [`SecondaryTabRow`](/reference/kotlin/androidx/compose/material3/package-summary#SecondaryTabRow(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1,kotlin.Function0,kotlin.Function0)) composables\nto implement tabs. The `Tab` composable represents an individual tab within the\nrow, and is typically used inside of a `PrimaryTabRow` (for primary indicator\ntabs) or `SecondaryTabRow` (for secondary indicator tabs).\n\n`Tab` includes the following key parameters:\n\n- `selected`: Determines whether the current tab is visually highlighted.\n- `onClick()`: A required lambda function that defines the action to be performed when the user clicks on the tab. This is where you typically handle navigation events, update the selected tab state, or load corresponding content.\n- `text`: Displays text within the tab. Optional.\n- `icon`: Displays an icon within the tab. Optional.\n- `enabled`: Controls whether the tab is enabled and can be interacted with. If set to false, the tab appears in a disabled state and won't respond to clicks.\n\nExample: Tab-based navigation\n\nThe following snippet implements a top navigation bar with tabs to navigate\nbetween different screens in an app:\n| **Note:** The [full source code](https://github.com/android/snippets/blob/main/compose/snippets/src/main/java/com/example/compose/snippets/components/Navigation.kt) includes the code that establishes the basic navigation structure for the following example.\n\n\n```kotlin\n@Composable\nfun NavigationTabExample(modifier: Modifier = Modifier) {\n val navController = rememberNavController()\n val startDestination = Destination.SONGS\n var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }\n\n Scaffold(modifier = modifier) { contentPadding -\u003e\n PrimaryTabRow(selectedTabIndex = selectedDestination, modifier = Modifier.padding(contentPadding)) {\n Destination.entries.forEachIndexed { index, destination -\u003e\n Tab(\n selected = selectedDestination == index,\n onClick = {\n navController.navigate(route = destination.route)\n selectedDestination = index\n },\n text = {\n Text(\n text = destination.label,\n maxLines = 2,\n overflow = TextOverflow.Ellipsis\n )\n }\n )\n }\n }\n AppNavHost(navController, startDestination)\n }\n}https://github.com/android/snippets/blob/7a0ebbee11495f628cf9d574f6b6069c2867232a/compose/snippets/src/main/java/com/example/compose/snippets/components/Navigation.kt#L186-L213\n```\n\n\u003cbr /\u003e\n\nKey points\n\n- `PrimaryTabRow` displays a horizontal row of tabs, with each tab corresponding to a `Destination`.\n- `val navController = rememberNavController()` creates and remembers an instance of [`NavHostController`](/reference/androidx/navigation/NavHostController), which manages the navigation within a [`NavHost`](/reference/androidx/navigation/NavHost).\n- `var selectedDestination by rememberSaveable {\n mutableIntStateOf(startDestination.ordinal) }` manages the state of the selected tab.\n - `startDestination.ordinal` gets the numerical index (position) of the `Destination.SONGS` enum entry.\n- When you click a tab, the `onClick` lambda calls `navController.navigate(route = destination.route)` to navigate to the corresponding screen.\n- The `onClick` lambda of the `Tab` updates the `selectedDestination` state to visually highlight the clicked tab.\n- It calls the `AppNavHost` composable, passing the `navController` and `startDestination`, to display the actual content of the selected screen.\n\nResult\n\nThe following image shows the result of the previous snippet:\n**Figure 2.** 3 tabs--- Songs, Album, and Playlist--- arranged horizontally.\n\nAdditional resources\n\n- [Material 3 - Tabs](https://m3.material.io/components/tabs/guidelines)\n- [Navigation with Compose](/develop/ui/compose/navigation)"]]