סמלים ב-Jetpack Compose Glimmer

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

ב-Jetpack Compose Glimmer, הרכיב Icon מיועד במיוחד לעיבוד סמלים בצבע אחד. Icon יכול לקבל את ImageVector,‏ ImageBitmap או Painter כמקור. ‫Icon, בדומה ל-Text, יכול להחיל גוון בצורה חכמה על סמך עיצוב ממשק המשתמש שמסביב. הגודל שמוגדר כברירת מחדל הוא הגודל שמוגדר על ידי LocalIconSize, אבל אפשר גם להגדיר גדלים מותאמים אישית לסמלים.

דוגמה: יצירת תיבה עם סמל גדול של כוכב

@Composable
fun GlimmerIconSample() {
    GlimmerTheme {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_star),
                    contentDescription = "A star icon from Google Symbols",
                    modifier = Modifier.size(GlimmerTheme.iconSizes.large),
                    tint = GlimmerTheme.colors.primary
                )
            }
        }
    }
}

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

  • המקור של הסמל טוען וקטור מקומי של XML (R.drawable.ic_star) באמצעות painterResource. כך אפשר לראות את הגישה המומלצת לשילוב סמלים בממשק משתמש של Jetpack Compose Glimmer בלי להשתמש בספריות חיצוניות.
  • גודל הסמל מותאם אישית על ידי הגדרת GlimmerTheme.iconSizes.large עם משנה, כדי להראות איך לבטל את הגודל המוגדר מראש של Jetpack Compose Glimmer.
  • כדי להתאים אישית את גוון הצבע של הסמל, מגדירים את GlimmerTheme.colors.primary באמצעות הפרמטר tint, וכך יוצרים גוון צבע אחיד לסמל כדי לשמור על עקביות ויזואלית.