ক্যারোজেল

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

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

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

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

API সারফেস

মাল্টি-ব্রাউজ ও আনকন্টেনড ক্যারোজেল প্রয়োগ করতে, 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 প্যারামিটারটি ক্যারোজেলের প্রতিটি আইটেমের জন্য একটি নির্দিষ্ট প্রস্থ সেট করে।

ফলাফল

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