ক্যারোসেল

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

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

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

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

এপিআই সারফেস

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

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

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

• itemWidth ( HorizontalUncontainedCarousel এর জন্য): একটি uncontained ক্যারোসেলে প্রতিটি আইটেমের জন্য সঠিক প্রস্থ নির্দিষ্ট করে।
• 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 composable ব্যবহার করে, যা একটি ক্যারোসেলে একাধিক আইটেম প্রদর্শনের জন্য ডিজাইন করা হয়েছে।
  • ক্যারোজেলের অবস্থা rememberCarouselState ব্যবহার করে শুরু করা হয়, যা আইটেমের মোট সংখ্যা দেওয়া হয়।
  • আইটেমগুলির একটি preferredItemWidth থাকে (এখানে, 186.dp ), যা প্রতিটি আইটেমের জন্য সর্বোত্তম প্রস্থের পরামর্শ দেয়। ক্যারোজেল এটি ব্যবহার করে স্ক্রিনে একসাথে কতগুলি আইটেম ফিট করতে পারে তা নির্ধারণ করে।
  • itemSpacing প্যারামিটারটি আইটেমগুলির মধ্যে একটি ছোট ফাঁক যোগ করে।
  • HorizontalMultiBrowseCarousel এর ট্রেইলিং ল্যাম্বডা CarouselItems এর মাধ্যমে পুনরাবৃত্তি করে। প্রতিটি পুনরাবৃত্তিতে, এটি index 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 প্যারামিটার ক্যারোজেলের প্রতিটি আইটেমের জন্য একটি নির্দিষ্ট প্রস্থ নির্ধারণ করে।

ফলাফল

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

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

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

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

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

এপিআই সারফেস

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

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

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

• itemWidth ( HorizontalUncontainedCarousel এর জন্য): একটি uncontained ক্যারোসেলে প্রতিটি আইটেমের জন্য সঠিক প্রস্থ নির্দিষ্ট করে।
• 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 composable ব্যবহার করে, যা একটি ক্যারোসেলে একাধিক আইটেম প্রদর্শনের জন্য ডিজাইন করা হয়েছে।
  • ক্যারোজেলের অবস্থা rememberCarouselState ব্যবহার করে শুরু করা হয়, যা আইটেমের মোট সংখ্যা দেওয়া হয়।
  • আইটেমগুলির একটি preferredItemWidth থাকে (এখানে, 186.dp ), যা প্রতিটি আইটেমের জন্য সর্বোত্তম প্রস্থের পরামর্শ দেয়। ক্যারোজেল এটি ব্যবহার করে স্ক্রিনে একসাথে কতগুলি আইটেম ফিট করতে পারে তা নির্ধারণ করে।
  • itemSpacing প্যারামিটারটি আইটেমগুলির মধ্যে একটি ছোট ফাঁক যোগ করে।
  • HorizontalMultiBrowseCarousel এর ট্রেইলিং ল্যাম্বডা CarouselItems এর মাধ্যমে পুনরাবৃত্তি করে। প্রতিটি পুনরাবৃত্তিতে, এটি index 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 প্যারামিটার ক্যারোজেলের প্রতিটি আইটেমের জন্য একটি নির্দিষ্ট প্রস্থ নির্ধারণ করে।

ফলাফল

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