জেটপ্যাক কম্পোজ গ্লিমারের আইকনগুলি

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

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

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

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

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 IconSampleUsage() {
    GlimmerLazyColumn(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        item { IconSizesSample() }
        item {
            Icon(
                FavoriteIcon,
                "Localized description",
                Modifier.surface(
                        shape = CircleShape,
                        color = GlimmerTheme.colors.primary,
                        border = null,
                    )
                    .padding(12.dp),
            )
        }
    }
}
IconSamples.kt

উদাহরণ: বিভিন্ন আকারের আইকন

নিম্নলিখিত কোডটি বিভিন্ন আইকনের আকার প্রদর্শন করে:

@Composable
fun IconSizesSample() {
    val iconSizes = GlimmerTheme.iconSizes
    Column(
        verticalArrangement = Arrangement.spacedBy(20.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.small))
        // medium is also the default size, defining explicitly for clarity
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.medium))
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.large))
    }
}
IconSamples.kt

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

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