צ'יפ

הרכיב 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 הבסיסיים עם מראה שטוח. אם רוצים צ'יפ עם מראה גבוה, אפשר להשתמש באחד משלושת התכנים הקומפוזביליים הבאים:

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