कैरसेल

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

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

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

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

एपीआई सरफ़ेस

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

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

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

• itemWidth (for HorizontalUncontainedCarousel): इससे अनकंटेन्ड कैरसेल में मौजूद हर आइटम की सटीक चौड़ाई तय होती है.
• preferredItemWidth (for 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 पैरामीटर से, कैरसेल में मौजूद हर आइटम के लिए तय चौड़ाई सेट होती है.

नतीजा

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