ক্যারোজেল

ক্যারোজেল স্ক্রল করা যায় এমন আইটেমের তালিকা দেখায় যা উইন্ডোর সাইজের উপর ভিত্তি করে ডায়নামিক পদ্ধতিতে অ্যাডাপ্ট করে। সম্পর্কিত কন্টেন্টের সংগ্রহ দেখাতে ক্যারোজেল ব্যবহার করুন। ক্যারোজেল আইটেম ভিজ্যুয়ালের উপর জোর দেয়, তবে এতে সংক্ষিপ্ত টেক্সটও থাকতে পারে যা আইটেমের সাইজের সাথে মানানসই হয়।

বিভিন্ন ব্যবহারের ক্ষেত্রে উপযুক্ত চারটি ক্যারোজেল লেআউট উপলভ্য আছে:

• মাল্টি-ব্রাউজ: বিভিন্ন সাইজের আইটেম অন্তর্ভুক্ত করে। একসাথে অনেক আইটেম ব্রাউজ করার জন্য সাজেস্ট করা হয়, যেমন ফটো।
• আনকন্টেনড: এতে এমন আইটেম থাকে যেগুলি একটি সাইজের হয় এবং স্ক্রিনের প্রান্তের বাইরে চলে যায়। প্রতিটি আইটেমের উপরে বা নিচে আরও টেক্সট বা অন্যান্য UI দেখানোর জন্য কাস্টমাইজ করা যেতে পারে।
• হিরো: ফোকাস করার জন্য একটি বড় ছবি হাইলাইট করে এবং ছোট আইটেমের মাধ্যমে পরবর্তী আইটেমের একটি ঝলক প্রদান করে। সিনেমা বা শোয়ের থাম্বনেলের মতো আপনি যে কন্টেন্টকে হাইলাইট করতে চান, সেটির জন্য সাজেস্ট করা হয়।
• ফুল-স্ক্রিন: একবারে একটি বড় আইটেম স্ক্রিনের এক প্রান্ত থেকে অন্য প্রান্ত পর্যন্ত দেখায় এবং উল্লম্বভাবে স্ক্রল করে। চওড়ার চেয়ে লম্বা কন্টেন্টের জন্য সাজেস্ট করা হয়।

এই পৃষ্ঠায় আপনি মাল্টি-ব্রাউজ ও আনকন্টেনড ক্যারোজেল লেআউট কীভাবে প্রয়োগ করবেন তা দেখানো হয়েছে। লেআউটের ধরন সম্পর্কে আরও জানতে Carousel Material 3 নির্দেশিকা দেখুন।

API সারফেস

মাল্টি-ব্রাউজ ও আনকন্টেনড ক্যারোজেল প্রয়োগ করতে, HorizontalMultiBrowseCarousel ও HorizontalUncontainedCarousel কম্পোজেবল ব্যবহার করুন। এইসব কম্পোজেবল নিম্নলিখিত মূল প্যারামিটার শেয়ার করে:

• state: একটি CarouselState ইনস্ট্যান্স যা বর্তমান আইটেম ইন্ডেক্স এবং স্ক্রল পজিশন ম্যানেজ করে। rememberCarouselState { itemCount } ব্যবহার করে এই স্টেট তৈরি করুন, যেখানে itemCount হল ক্যারোজেলে থাকা আইটেমের মোট সংখ্যা।
• itemSpacing: ক্যারোজেলের পাশাপাশি থাকা আইটেমের মধ্যে কতটা খালি জায়গা থাকবে তা নির্ধারণ করে।
• contentPadding: ক্যারোজেলের কন্টেন্ট এরিয়ার চারপাশে প্যাডিং প্রয়োগ করে। প্রথম আইটেমের আগে বা শেষ আইটেমের পরে স্পেস যোগ করতে অথবা স্ক্রল করা যায় এমন অঞ্চলের মধ্যে আইটেমের জন্য মার্জিন দিতে এটি ব্যবহার করুন।
• content: একটি কম্পোজেবল ফাংশন যা একটি পূর্ণসংখ্যা সূচক গ্রহণ করে। ক্যারোজেলের প্রতিটি আইটেমের ইনডেক্সের উপর ভিত্তি করে UI নির্ধারণ করতে এই lambda ব্যবহার করুন।

এই কম্পোজেবলগুলি আইটেমের সাইজ কীভাবে নির্দিষ্ট করে তার মধ্যে পার্থক্য রয়েছে:

• 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 প্যারামিটার ক্যারোজেলের প্রতিটি আইটেমের জন্য একটি নির্দিষ্ট প্রস্থ সেট করে।

ফলাফল

নিচের ছবিতে পূর্ববর্তী স্নিপেটের ফলাফল দেখানো হয়েছে: