תגים

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

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

פלטפורמת API

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

• content: התוכן שאפשר ליצור ממנו BadgedBox. בדרך כלל Icon.
• badge: הרכיב הניתן ליצירה שמופיע בתור התג מעל התוכן. בדרך כלל, ה-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. זהו הסמל שמעליו מופיע התג. במקרה הזה, זהו סמל של אימייל.

כך זה נראה:

דוגמה מפורטת

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

@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 של מקום התוכן ב-Badge מופיע בתוך התג. במקרה הזה, מוצג מספר הפריטים בעגלת הקניות.

היישום הזה נראה כך:

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

• חומר 3 – תגים
• BadgedBox
• Badge