צ'יפ

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

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

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

משטח API

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

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

צ'יפ של מסייע

רכיב ה-Composable‏ 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. צ'יפ של 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
        },
    )
}
Chip.kt

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

צ'יפ סינון לא מסומן, ללא סימן וי ועם רקע פשוט.
איור 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)
            )
        },
    )
}
Chip.kt

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

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

הצעות קשורות

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

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

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

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

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

צ'יפ בולט

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

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