צ'יפ

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

אלה ארבעת סוגי הצ'יפים והמקומות שבהם אפשר להשתמש בהם:

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

פלטפורמת ה-API

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

  • ‫label: המחרוזת שמופיעה על הצ'יפ.
  • ‫icon: הסמל שמוצג בתחילת הצ'יפ. לחלק מהקומפוזבילים הספציפיים יש פרמטרים נפרדים של leadingIcon ושל trailingIcon.
  • ‫onClick: פונקציית ה-lambda שהצ'יפ מפעיל כשהמשתמש לוחץ עליו.

צ'יפ של Assist

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

@Composable
fun AssistChipExample() {
    AssistChip(
        onClick = { Log.d("Assist chip", "hello world") },
        label = { Text("Assist chip") },
        leadingIcon = {
            Icon(
                Icons.Filled.Settings,
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}

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

צ'יפ פשוט של עזרה שמציג סמל מוביל ותווית טקסט.
איור 2. צ'יפ של Assistant.

סמל מסנן

רכיב ה-Composable‏ FilterChip מחייב מעקב אחרי מצב הצ'יפ – אם הוא נבחר או לא. בדוגמה הבאה אפשר לראות איך להציג סמל מוביל עם סימן וי רק כשהמשתמש בוחר את הצ'יפ:

@Composable
fun FilterChipExample() {
    var selected by remember { mutableStateOf(false) }

    FilterChip(
        onClick = { selected = !selected },
        label = {
            Text("Filter chip")
        },
        selected = selected,
        leadingIcon = if (selected) {
            {
                Icon(
                    imageVector = Icons.Filled.Done,
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        },
    )
}

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

סמל מסנן לא מסומן, ללא סימן וי ועם רקע פשוט.
איור 3. סמל מסנן לא מסומן.

וכך היא נראית כשבוחרים בה:

סמל מסנן שנבחר, עם סימן וי ורקע צבעוני.
איור 4. סמל מסנן שנבחר.

צ'יפ קלט

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

בדוגמה הבאה מוצג צ'יפ קלט שכבר נמצא במצב נבחר. המשתמש לוחץ על הצ'יפ כדי לסגור אותו.

@Composable
fun InputChipExample(
    text: String,
    onDismiss: () -> Unit,
) {
    var enabled by remember { mutableStateOf(true) }
    if (!enabled) return

    InputChip(
        onClick = {
            onDismiss()
            enabled = !enabled
        },
        label = { Text(text) },
        selected = enabled,
        avatar = {
            Icon(
                Icons.Filled.Person,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                Icons.Default.Close,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
    )
}

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

צ'יפ קלט עם אווטאר וסמל בסוף.
איור 5. צ'יפ קלט.

הצעות קשורות

רכיב ה-Composable‏ SuggestionChip הוא הבסיסי ביותר מבין רכיבי ה-Composable שמופיעים בדף הזה, גם בהגדרת ה-API שלו וגם בתרחישי השימוש הנפוצים שלו. הצעות בצורת צ'יפים מציגות רמזים שנוצרו באופן דינמי. לדוגמה, באפליקציית צ'אט מבוססת-AI, אפשר להשתמש בצ'יפים של הצעות כדי להציג תשובות אפשריות להודעה האחרונה.

כדאי לעיין בהטמעה הזו של SuggestionChip:

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}

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

צ'יפ הצעות קשורות.
איור 6. הצעה קשורה.

צ'יפ מובלט

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

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