Bant, pencere boyutuna göre dinamik olarak uyarlanan, 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.
- Sınırsız: 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 vurgular 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.

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.
API yüzeyi
Birden fazla öğeye göz atma ve kapsanmayan kaydırma çubuklarını uygulamak için HorizontalMultiBrowseCarousel
ve HorizontalUncontainedCarousel
composable'larını kullanın. Bu composable'lar aşağıdaki temel parametreleri paylaşır:
state
: Geçerli öğe dizinini ve kaydırma konumunu yöneten birCarouselState
örneği. Bu durumurememberCarouselState { itemCount }
kullanarak oluşturun. BuradaitemCount
, banttaki toplam öğe sayısıdır.itemSpacing
: Banttaki bitişik öğeler arasındaki boş alanın miktarını tanımlar.contentPadding
: Bandın 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:
@Composable fun CarouselExample_MultiBrowse() { data class CarouselItem( val id: Int, @DrawableRes val imageResId: Int, val contentDescription: String ) val items = remember { listOf( CarouselItem(0, R.drawable.cupcake, "cupcake"), CarouselItem(1, R.drawable.donut, "donut"), CarouselItem(2, R.drawable.eclair, "eclair"), CarouselItem(3, R.drawable.froyo, "froyo"), CarouselItem(4, R.drawable.gingerbread, "gingerbread"), ) } HorizontalMultiBrowseCarousel( state = rememberCarouselState { items.count() }, modifier = Modifier .fillMaxWidth() .wrapContentHeight() .padding(top = 16.dp, bottom = 16.dp), preferredItemWidth = 186.dp, itemSpacing = 8.dp, contentPadding = PaddingValues(horizontal = 16.dp) ) { i -> val item = items[i] Image( modifier = Modifier .height(205.dp) .maskClip(MaterialTheme.shapes.extraLarge), painter = painterResource(id = item.imageResId), contentDescription = item.contentDescription, contentScale = ContentScale.Crop ) } }
Kodla ilgili önemli noktalar
- 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 birCarouselItem
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
(burada186.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çinImage
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.
- Döngünün durumu, öğelerin toplam sayısının verildiği
Sonuç
Aşağıdaki resimde, önceki snippet'in sonucu gösterilmektedir:

Örnek: Kapsanmayan bant
Aşağıdaki snippet, kapsanmayan bir bant uygular:
@Composable fun CarouselExample() { data class CarouselItem( val id: Int, @DrawableRes val imageResId: Int, val contentDescription: String ) val carouselItems = remember { listOf( CarouselItem(0, R.drawable.cupcake, "cupcake"), CarouselItem(1, R.drawable.donut, "donut"), CarouselItem(2, R.drawable.eclair, "eclair"), CarouselItem(3, R.drawable.froyo, "froyo"), CarouselItem(4, R.drawable.gingerbread, "gingerbread"), ) } HorizontalUncontainedCarousel( state = rememberCarouselState { carouselItems.count() }, modifier = Modifier .fillMaxWidth() .wrapContentHeight() .padding(top = 16.dp, bottom = 16.dp), itemWidth = 186.dp, itemSpacing = 8.dp, contentPadding = PaddingValues(horizontal = 16.dp) ) { i -> val item = carouselItems[i] Image( modifier = Modifier .height(205.dp) .maskClip(MaterialTheme.shapes.extraLarge), painter = painterResource(id = item.imageResId), contentDescription = item.contentDescription, contentScale = ContentScale.Crop ) } }
Kodla ilgili önemli noktalar
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:
