ক্যারোসেল

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

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

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

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

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

ফলাফল

নিম্নলিখিত চিত্রটি পূর্ববর্তী স্নিপেট থেকে ফলাফল দেখায়: