כרטיסים ב-Jetpack Compose Glimmer

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

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

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

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

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

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

אנטומיה ומיקומי מודעות

כרטיס Glimmer ב-Jetpack Compose מורכב מכמה רכיבים מיוחדים שמאפשרים לכם להתאים אישית את התוכן והפריסה שלו.

הגדרות ברירת המחדל של הכרטיס

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

• רוחב: הכרטיסים ממלאים את הרוחב הזמין המקסימלי של התצוגה כדי לשפר את הקריאות במשקפיים.
• גובה מינימלי: 80.dp
• הרווח האנכי בין שורות הטקסט: 3.dp
• צורה של כותרת: שימוש ב-RoundedCornerShape עם פינות 24.dp
• שוליים פנימיים של התוכן: ברירת המחדל היא GlimmerTheme.componentSpacingValues.medium. ההגדרה הזו משפיעה על השוליים החיצוניים מסביב לתמונות הכותרת ולמאגר התוכן.
• צורה: ברירת המחדל היא GlimmerTheme.shapes.medium.

• ‫Text rendering (עיבוד טקסט): משתמש בערכי ברירת המחדל מ-GlimmerTheme.typography עבור המשבצות הבאות:

  • שם: bodyMedium
  • כותרת משנה: caption
  • תוכן ראשי: bodySmall

דוגמה: כרטיס בסיסי

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

Card { Text("This is a card") }
CardSamples.kt

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

בדוגמת הקוד הבאה אפשר לראות איך משתמשים בכמה משבצות יחד כדי ליצור כרטיס:

Card(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    trailingIcon = { Icon(BookmarkIcon, contentDescription = "Bookmark") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
) {
    Text("This is a complete card")
}
CardSamples.kt

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

• המדריך מראה איך להשתמש ברכיבים שונים של כרטיסים, כמו title,‏ subtitle ו-leadingIcon, כדי להתאים אישית את התוכן והמבנה של הכרטיס.
• משתמש בעומס יתר של Card עם onClick כדי להפוך את כל משטח הכרטיס לאינטראקטיבי.

כרטיסי פעולה

אם רוצים להוסיף כפתור פעולה לכרטיס, משתמשים בתג ActionCard. כרטיסי פעולה כוללים את אותם אלמנטים כמו כרטיסים רגילים, וגם פרמטר נוסף action שמגדיר את הלחצן התחתון.

דוגמה: כרטיס פעולה בסיסי

הקוד הזה מראה איך ליצור ActionCard:

ActionCard(
    action = {
        Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
            Text("Send")
        }
    }
) {
    Text("This is a card with a title, leading icon, header image, and action")
}
CardSamples.kt

דוגמה: כרטיס פעולה עם סמל

בדוגמת הקוד הזו אפשר לראות איך ליצור ActionCard מורכב יותר עם סמלים:

ActionCard(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
    action = {
        Button(onClick = { /* Handle action */ }) {
            Text("Action")
        }
    }
) {
    Text(
        "This is the main body content of the card, utilizing theme-tokens for consistent styling.",
        style = GlimmerTheme.typography.bodyMedium
    )
}
CardSamples.kt