कैरसेल

कैरसेल में, आइटम की ऐसी सूची दिखती है जिसे स्क्रोल किया जा सकता है. यह सूची, विंडो के साइज़ के हिसाब से डाइनैमिक तौर पर बदलती रहती है. मिलते-जुलते कॉन्टेंट का कलेक्शन दिखाने के लिए, कैरसेल का इस्तेमाल करें. कैरसेल आइटम में विज़ुअल को ज़्यादा अहमियत दी जाती है. हालांकि, इनमें कम शब्दों वाला ऐसा टेक्स्ट भी शामिल किया जा सकता है जो आइटम के साइज़ के हिसाब से बदलता है.

अलग-अलग कामों के हिसाब से, कैरसेल के चार लेआउट उपलब्ध हैं:

• एक से ज़्यादा प्रॉडक्ट ब्राउज़ करना: इसमें अलग-अलग साइज़ के प्रॉडक्ट शामिल होते हैं. फ़ोटो जैसे कई आइटम एक साथ ब्राउज़ करने के लिए इसका सुझाव दिया जाता है.
• बिना कंटेनर वाले आइटम: इसमें एक ही साइज़ के ऐसे आइटम होते हैं जो स्क्रीन के किनारे से बाहर निकल जाते हैं. हर आइटम के ऊपर या नीचे ज़्यादा टेक्स्ट या अन्य यूज़र इंटरफ़ेस (यूआई) दिखाने के लिए, इसे पसंद के मुताबिक बनाया जा सकता है.
• हीरो: फ़ोकस करने के लिए एक बड़ी इमेज को हाइलाइट करता है. साथ ही, एक छोटे आइटम की मदद से यह जानकारी देता है कि अगला आइटम क्या है. इसका सुझाव ऐसे कॉन्टेंट को हाइलाइट करने के लिए दिया जाता है जिस पर आपको ज़्यादा ध्यान पाना है. जैसे, फ़िल्म या शो के थंबनेल.
• फ़ुल-स्क्रीन: इसमें एक बार में एक बड़ा आइटम, स्क्रीन के किनारे से किनारे तक दिखता है. साथ ही, यह वर्टिकल तौर पर स्क्रोल होता है. यह अनुपात, लंबाई के मुकाबले चौड़ाई में कम कॉन्टेंट के लिए सुझाया जाता है.

इस पेज पर, एक से ज़्यादा आइटम ब्राउज़ करने की सुविधा और बिना कंटेनर वाले कैरसेल लेआउट लागू करने का तरीका बताया गया है. लेआउट टाइप के बारे में ज़्यादा जानकारी के लिए, कैरसेल के लिए Material 3 के दिशा-निर्देश देखें.

एपीआई का प्लैटफ़ॉर्म

एक से ज़्यादा ब्राउज़ और बिना कंटेनर वाले कैरसेल लागू करने के लिए, HorizontalMultiBrowseCarousel और HorizontalUncontainedCarousel कॉम्पोनेंसे का इस्तेमाल करें. ये कॉम्पोज़ेबल, ये मुख्य पैरामीटर शेयर करते हैं:

• state: CarouselState का एक ऐसा इंस्टेंस जो मौजूदा आइटम इंडेक्स और स्क्रॉल पोज़िशन को मैनेज करता है. rememberCarouselState { itemCount } का इस्तेमाल करके यह स्टेटस बनाएं, जहां itemCount कैरसेल में मौजूद आइटम की कुल संख्या है.
• itemSpacing: इससे कैरसेल में एक-दूसरे के बगल में मौजूद आइटम के बीच के खाली स्पेस की जानकारी मिलती है.
• contentPadding: कैरसेल के कॉन्टेंट एरिया के चारों ओर पैडिंग लागू करता है. पहले आइटम से पहले या आखिरी आइटम के बाद स्पेस जोड़ने के लिए, इसका इस्तेमाल करें. इसके अलावा, स्क्रोल किए जा सकने वाले हिस्से में आइटम के लिए मार्जिन जोड़ने के लिए भी इसका इस्तेमाल किया जा सकता है.
• content: एक ऐसा कंपोज़ेबल फ़ंक्शन जिसे पूर्णांक इंडेक्स मिलता है. कैरसेल में मौजूद हर आइटम के लिए, उसके इंडेक्स के आधार पर यूज़र इंटरफ़ेस (यूआई) तय करने के लिए, इस लैम्ब्डा फ़ंक्शन का इस्तेमाल करें.

