סרגל החיפוש

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

מוצגים שני סרגלי חיפוש. בצד ימין יש רק שדה טקסט. בסרגל החיפוש שמימין יש שדה טקסט והצעה לחיפוש מתחתיו.
איור 1. סרגל חיפוש בסיסי (1) וסרגל חיפוש עם הצעה (2).

משטח API

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

  • ‫inputField: הגדרת שדה הקלט של סרגל החיפוש. בדרך כלל נעשה שימוש ב-SearchBarDefaults.InputField, שמאפשרת התאמה אישית של:
    • ‫query: טקסט השאילתה שיוצג בשדה הקלט.
    • ‫onQueryChange: פונקציית Lambda לטיפול בשינויים במחרוזת השאילתה.
  • ‫expanded: ערך בוליאני שמציין אם סרגל החיפוש מורחב כדי להציג הצעות או תוצאות מסוננות.

  • ‫onExpandedChange: פונקציית Lambda לטיפול בשינויים במצב המורחב של התפריט הנפתח.

  • ‫content: התוכן של סרגל החיפוש הזה שיוצגו מתחתיו תוצאות חיפוש של inputField.

בקטע הקוד הזה מוצגת הטמעה בסיסית של SearchBar עם הצעות:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SimpleSearchBar(
    textFieldState: TextFieldState,
    onSearch: (String) -> Unit,
    searchResults: List<String>,
    modifier: Modifier = Modifier
) {
    // Controls expansion state of the search bar
    var expanded by rememberSaveable { mutableStateOf(false) }

    Box(
        modifier
            .fillMaxSize()
            .semantics { isTraversalGroup = true }
    ) {
        SearchBar(
            modifier = Modifier
                .align(Alignment.TopCenter)
                .semantics { traversalIndex = 0f },
            inputField = {
                SearchBarDefaults.InputField(
                    query = textFieldState.text.toString(),
                    onQueryChange = { textFieldState.edit { replace(0, length, it) } },
                    onSearch = {
                        onSearch(textFieldState.text.toString())
                        expanded = false
                    },
                    expanded = expanded,
                    onExpandedChange = { expanded = it },
                    placeholder = { Text("Search") }
                )
            },
            expanded = expanded,
            onExpandedChange = { expanded = it },
        ) {
            // Display search results in a scrollable column
            Column(Modifier.verticalScroll(rememberScrollState())) {
                searchResults.forEach { result ->
                    ListItem(
                        headlineContent = { Text(result) },
                        modifier = Modifier
                            .clickable {
                                textFieldState.edit { replace(0, length, result) }
                                expanded = false
                            }
                            .fillMaxWidth()
                    )
                }
            }
        }
    }
}
SearchBar.kt

נקודות עיקריות לגבי הקוד

  • ‫rememberSaveable מוודא שהמצב של סרגל החיפוש (מורחב או מכווץ) נשמר גם אחרי שינויים בהגדרות. הערך שנשמר נכתב לחבילת savedInstanceState של Activity המארח לפני ש-Activity מושמד במהלך שינוי בהגדרות.
  • מקש הצירוף semantics שולט בסדר המעבר ב-TalkBack.
    • ההגדרה isTraversalGroup מוגדרת ל-Box כדי לקבץ את כל רכיבי ה-Composable ברמת הצאצא.
    • המאפיין traversalIndex מוגדר כדי לציין את הסדר שבו TalkBack קורא מידע על נגישות מכל קבוצת עמיתים. ‫TalkBack קורא מידע על נגישות של עמית עם ערך שלילי, כמו -1, לפני עמית עם ערך חיובי, כמו 1. מכיוון שהערך הוא מספר עשרוני, אפשר להגדיר סדר מותאם אישית של הרבה עמיתים על ידי הגדרת ערכים בין -1.0 ל-1.0 בכל עמית.
  • האלמנט SearchBar מכיל inputField לקלט של משתמשים ו-Column להצגת הצעות לחיפוש.
    • ‫SearchBarDefaults.InputField יוצר את שדה הקלט ומטפל בשינויים בשאילתת המשתמש.
    • הרכיב onQueryChange מטפל בקלט הטקסט ומעדכן את המצב בכל פעם שהטקסט בשדה הקלט משתנה.
    • המצב של The expanded קובע את החשיפה של רשימת ההצעות.
  • ‫searchResults.forEach { result -> … } חוזר על הפעולה ברשימה searchResults ויוצר ListItem לכל תוצאה.
    • כשלוחצים על ListItem, המערכת מעדכנת את textFieldState, מכווצת את סרגל החיפוש וממלאת את textField בתוצאת החיפוש שנבחרה.

