জেটপ্যাক কম্পোজ গ্লিমারে কার্ড

প্রযোজ্য এক্সআর ডিভাইস

এই নির্দেশিকা আপনাকে এই ধরনের এক্সআর ডিভাইসগুলির জন্য অভিজ্ঞতা তৈরি করতে সাহায্য করে।

এক্সআর ডিভাইসের প্রকারভেদ সম্পর্কে জানুন →

এক্সআর ডিভাইসের প্রকারভেদ সম্পর্কে জানুন →

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

কার্ডগুলো Jetpack Compose Glimmer সারফেস সিস্টেমের উপর ভিত্তি করে তৈরি করা হয়, তাই এগুলো ডেপথ এফেক্ট, ক্লিপিং এবং সামঞ্জস্যপূর্ণ বর্ডার হাইলাইটের মতো ভৌত বৈশিষ্ট্যগুলো লাভ করে।

শারীরস্থান এবং স্লট

একটি জেটপ্যাক কম্পোজ গ্লিমার কার্ড বেশ কিছু বিশেষায়িত উপাদান দিয়ে তৈরি করা হয়, যা আপনাকে এর বিষয়বস্তু এবং বিন্যাস নিজের মতো করে সাজানোর সুযোগ দেয়।

কার্ড ডিফল্ট

কার্ডগুলির ক্ষেত্রে নিম্নলিখিত ডিফল্টগুলি প্রযোজ্য:

• প্রস্থ : ডিসপ্লে গ্লাসে পাঠযোগ্যতা উন্নত করার জন্য কার্ডগুলো ডিসপ্লের সর্বাধিক উপলব্ধ প্রস্থ জুড়ে থাকে।
• সর্বনিম্ন উচ্চতা : 80.dp
• টেক্সটের উল্লম্ব ব্যবধান : 3.dp
• হেডারের আকৃতি : 24.dp কোণাসহ RoundedCornerShape ব্যবহার করা হয়েছে।
• কন্টেন্ট প্যাডিং : ডিফল্ট হিসেবে GlimmerTheme.componentSpacingValues.medium ব্যবহৃত হয়। এটি হেডার ইমেজ এবং কন্টেন্ট কন্টেইনারের চারপাশের বাইরের প্যাডিংকে প্রভাবিত করে।
• আকৃতি : ডিফল্ট হিসেবে GlimmerTheme.shapes.medium ব্যবহৃত হয়।

• টেক্সট রেন্ডারিং : নিম্নলিখিত স্লটগুলির জন্য GlimmerTheme.typography থেকে ডিফল্ট মান ব্যবহার করে:

  • শিরোনাম: bodyMedium
  • সাবটাইটেল: caption
  • মূল বিষয়বস্তু: bodySmall

উদাহরণ: বেসিক কার্ড

নিম্নলিখিত কোডটি একটি কার্ড তৈরি করার জন্য প্রয়োজনীয় ন্যূনতম কোড দেখাচ্ছে:

Card { Text("This is a card") }
CardSamples.kt

উদাহরণ: একাধিক স্লটযুক্ত কার্ড

নিম্নলিখিত কোডটি দেখায় কিভাবে একাধিক স্লট একসাথে ব্যবহার করে একটি কার্ড তৈরি করা যায়:

Card(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    trailingIcon = { Icon(BookmarkIcon, contentDescription = "Bookmark") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
) {
    Text("This is a complete card")
}
CardSamples.kt

কোড সম্পর্কে মূল বিষয়গুলো

• কার্ডের বিষয়বস্তু ও কাঠামো কাস্টমাইজ করার জন্য title , subtitle এবং leadingIcon এর মতো বিভিন্ন কার্ড এলিমেন্ট কীভাবে ব্যবহার করতে হয়, তা দেখানো হয়েছে।
• সম্পূর্ণ কার্ড পৃষ্ঠটিকে ইন্টারেক্টিভ করতে onClick সাথে Card ওভারলোড ব্যবহার করা হয়।

অ্যাকশন কার্ড

যদি আপনি কোনো কার্ডের সাথে একটি অ্যাকশন বাটন যুক্ত করতে চান, তাহলে একটি ActionCard ব্যবহার করুন। অ্যাকশন কার্ডগুলোতে সাধারণ কার্ডের মতোই উপাদান থাকে এবং এর সাথে একটি অতিরিক্ত action প্যারামিটারও থাকে যা নিচের বাটনটিকে নির্ধারণ করে।

উদাহরণ: মৌলিক অ্যাকশন কার্ড

এই কোডটি দেখায় কিভাবে একটি ActionCard তৈরি করতে হয়:

ActionCard(
    action = {
        Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
            Text("Send")
        }
    }
) {
    Text("This is a card with a title, leading icon, header image, and action")
}
CardSamples.kt

উদাহরণ: আইকন সহ অ্যাকশন কার্ড

এই কোডটি দেখায় কিভাবে আইকন সহ একটি আরও জটিল ActionCard তৈরি করতে হয়:

ActionCard(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
    action = {
        Button(onClick = { /* Handle action */ }) {
            Text("Action")
        }
    }
) {
    Text(
        "This is the main body content of the card, utilizing theme-tokens for consistent styling.",
        style = GlimmerTheme.typography.bodyMedium
    )
}
CardSamples.kt