כרטיסים ב-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

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

הקוד הבא יוצר כרטיס בסיסי:

@Composable
fun CardSample() {
    Card { Text("This is a card") }
}
CardSamples.kt

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

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

@Composable
fun CardWithTitleAndLeadingIconAndHeaderAndAction() {
    Card(
        action = {
            Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
                Text("Send")
            }
        },
        title = { Text("Title") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        header = {
            Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
        },
    ) {
        Text("This is a card with a title, leading icon, header image, and action")
    }
}
CardSamples.kt

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

• המאמר מראה איך להשתמש ברכיבים שונים של כרטיסים, כמו header,‏ title,‏ leadingIcon וaction, כדי להתאים אישית את התוכן והמבנה של הכרטיס.
• משתמש בעומס יתר של Card עם פעולה, כי רק הכרטיס (או הפעולה הפנימית שלו) צריך להיות ניתן למיקוד. אם רוצים להפוך את כל הכרטיס לאינטראקטיבי, צריך להשתמש ב-overload של Card עם onClick.
• בכרטיס הזה נעשה שימוש במשבצת פעולה, ולכן אי אפשר להתמקד ברקע של הכרטיס, והמיקוד מועבר ללחצן הפעולה.