התוצאה

סרגל חיפוש עם האות a בתוכו. מתחת לסרגל החיפוש מוצגת רשימה עם שש הצעות לחיפוש.
איור 2. סרגל חיפוש עם הצעות.

סרגל חיפוש עם רשימה מסוננת

בדוגמה הזו מוצג SearchBar שמסנן רשימה על סמך שאילתת החיפוש של המשתמש:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomizableSearchBar(
    query: String,
    onQueryChange: (String) -> Unit,
    onSearch: (String) -> Unit,
    searchResults: List<String>,
    onResultClick: (String) -> Unit,
    // Customization options
    placeholder: @Composable () -> Unit = { Text("Search") },
    leadingIcon: @Composable (() -> Unit)? = { Icon(Icons.Default.Search, contentDescription = "Search") },
    trailingIcon: @Composable (() -> Unit)? = null,
    supportingContent: (@Composable (String) -> Unit)? = null,
    leadingContent: (@Composable () -> Unit)? = null,
    modifier: Modifier = Modifier
) {
    // Track expanded state of search bar
    var expanded by rememberSaveable { mutableStateOf(false) }

    Box(
        modifier
            .fillMaxSize()
            .semantics { isTraversalGroup = true }
    ) {
        SearchBar(
            modifier = Modifier
                .align(Alignment.TopCenter)
                .semantics { traversalIndex = 0f },
            inputField = {
                // Customizable input field implementation
                SearchBarDefaults.InputField(
                    query = query,
                    onQueryChange = onQueryChange,
                    onSearch = {
                        onSearch(query)
                        expanded = false
                    },
                    expanded = expanded,
                    onExpandedChange = { expanded = it },
                    placeholder = placeholder,
                    leadingIcon = leadingIcon,
                    trailingIcon = trailingIcon
                )
            },
            expanded = expanded,
            onExpandedChange = { expanded = it },
        ) {
            // Show search results in a lazy column for better performance
            LazyColumn {
                items(count = searchResults.size) { index ->
                    val resultText = searchResults[index]
                    ListItem(
                        headlineContent = { Text(resultText) },
                        supportingContent = supportingContent?.let { { it(resultText) } },
                        leadingContent = leadingContent,
                        colors = ListItemDefaults.colors(containerColor = Color.Transparent),
                        modifier = Modifier
                            .clickable {
                                onResultClick(resultText)
                                expanded = false
                            }
                            .fillMaxWidth()
                            .padding(horizontal = 16.dp, vertical = 4.dp)
                    )
                }
            }
        }
    }
}
SearchBar.kt

נקודות עיקריות לגבי הקוד

  • הפונקציה onQueryChange lambda נקראת בכל פעם שהמשתמש מקליד או מוחק טקסט בסרגל החיפוש.
  • ‫SearchBarDefaults.InputField מכיל את התג leadingIcon, שמוסיף סמל חיפוש לתחילת שדה הקלט, ואת התג trailingIcon, שמוסיף סמל של 'אפשרויות נוספות' לסוף שדה הקלט. כאן אפשר לספק למשתמש אפשרויות מיון וסינון.
  • ‫onSearch = { … } קורא ל-onSearch lambda ומכווץ את סרגל החיפוש כששולחים את החיפוש.
  • LazyColumn מטפל ביעילות במספר גדול של תוצאות חיפוש. הפונקציה מבצעת איטרציה ברשימה searchResults ומציגה כל תוצאה כ-ListItem.
  • כל קומפוזבילי ListItem מציג את הטקסט של הפריט, טקסט שמציג מידע נוסף וסמל כוכב בתור leadingContent של הפריט. בדוגמה הזו, מוצגת אפשרות להוסיף את הפריט למועדפים.
  • לוגיקת הסינון מפורטת ב-CustomizableSearchBarExample בקוד המקור המלא ב-GitHub.

התוצאה

מוצגת תיבת חיפוש עם המילים &#39;חיפוש טקסט עם רמזים&#39;. מתחת לסרגל החיפוש מוצגת רשימה של הצעות לחיפוש, ולצד כל הצעה מופיע סמל כוכב.
איור 3. סרגל חיפוש עם הצעות רלוונטיות.

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