ক্যারোসেল

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

বিভিন্ন ব্যবহারের ক্ষেত্র অনুযায়ী চারটি ক্যারোসেল লেআউট উপলব্ধ রয়েছে:

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

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

এপিআই পৃষ্ঠ

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

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

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

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

ফলাফল

নিম্নলিখিত চিত্রটি পূর্ববর্তী কোড স্নিপেটের ফলাফল দেখাচ্ছে: