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