ב-Jetpack Compose Glimmer, הרכיב Icon הוא רכיב בממשק המשתמש שמשמש לעיבוד סמלים בצבע אחיד. הסמלים מטפלים בצביעה ובשינוי הגודל בצורה חכמה, כך שהם יישארו קריאים ועקביים מבחינה ויזואלית עם GlimmerTheme.
גדלים
גודל הסמלים מוגדר כברירת מחדל לפי הגודל שמוגדר על ידי LocalIconSize, אבל אפשר גם להשתמש בשלושת הגדלים של הסמלים שמופיעים כדי להגדיר גודל ספציפי. הגדלים האלה משמשים כברירת מחדל גם בהקשרים הבאים:
| טוקן גודל | שימוש ברירת מחדל |
|---|---|
|
לפריטים רגילים ברשימה או לצ'יפים קטנים. |
|
לסמלים עצמאיים ולצ'יפים של כותרות. |
|
לרכיבים שרוצים להדגיש כמו כרטיסים. |
מקורות לסמלים
המקור של הסמלים יכול להיות 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שעבר לוקליזציה לסמל. תמיד צריך לספק את התיאורים האלה, אלא אם הסמל הוא לקישוט בלבד.