תגים

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

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

פלטפורמת ה-API

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

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

דוגמה בסיסית

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

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

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

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

כך זה נראה:

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

דוגמה מפורטת

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

@Composable
fun BadgeInteractiveExample() {
    var itemCount by remember { mutableIntStateOf(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")
        }
    }
}

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

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

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

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

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