आइटम के साइज़ की जानकारी देने के तरीके में, ये कॉम्पोज़ेबल अलग-अलग होते हैं:

• itemWidth (HorizontalUncontainedCarousel के लिए): बिना कंटेनर वाले कैरसेल में हर आइटम की सटीक चौड़ाई बताता है.
• preferredItemWidth (HorizontalMultiBrowseCarousel के लिए): एक से ज़्यादा ब्राउज़ किए जा सकने वाले कैरसेल में आइटम के लिए, सही चौड़ाई का सुझाव देता है. साथ ही, जगह होने पर कॉम्पोनेंट को कई आइटम दिखाने की अनुमति देता है.

उदाहरण: एक से ज़्यादा प्रॉडक्ट ब्राउज़ करने की सुविधा वाला कैरसेल

यह स्निपेट, एक से ज़्यादा ब्राउज़ करने की सुविधा वाला कैरसेल लागू करता है:

@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

कोड के बारे में अहम जानकारी

• CarouselItem डेटा क्लास तय करता है, जो कैरसेल में हर एलिमेंट के लिए डेटा को स्ट्रक्चर करता है.
• CarouselItem ऑब्जेक्ट का List बनाता है और उसे याद रखता है. इन ऑब्जेक्ट में इमेज संसाधन और जानकारी होती है.
• HorizontalMultiBrowseCarousel कॉम्पोज़ेबल का इस्तेमाल करता है, जिसे कैरसेल में कई आइटम दिखाने के लिए डिज़ाइन किया गया है.
  • कैरसेल की स्थिति को rememberCarouselState का इस्तेमाल करके शुरू किया जाता है. इसमें आइटम की कुल संख्या दी जाती है.
  • आइटम में preferredItemWidth (यहां, 186.dp) होता है, जो हर आइटम के लिए सबसे सही चौड़ाई का सुझाव देता है. कैरसेल इसका इस्तेमाल करके यह तय करता है कि स्क्रीन पर एक साथ कितने आइटम फ़िट हो सकते हैं.
  • itemSpacing पैरामीटर, आइटम के बीच थोड़ा अंतर जोड़ता है.
  • HorizontalMultiBrowseCarousel के आखिर में मौजूद lambda फ़ंक्शन, CarouselItems के लिए बार-बार चलता है. हर बार दोहराए जाने पर, यह इंडेक्स i पर मौजूद आइटम को वापस लाता है और उसके लिए Image कॉम्पोज़ेबल रेंडर करता है.
  • Modifier.maskClip(MaterialTheme.shapes.extraLarge) हर इमेज पर पहले से तय आकार का मास्क लागू करता है. इससे, इमेज के कोने गोल हो जाते हैं.
  • contentDescription, इमेज के लिए सुलभता से जुड़ी जानकारी देता है.

नतीजा

नीचे दी गई इमेज में, पिछले स्निपेट का नतीजा दिखाया गया है:

उदाहरण: बिना कंटेनर वाला कैरसेल

यहां दिया गया स्निपेट, बिना कंटेनर वाले कैरसेल को लागू करता है:

@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

कोड के बारे में अहम जानकारी

• HorizontalUncontainedCarousel कॉम्पोज़ेबल, कैरसेल लेआउट बनाता है.
  • itemWidth पैरामीटर, कैरसेल में मौजूद हर आइटम के लिए एक तय चौड़ाई सेट करता है.

नतीजा

नीचे दी गई इमेज में, पिछले स्निपेट का नतीजा दिखाया गया है: