آیکون‌ها در Jetpack Compose Glimmer

دستگاه‌های XR قابل اجرا

این راهنما به شما کمک می‌کند تا برای این نوع دستگاه‌های XR تجربه ایجاد کنید.

درباره انواع دستگاه‌های XR اطلاعات کسب کنید →

درباره انواع دستگاه‌های XR اطلاعات کسب کنید →

در Jetpack Compose Glimmer، کامپوننت Icon یک عنصر رابط کاربری برای رندر کردن آیکون‌های تک رنگ است. آیکون‌ها به طور هوشمندانه رنگ‌آمیزی و مقیاس‌بندی را مدیریت می‌کنند تا خوانا و از نظر بصری با GlimmerTheme سازگار باقی بمانند.

اندازه‌ها

در حالی که آیکون‌ها به طور پیش‌فرض به اندازه‌ای که LocalIconSize ارائه می‌دهد، تنظیم می‌شوند، می‌توانید از سه اندازه آیکون ارائه شده برای تنظیم یک اندازه خاص نیز استفاده کنید. این اندازه‌ها به طور پیش‌فرض برای زمینه‌های زیر نیز استفاده می‌شوند:

منابع آیکون

آیکن‌ها می‌توانند ImageVector ، ImageBitmap یا Painter به عنوان منبع خود بپذیرند. هنگام تعریف آیکن‌های خود، در صورت امکان ImageVector استفاده کنید تا رندرینگ واضحی را در هر مقیاسی روی عینک‌های نمایشگر ارائه دهید.

رنگ و رنگ‌آمیزی

• رنگ خودکار : آیکون رنگ خود را بر اساس LocalContentColor LocalContentColor شده توسط سطح والد، مانند یک surface یا Button ، تعیین می‌کند.
• رنگ‌آمیزی دستی : از پارامتر 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 است. از این اندازه‌ها به جای مقادیر ثابت در کدنویسی استفاده کنید تا هماهنگی در رابط کاربری شما حفظ شود.
• contentDescription بومی‌سازی‌شده‌ای برای آیکون ارائه می‌دهد. همیشه این توضیحات را ارائه دهید، مگر اینکه آیکون صرفاً تزئینی باشد.