צ'יפ

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

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

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

ממשק API

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

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

צ'יפ מסייע

הרכיב הניתן לקישור AssistChip מספק דרך פשוטה ליצור צ'יפ עזרה שמעודד את המשתמש לפעול בכיוון מסוים. אחת מהתכונות הבולטות של הצ'יפ היא הפרמטר 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)
            )
        }
    )
}
Chip.kt

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

צ'יפ עזרה פשוט.
איור 2. צ'יפ Assist.

סמל מסנן שהוחל

כדי להשתמש ברכיב ה-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
        },
    )
}
Chip.kt

כשהאפשרות הזו לא מסומנת, היא נראית כך:

צ'יפ מסנן לא נבחר, ללא סימון ועם רקע של תוכנית.
איור 3. צ'יפ מסנן שלא נבחר.

כשבוחרים בה, היא מוצגת כך:

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

צ'יפ קלט

אפשר להשתמש ברכיב ה-composable 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)
            )
        },
    )
}
Chip.kt

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

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

הצעות קשורות

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

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

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

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

צ'יפ עזרה פשוט.
איור 6. צ'יפ Assist.

צ'יפ בולט

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

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