Bant

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 listesi gösterir. İlgili içerik koleksiyonlarını göstermek için bantları kullanın. Bant öğeleri görselleri vurgular ancak öğe boyutuna göre ayarlanan kısa metinler de içerebilir.

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

• Çoklu göz atma: Farklı boyutlarda öğeler içerir. Fotoğraflar gibi birden fazla öğeye aynı anda göz atmak için önerilir.
• Kapsamı olmayan: Tek boyutlu 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östermek için özelleştirilebilir.
• Hero: Odaklanılacak büyük bir resmi öne çıkarır ve küçük bir öğeyle sıradaki 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: Bir seferde kenardan kenara büyük bir öğe gösterir ve dikey olarak kaydırılır. Genişliğinden daha uzun içerikler için önerilir.

Bu sayfada, çoklu gezinme ve kapsanmayan bant düzenleri nasıl uygulanacağı gösterilmektedir. Düzen türleri hakkında daha fazla bilgi için Bant Materyali 3 yönergelerine bakın.

API yüzeyi

Çoklu gezinme ve kapsanmayan bantları uygulamak için HorizontalMultiBrowseCarousel ve HorizontalUncontainedCarousel bileşenlerini kullanın. Bu bileşenler aşağıdaki temel parametreleri paylaşır:

• state: Geçerli öğe dizini 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: Bandın 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 için bunu kullanın.
• content: Tam sayı dizini alan bir birleştirilebilir işlev. Banttaki her öğenin kullanıcı arayüzünü dizine göre tanımlamak için bu lambda işlevini kullanın.

Bu bileşenler, öğe boyutunu belirtme biçimleri açısından farklılık gösterir:

• itemWidth (HorizontalUncontainedCarousel için): İçerisinde öğe bulunmayan 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. Böylece bileşen, alan izin veriyorsa birden fazla öğe gösterebilir.

Ö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

• Banttaki her öğenin verilerini yapılandıran bir CarouselItem veri sınıfı tanımlar.
• Resim kaynakları ve açıklamalarıyla doldurulan CarouselItem nesneden oluşan bir List oluşturur ve hatırlar.
• Bir bantta birden fazla öğe göstermek için tasarlanmış HorizontalMultiBrowseCarousel bileşenini kullanır.
  • Bantı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 öneren bir preferredItemWidth (burada 186.dp) içerir. Bant, ekrana aynı anda kaç öğe sığabileceğini belirlemek için bu değeri kullanır.
  • itemSpacing parametresi, öğeler arasına küçük bir boşluk ekler.
  • HorizontalMultiBrowseCarousel değerinin sonundaki lambda, CarouselItems değerinde iterasyon yapar. Her iterasyonda, i dizinindeki öğeyi alır ve bunun için bir Image kompozisyonu oluşturur.
  • Modifier.maskClip(MaterialTheme.shapes.extraLarge), her resme önceden tanımlanmış bir şekil maskesi uygulayarak köşelerini yuvarlar.
  • contentDescription, resim için erişilebilirlik açıklaması sağlar.

Sonuç

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

Örnek: İçerisinde öğe bulunmayan 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
        )
    }
}
Carousel.kt

Kodla ilgili önemli noktalar

• HorizontalUncontainedCarousel bileşeni, atlı karınca 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: