סמלים ב-Jetpack Compose Glimmer

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

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

גדלים

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

טוקן גודל שימוש ברירת מחדל

small

לפריטים רגילים ברשימה או לצ'יפים קטנים.

medium

לסמלים עצמאיים ולצ'יפים של כותרות.

large

לרכיבים שרוצים להדגיש כמו כרטיסים.

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

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

צבע וגוון

  • גוון אוטומטי: צבע הסמל נקבע על סמך LocalContentColorLocalContentColor שסופק על ידי משטח האב, כמו surface או Button.
  • הוספת גוון באופן ידני: משתמשים בפרמטר tint כדי להחיל צבע ספציפי.
  • נכסים עם כמה צבעים: אם רוצים להשתמש בסמלים שלא אמורים להיות מוצללים (כמו סמלי לוגו של מותגים עם כמה צבעים), צריך להגדיר את tint = Color.Unspecified.
  • תמונות גנריות: אם אתם משתמשים בתמונות גנריות או בתמונות שאינן עומדות בכללים לגבי גודל וגוון של סמלים, אתם צריכים להשתמש במקום זאת בandroidx.compose.foundation.Image הרגיל.

דוגמה: סמל בסיסי

הקוד הבא יוצר סמל בסיסי:

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

דוגמה: סמלים עם צבע

הקוד הבא יוצר סמל צבעוני באמצעות הצבע הראשי של ערכת הנושא:

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

דוגמה: סמלים בגדלים שונים

הקוד הבא יוצר סמל שמשתנה לגודל מסוים:

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

מידע חשוב על הקוד

  • הגודל של הסמל מותאם אישית באמצעות GlimmerTheme.iconSizes עם משנה. עבור סמלים, ערך ברירת המחדל הוא GlimmerTheme.iconSizes.medium. כדי לשמור על עקביות בממשק המשתמש, כדאי להשתמש במידות האלה במקום להגדיר ערכים קשיחים.
  • התג הזה מספק contentDescription שעבר לוקליזציה לסמל. תמיד צריך לספק את התיאורים האלה, אלא אם הסמל הוא לקישוט בלבד.