Bant

Bant, pencere boyutuna göre dinamik olarak uyarlanan, kaydırılabilir bir öğe listesi gösterir. İlgili içeriklerden oluşan bir koleksiyonu sergilemek için bantları kullanın. Dönen öğeler görselleri vurgular ancak öğe boyutuna uyum sağlayan kısa metinler de içerebilir.

Farklı kullanım alanlarına uygun dört rulo düzeni vardır:

• Çoklu göz atma: Farklı boyutlarda öğeler içerir. Fotoğraflar gibi birçok öğeye aynı anda göz atmak için önerilir.
• Sınırsız: Tek boyutta olan ve ekranın kenarından taşan öğeler içerir. Her öğenin üstünde veya altında daha fazla metin ya da başka bir kullanıcı arayüzü gösterecek şekilde özelleştirilebilir.
• Hero: Odaklanılacak büyük bir resmi vurgular ve küçük bir öğeyle bir sonraki içeriğe göz atma imkanı sunar. Film veya program küçük resimleri gibi vurgulamak istediğiniz içerikleri öne çıkarmak için önerilir.
• Tam ekran: Tek seferde bir adet kenardan kenara büyük öğe gösterir ve dikey olarak kaydırılır. Yüksekliği genişliğinden fazla olan içerikler için önerilir.

Bu sayfada, çoklu göz atma ve bağımsız bant düzenlerini nasıl uygulayacağınız gösterilmektedir. Düzen türleri hakkında daha fazla bilgi için Carousel Material 3 yönergelerine bakın.

API yüzeyi

Çoklu göz atma ve sınırsız bantları uygulamak için HorizontalMultiBrowseCarousel ve HorizontalUncontainedCarousel bileşenlerini kullanın. Bu composable'lar aşağıdaki temel parametreleri paylaşır:

• state: Mevcut öğ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: Atlı karıncadaki bitişik öğeler arasındaki boşluk miktarını tanımlar.
• contentPadding: Dönen öğenin içerik alanının etrafına dolgu uygular. İlk öğ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 bu özelliği kullanın.
• content: Tam sayı dizini alan bir composable işlev. Dizine göre banttaki her öğenin kullanıcı arayüzünü tanımlamak için bu lambda'yı kullanın.

Bu composable'lar, öğe boyutunu belirtme şekilleri açısından farklılık gösterir:

• itemWidth (HorizontalUncontainedCarousel için): Sınırsız bir rulo öğesindeki her bir öğenin tam genişliğini belirtir.
• preferredItemWidth (HorizontalMultiBrowseCarousel için): Çoklu göz atma bandındaki öğeler için ideal genişliği önererek bileşenin, alan izin veriyorsa birden fazla öğe göstermesini sağlar.

Örnek: Çoklu göz atma bandı

Bu snippet, çoklu göz atma bandı 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
        )
    }
}
Carousel.kt

Kodla ilgili önemli noktalar

• Bandın her bir öğesi için verileri yapılandıran bir CarouselItem veri sınıfı tanımlar.
• Resim kaynakları ve açıklamalarla doldurulmuş CarouselItem nesneden oluşan bir List oluşturur ve hatırlar.
• Birden fazla öğeyi bir bantta görüntülemek için tasarlanmış HorizontalMultiBrowseCarousel composable'ını kullanır.
  • Dönen öğeler listesinin durumu, toplam öğe sayısını belirten rememberCarouselState kullanılarak başlatılır.
  • Öğelerin bir preferredItemWidth (burada 186.dp) değeri vardır. Bu değer, her öğe için en uygun genişliği gösterir. Rulo, ekrana aynı anda kaç öğenin sığabileceğini belirlemek için bu değeri kullanır.
  • itemSpacing parametresi, öğeler arasında küçük bir boşluk ekler.
  • HorizontalMultiBrowseCarousel işlevinin sonundaki lambda, CarouselItems üzerinde iterasyon yapar. Her iterasyonda, i dizinindeki öğeyi alır ve bu öğe için bir Image composable oluşturur.
  • Modifier.maskClip(MaterialTheme.shapes.extraLarge), her resme önceden tanımlanmış bir şekil maskesi uygulayarak köşelerini yuvarlatır.
  • contentDescription, resim için erişilebilirlik açıklaması sağlar.

Sonuç

Aşağıdaki resimde, önceki snippet'in sonucu gösterilmektedir:

Örnek: Sınırsız rulo

Aşağıdaki snippet, bağımsız 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
        )
    }
}
Carousel.kt

Kodla ilgili önemli noktalar

• HorizontalUncontainedCarousel composable'ı, bant düzenini oluşturur.
  • itemWidth parametresi, banttaki her öğe için sabit bir genişlik ayarlar.

Sonuç

Aşağıdaki resimde, önceki snippet'in sonucu gösterilmektedir: