Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Bant, pencere boyutuna göre dinamik olarak uyum sağlayan, kaydırılabilir bir öğe listesini gösterir. İlgili içerik koleksiyonunu sergilemek için kaydırma bantlarını kullanın.
Bant öğelerinde görseller vurgulanır ancak öğe boyutuna uyum sağlayan kısa metinler de yer alabilir.
Farklı kullanım alanlarına uygun dört farklı bant düzeni vardır:
Çoklu göz atma: Farklı boyutlardaki öğeleri içerir. Fotoğraflar gibi birçok öğeye aynı anda göz atmak için önerilir.
Kapsanmayan: Tek boyuttan oluşan ve ekranın kenarından akan öğeler içerir. Her öğenin üstünde veya altında daha fazla metin ya da başka bir kullanıcı arayüzü göstermek için özelleştirilebilir.
Hero: Odaklanılacak büyük bir resmi öne çıkarır ve küçük bir öğeyle sonraki içeriklere dair bir önizleme sunar. Film veya program küçük resimleri gibi vurgulamak istediğiniz içerikleri öne çıkarmak için önerilir.
Tam ekran: Her seferinde uçtan uca tek bir büyük öğe gösterir ve dikey olarak kaydırır. Genişliğinden daha uzun olan içerikler için önerilir.
1. Şekil. Kapsanmayan (1) ve tam ekran (2) rulo türleri.
Bu sayfada, çoklu göz atma ve kapsanmayan bant düzenlerinin nasıl uygulanacağı gösterilmektedir. Düzen türleri hakkında daha fazla bilgi için Bant Material 3 yönergelerine bakın.
state: Geçerli öğe dizinini ve kaydırma konumunu yöneten bir CarouselState örneği. Bu durumu rememberCarouselState { itemCount } kullanarak oluşturun. Burada itemCount, banttaki toplam öğe sayısıdır.
itemSpacing: Banttaki bitişik öğeler arasındaki boş alanın miktarını tanımlar.
contentPadding: Dönen öğenin içerik alanının etrafına dolgu uygular. Bunu, ilk öğeden önce veya son öğeden sonra boşluk eklemek ya da kaydırılabilir bölgedeki öğeler için kenar boşlukları sağlamak amacıyla kullanın.
content: Tam sayı dizini alan composable işlev. Banttaki her öğenin kullanıcı arayüzünü dizinine göre tanımlamak için bu lambda'yı kullanın.
Bu composable'lar, öğe boyutlandırmayı belirtme şekilleri bakımından farklılık gösterir:
itemWidth (HorizontalUncontainedCarousel için): Sınırlanmamış bir banttaki her öğenin tam genişliğini belirtir.
preferredItemWidth (HorizontalMultiBrowseCarousel için): Çoklu göz atma bandındaki öğeler için ideal genişliği önerir. Bu sayede, alan izin veriyorsa bileşen birden fazla öğe gösterebilir.
Örnek: Çoklu göz atma döner menüsü
Bu snippet, çoklu göz atma dönen reklamını uygular:
Banttaki her öğe için verileri yapılandıran bir CarouselItem veri sınıfı tanımlar.
Resim kaynakları ve açıklamalarla doldurulmuş List nesnelerden oluşan bir CarouselItem oluşturur ve hatırlar.
Bantta birden fazla öğe görüntülemek için tasarlanmış HorizontalMultiBrowseCarousel composable'ı kullanır.
Döngünün durumu, öğelerin toplam sayısının verildiği rememberCarouselState kullanılarak başlatılır.
Öğeler, her öğe için optimum genişliği gösteren bir preferredItemWidth (burada 186.dp) içerir. Döngü, ekrana aynı anda kaç öğenin sığabileceğini belirlemek için bu bilgiyi kullanır.
itemSpacing parametresi, öğeler arasına küçük bir boşluk ekler.
HorizontalMultiBrowseCarousel öğesinin sondaki lambda'sı CarouselItems üzerinde yinelenir. Her yinelemede, i dizinindeki öğeyi alır ve bu öğe için Image composable'ını oluşturur.
Modifier.maskClip(MaterialTheme.shapes.extraLarge), her resme önceden tanımlanmış bir şekil maskesi uygulayarak yuvarlak köşeler verir.
contentDescription, resim için erişilebilirlik açıklaması sağlar.
Sonuç
Aşağıdaki resimde, önceki snippet'in sonucu gösterilmektedir:
Şekil 2. Son öğesi kırpılmış çoklu göz atma bandı.
HorizontalUncontainedCarousel composable'ı, atlı karınca düzenini oluşturur.
itemWidth parametresi, banttaki her öğe için sabit bir genişlik belirler.
Sonuç
Aşağıdaki resimde, önceki snippet'in sonucu gösterilmektedir:
3.şekil Banttaki son öğenin kırpılmadığı, sınırlanmamış bir bant.
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-31 UTC.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 2025-08-31 UTC."],[],[],null,["A carousel displays a scrollable list of items that adapt dynamically based on\nwindow size. Use carousels to showcase a collection of related content.\nCarousel items emphasize visuals, but can also contain brief text that adapts to\nthe item size.\n\nThere are four carousel layouts available to suit different use cases:\n\n- **Multi-browse**: Includes differently sized items. Recommended for browsing many items at once, like photos.\n- **Uncontained**: Contains items that are a single size and flow past the edge of the screen. Can be customized to show more text or other UI above or below each item.\n- **Hero**: Highlights one large image to focus on and provides a peek of what's next with a small item. Recommended for spotlighting content that you want to emphasize, like movie or show thumbnails.\n- **Full-screen**: Shows one edge-to-edge large item at a time and scrolls vertically. Recommended for content that is taller than it is wide.\n\n**Figure 1.** Uncontained (1) and full-screen (2) carousel types.\n\nThis page shows you how to implement the multi-browse and uncontained carousel\nlayouts. See the [Carousel Material 3 guidelines](https://m3.material.io/components/carousel/overview) for\nmore information about the layout types.\n\nAPI surface\n\nTo implement multi-browse and uncontained carousels, use the\n[`HorizontalMultiBrowseCarousel`](/reference/kotlin/androidx/compose/material3/carousel/package-summary#HorizontalMultiBrowseCarousel(androidx.compose.material3.carousel.CarouselState,androidx.compose.ui.unit.Dp,androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.foundation.gestures.TargetedFlingBehavior,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function2)) and [`HorizontalUncontainedCarousel`](/reference/kotlin/androidx/compose/material3/carousel/package-summary#HorizontalUncontainedCarousel(androidx.compose.material3.carousel.CarouselState,androidx.compose.ui.unit.Dp,androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.foundation.gestures.TargetedFlingBehavior,androidx.compose.foundation.layout.PaddingValues,kotlin.Function2))\ncomposables. These composables share the following key parameters:\n\n- `state`: A `CarouselState` instance that manages the current item index and scroll position. Create this state using `rememberCarouselState { itemCount }`, where `itemCount` is the total number of items in the carousel.\n- `itemSpacing`: Defines the amount of empty space between adjacent items in the carousel.\n- `contentPadding`: Applies padding around the content area of the carousel. Use this to add space before the first item or after the last item, or to provide margins for the items within the scrollable region.\n- `content`: A composable function that receives an integer index. Use this lambda to define the UI for each item in the carousel based on its index.\n\nThese composables differ in how they specify item sizing:\n\n- `itemWidth` (for `HorizontalUncontainedCarousel`): Specifies the exact width for each item in an uncontained carousel.\n- `preferredItemWidth` (for `HorizontalMultiBrowseCarousel`): Suggests the ideal width for items in a multi-browse carousel, letting the component display multiple items if space permits.\n\nExample: Multi-browse carousel\n\nThis snippet implements a multi-browse carousel:\n\n\n```kotlin\n@Composable\nfun CarouselExample_MultiBrowse() {\n data class CarouselItem(\n val id: Int,\n @DrawableRes val imageResId: Int,\n val contentDescription: String\n )\n\n val items = remember {\n listOf(\n CarouselItem(0, R.drawable.cupcake, \"cupcake\"),\n CarouselItem(1, R.drawable.donut, \"donut\"),\n CarouselItem(2, R.drawable.eclair, \"eclair\"),\n CarouselItem(3, R.drawable.froyo, \"froyo\"),\n CarouselItem(4, R.drawable.gingerbread, \"gingerbread\"),\n )\n }\n\n HorizontalMultiBrowseCarousel(\n state = rememberCarouselState { items.count() },\n modifier = Modifier\n .fillMaxWidth()\n .wrapContentHeight()\n .padding(top = 16.dp, bottom = 16.dp),\n preferredItemWidth = 186.dp,\n itemSpacing = 8.dp,\n contentPadding = PaddingValues(horizontal = 16.dp)\n ) { i -\u003e\n val item = items[i]\n Image(\n modifier = Modifier\n .height(205.dp)\n .maskClip(MaterialTheme.shapes.extraLarge),\n painter = painterResource(id = item.imageResId),\n contentDescription = item.contentDescription,\n contentScale = ContentScale.Crop\n )\n }\n}https://github.com/android/snippets/blob/f95ab59fad80aeaf5d6a90bab8a01a126f20f44e/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt#L44-L82\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\n- Defines a `CarouselItem` data class, which structures the data for each element in the carousel.\n- Creates and remembers a `List` of `CarouselItem` objects that are populated with image resources and descriptions.\n- Uses the `HorizontalMultiBrowseCarousel` composable, which is designed for displaying multiple items in a carousel.\n - The carousel's state is initialized using `rememberCarouselState`, which is given the total count of items.\n - Items have a `preferredItemWidth` (here, `186.dp`), which suggests an optimal width for each item. The carousel uses this to determine how many items can fit on the screen at once.\n - The `itemSpacing` parameter adds a small gap between items.\n - The trailing lambda of `HorizontalMultiBrowseCarousel` iterates through the `CarouselItems`. In each iteration, it retrieves the item at index `i` and renders an `Image` composable for it.\n - `Modifier.maskClip(MaterialTheme.shapes.extraLarge)` applies a predefined shape mask to each image, giving it rounded corners.\n - `contentDescription` provides an accessibility description for the image.\n\nResult\n\nThe following image shows the result from the preceding snippet:\n**Figure 2.** A multi-browse carousel, with the last item clipped.\n\nExample: Uncontained carousel\n\nThe following snippet implements an uncontained carousel:\n\n\n```kotlin\n@Composable\nfun CarouselExample() {\n data class CarouselItem(\n val id: Int,\n @DrawableRes val imageResId: Int,\n val contentDescription: String\n )\n\n val carouselItems = remember {\n listOf(\n CarouselItem(0, R.drawable.cupcake, \"cupcake\"),\n CarouselItem(1, R.drawable.donut, \"donut\"),\n CarouselItem(2, R.drawable.eclair, \"eclair\"),\n CarouselItem(3, R.drawable.froyo, \"froyo\"),\n CarouselItem(4, R.drawable.gingerbread, \"gingerbread\"),\n )\n }\n\n HorizontalUncontainedCarousel(\n state = rememberCarouselState { carouselItems.count() },\n modifier = Modifier\n .fillMaxWidth()\n .wrapContentHeight()\n .padding(top = 16.dp, bottom = 16.dp),\n itemWidth = 186.dp,\n itemSpacing = 8.dp,\n contentPadding = PaddingValues(horizontal = 16.dp)\n ) { i -\u003e\n val item = carouselItems[i]\n Image(\n modifier = Modifier\n .height(205.dp)\n .maskClip(MaterialTheme.shapes.extraLarge),\n painter = painterResource(id = item.imageResId),\n contentDescription = item.contentDescription,\n contentScale = ContentScale.Crop\n )\n }\n}https://github.com/android/snippets/blob/f95ab59fad80aeaf5d6a90bab8a01a126f20f44e/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt#L88-L126\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\n- The `HorizontalUncontainedCarousel` composable creates the carousel layout.\n - The `itemWidth` parameter sets a fixed width for each item in the carousel.\n\nResult\n\nThe following image shows the result from the preceding snippet:\n**Figure 3.** An uncontained carousel, where the last item in the carousel is not clipped."]]
