סמלים ב-Jetpack Compose Glimmer

מכשירי XR שמתאימים לשימוש

ההנחיות האלה יעזרו לכם ליצור חוויות למכשירי XR מהסוגים הבאים.

מידע על סוגי מכשירי XR →

מידע על סוגי מכשירי XR →

ב-Jetpack Compose Glimmer, הרכיב Icon הוא רכיב בממשק המשתמש שמשמש לעיבוד סמלים בצבע אחיד. הסמלים מטפלים בצביעה ובשינוי הגודל בצורה חכמה, כך שהם יישארו קריאים ועקביים מבחינה ויזואלית עם GlimmerTheme.

גדלים

גודל הסמלים מוגדר כברירת מחדל לגודל שמוגדר על ידי LocalIconSize, אבל אפשר גם להשתמש בשלושת גדלי הסמלים שמוגדרים כדי להגדיר גודל ספציפי. הגדלים האלה משמשים כברירת מחדל גם בהקשרים הבאים:

מקורות לסמלים

הסמלים יכולים לקבל ImageVector, ImageBitmap או Painter כמקור שלהם. כשמגדירים סמלים משלכם, כדאי להשתמש ב-ImageVector כדי לקדם עיבוד חד בכל קנה מידה במשקפיים עם תצוגה.

צבע וגוון

• גוון אוטומטי: צבע הסמל נקבע על סמך LocalContentColor שסופק על ידי משטח האב, כמו surface או Button.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. כדי לשמור על עקביות בממשק המשתמש, כדאי להשתמש במידות האלה במקום להזין ערכים קשיחים.
• מספק תיאור שעבר לוקליזציה contentDescription לכל סמל. תמיד צריך לספק את התיאורים האלה, אלא אם הסמל הוא לקישוט בלבד.