Jetpack Compose Glimmer-এ আইকন

প্রযোজ্য XR ডিভাইস

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

XR ডিভাইসের ধরন সম্পর্কে জানুন →

XR ডিভাইসের ধরন সম্পর্কে জানুন →

Jetpack Compose Glimmer-এ, Icon কম্পোনেন্ট হল এক রঙের আইকন রেন্ডার করার জন্য একটি UI এলিমেন্ট। আইকনগুলি বুদ্ধিদীপ্তভাবে টিন্টিং ও স্কেলিং ম্যানেজ করে যাতে সেগুলি পাঠযোগ্য থাকে এবং GlimmerTheme-এর সাথে দৃশ্যত সামঞ্জস্যপূর্ণ হয়।

মাপগুলি

LocalIconSize-এর দেওয়া ডিফল্ট সাইজের আইকন ব্যবহার করা হলেও, আপনি নির্দিষ্ট সাইজ সেট করতে তিনটি আইকন সাইজের মধ্যে একটি ব্যবহার করতে পারেন। এছাড়াও, নিম্নলিখিত কনটেক্সটের জন্য এইসব সাইজ ডিফল্ট হিসেবে ব্যবহার করা হয়:

আইকনের সোর্স

আইকন ImageVector, ImageBitmap বা Painter-কে সোর্স হিসেবে গ্রহণ করতে পারে। নিজের আইকন তৈরি করার সময়, ডিসপ্লে গ্লাসে যেকোনও সাইজে তীক্ষ্ণ রেন্ডারিং প্রমোট করতে, যেখানে সম্ভব সেখানে ImageVector ব্যবহার করুন।

রঙ ও টিন্টিং

• অটোমেটিক টিন্ট: আইকনটি surface বা Button-এর মতো LocalContentColor প্যারেন্ট সারফেসের দেওয়া LocalContentColor প্যারেন্ট সারফেসের দেওয়া তথ্যের ভিত্তিতে নিজের রঙ ঠিক করে নেয়।
• ম্যানুয়াল টিন্টিং: নির্দিষ্ট রঙ প্রয়োগ করতে tint প্যারামিটার ব্যবহার করুন।
• একাধিক রঙের অ্যাসেট: যে আইকনগুলির রঙ পরিবর্তন করা উচিত নয় (যেমন, একাধিক রঙের ব্র্যান্ড লোগো), সেগুলির জন্য tint = Color.Unspecified সেট করুন।
• সাধারণ ছবি: আইকনের সাইজ ও টিন্ট সংক্রান্ত নিয়ম মেনে চলে না এমন ফটোগ্রাফ বা সাধারণ ছবির ক্ষেত্রে, এর পরিবর্তে স্ট্যান্ডার্ড androidx.compose.foundation.Image ব্যবহার করুন।

উদাহরণ: সাধারণ আইকন

নিচের কোডটি একটি প্রাথমিক আইকন তৈরি করে:

@Composable
fun IconSample() {
    Icon(FavoriteIcon, contentDescription = "Localized description")
}
IconSamples.kt

উদাহরণ: রঙের সাথে আইকন

নিচের কোডটি থিমের প্রাথমিক রঙ ব্যবহার করে একটি রঙিন আইকন তৈরি করে:

@Composable
fun ColoredIconSample() {
    Icon(
        FavoriteIcon,
        tint = GlimmerTheme.colors.primary,
        contentDescription = "Localized description",
    )
}
IconSamples.kt

যেমন: আলাদা আলাদা সাইজের আইকন

নিম্নলিখিত কোড এমন একটি আইকন তৈরি করে যা একটি নির্দিষ্ট সাইজের জন্য পরিবর্তিত হয়:

@Composable
fun SizedIconSample() {
    Icon(
        FavoriteIcon,
        contentDescription = "Localized description",
        modifier = Modifier.size(GlimmerTheme.iconSizes.large),
    )
}
IconSamples.kt

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

• GlimmerTheme.iconSizes ব্যবহার করে আইকনের সাইজ কাস্টমাইজ করা হয়, এর সাথে একটি মডিফায়ার থাকে। আইকনের জন্য, ডিফল্ট ভ্যালু হল GlimmerTheme.iconSizes.medium. আপনার UI জুড়ে সামঞ্জস্য বজায় রাখতে, হার্ড-কোডিং ভ্যালুর পরিবর্তে এইসব সাইজ ব্যবহার করুন।
• আইকনের জন্য স্থানীয়কৃত contentDescription প্রদান করে। আইকনটি শুধুমাত্র সাজসজ্জার জন্য না হলে, সবসময় এইসব বিবরণ দিন।