कैरसेल

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

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

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

इस पेज पर, मल्टी-ब्राउज़ और अनकंटेन्ड कैरसेल लेआउट को लागू करने का तरीका बताया गया है. लेआउट के टाइप के बारे में ज़्यादा जानने के लिए, कैरसेल के लिए 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 का ट्रेलिंग लैम्डा, 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 पैरामीटर, कैरसेल में मौजूद हर आइटम के लिए एक तय चौड़ाई सेट करता है.

नतीजा

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