תגים

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

  • התראות: הצגת מספר ההתראות שלא נקראו בסמל של אפליקציה או בסמל של פעמון ההתראות.
  • הודעות: מציינות הודעות חדשות או הודעות שלא נקראו באפליקציית צ'אט.
  • עדכוני סטטוס: הצגת הסטטוס של משימה, כמו 'הושלמה', 'בתהליך' או 'נכשלה'.
  • כמות בעגלת הקניות: הצגת מספר הפריטים בעגלת הקניות של המשתמש.
  • תוכן חדש: הדגשה של תוכן או תכונות חדשים שזמינים למשתמש.
דוגמה נוספת לרכיב התג.
איור 1. דוגמאות לתגים

משטח API

אפשר להשתמש ב-composable‏ BadgedBox כדי להטמיע תגים באפליקציה. בסופו של דבר, מדובר במאגר. אתם קובעים את המראה שלו באמצעות שני הפרמטרים העיקריים האלה:

  • ‫content: התוכן שניתן להרכבה שהמאפיין BadgedBox מכיל. בדרך כלל Icon.
  • ‫badge: רכיב ה-Composable שמופיע כתווית מעל התוכן. בדרך כלל, רכיב ה-Composable הייעודי Badge.

דוגמה בסיסית

בקטע הקוד הזה מוצגת הטמעה בסיסית של BadgedBox:

@Composable
fun BadgeExample() {
    BadgedBox(
        badge = {
            Badge()
        }
    ) {
        Icon(
            imageVector = Icons.Filled.Mail,
            contentDescription = "Email"
        )
    }
}
Badges.kt

בדוגמה הזו מוצג תג שחופף לקומפוזבל Icon שסופק. כמה נקודות חשובות לגבי הקוד:

  • ‫BadgedBox משמש כמאגר הכולל.
  • הארגומנט של הפרמטר badge של BadgedBox הוא Badge. מכיוון של-Badge אין ארגומנטים משלה, האפליקציה מציגה את התג ברירת המחדל, שהוא עיגול אדום קטן.
  • ‫Icon משמש כארגומנט לפרמטר content של BadgedBox. זה הסמל שמעליו מופיע התג. במקרה הזה, זהו סמל של אימייל.

כך זה נראה:

תג פשוט שלא מכיל תוכן.
איור 2. הטמעה מינימלית של התג.

דוגמה מפורטת

בדוגמה הבאה אפשר לראות איך להציג ערכים בתג שמשתנים בהתאם לפעולות של המשתמש.

@Composable
fun BadgeInteractiveExample() {
    var itemCount by remember { mutableStateOf(0) }

    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        BadgedBox(
            badge = {
                if (itemCount > 0) {
                    Badge(
                        containerColor = Color.Red,
                        contentColor = Color.White
                    ) {
                        Text("$itemCount")
                    }
                }
            }
        ) {
            Icon(
                imageVector = Icons.Filled.ShoppingCart,
                contentDescription = "Shopping cart",
            )
        }
        Button(onClick = { itemCount++ }) {
            Text("Add item")
        }
    }
}
Badges.kt

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

  • הסמל BadgedBox מוצג רק אם מספר הפריטים גדול מ-0.
  • הארגומנטים של containerColor ו-contentColor קובעים את המראה של התג.
  • רכיב ה-Text composable של משבצת התוכן Badge מופיע בתוך התג. במקרה הזה, מוצג מספר הפריטים בעגלת הקניות.

ההטמעה הזו נראית כך:

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

מקורות מידע נוספים