खोज बार

खोज की सुविधा लागू करने के लिए, खोज बार का इस्तेमाल करें. खोज बार, खोज का एक ऐसा फ़ील्ड होता है जो हमेशा दिखता रहता है. इसकी मदद से, उपयोगकर्ता कोई कीवर्ड या वाक्यांश डालकर, आपके ऐप्लिकेशन में काम के नतीजे देख सकते हैं. अगर आपके ऐप्लिकेशन का मुख्य फ़ोकस खोज की सुविधा है, तो खोज बार का इस्तेमाल करने का सुझाव दिया जाता है.

दो खोज बार दिखाए गए हैं. बाईं ओर मौजूद फ़ॉर्म में सिर्फ़ एक टेक्स्ट फ़ील्ड है.
  बाईं ओर मौजूद खोज बार में एक टेक्स्ट फ़ील्ड है. इसके नीचे, खोज के लिए सुझाव दिया गया है.
पहली इमेज. एक सामान्य खोज बार (1) और सुझाव दिखाने वाला खोज बार (2).

एपीआई सरफ़ेस

खोज बार लागू करने के लिए, SearchBar कंपोज़ेबल का इस्तेमाल करें. इस कंपोज़ेबल के मुख्य पैरामीटर में ये शामिल हैं:

  • 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()
                    )
                }
            }
        }
    }
}

कोड के बारे में अहम बातें

  • rememberSaveable से यह पक्का होता है कि कॉन्फ़िगरेशन में होने वाले बदलावों के दौरान, खोज बार बड़ा या छोटा किया गया है या नहीं, यह जानकारी सेव रहे. कॉन्फ़िगरेशन में होने वाले बदलाव के दौरान, ऐक्टिविटी के खत्म होने से पहले, यह याद रखी गई वैल्यू को होस्ट करने वाली ऐक्टिविटी के savedInstanceState बंडल में लिखता है.
  • semantics मॉडिफ़ायर, TalkBack के ट्रैवर्सल ऑर्डर को कंट्रोल करता है.
    • Box के लिए, isTraversalGroup सेट किया जाता है, ताकि इसके सभी चाइल्ड कंपोज़ेबल को ग्रुप किया जा सके.
    • traversalIndex सेट किया जाता है, ताकि यह तय किया जा सके कि TalkBack, हर ग्रुप पीयर से ऐक्सेसबिility की जानकारी किस क्रम में पढ़ेगा. TalkBack, पॉज़िटिव वैल्यू वाले पीयर से पहले, नेगेटिव वैल्यू वाले पीयर की ऐक्सेसबिility की जानकारी पढ़ता है. जैसे, 1 से पहले -1. वैल्यू फ़्लोट होने की वजह से, हर पीयर पर -1.0 और 1.0 के बीच वैल्यू सेट करके, कई पीयर के लिए कस्टम ऑर्डर तय किया जा सकता है.
  • SearchBar में, उपयोगकर्ता के इनपुट के लिए inputField और खोज के सुझाव दिखाने के लिए Column to display search suggestions शामिल होता है.
    • SearchBarDefaults.InputField , इनपुट फ़ील्ड बनाता है और उपयोगकर्ता की क्वेरी में होने वाले बदलावों को मैनेज करता है.
    • onQueryChange , टेक्स्ट इनपुट को मैनेज करता है और इनपुट फ़ील्ड में टेक्स्ट बदलने पर, स्टेटस को अपडेट करता है.
    • The expanded स्टेटस, सुझावों की सूची की विज़िबिलिटी को कंट्रोल करता है.
  • searchResults.forEach { result -> … } searchResults सूची के ज़रिए इटरेट करता है और हर नतीजे के लिए ListItem बनाता है.
    • जब ListItem पर क्लिक किया जाता है, तो यह textFieldState को अपडेट करता है, खोज बार को छोटा करता है, और चुने गए खोज नतीजे से textField को भरता है.

नतीजा

खोज बार में &#39;a&#39; टाइप किया गया है. खोज बार के नीचे, खोज के छह सुझावों वाली सूची दिखाई गई है.
दूसरी इमेज. सुझाव दिखाने वाला खोज बार.

फ़िल्टर की गई सूची दिखाने वाला खोज बार

इस उदाहरण में, SearchBar दिखाया गया है. यह उपयोगकर्ता की खोज क्वेरी के आधार पर, सूची को फ़िल्टर करता है:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomizableSearchBar(
    query: String,
    onQueryChange: (String) -> Unit,
    onSearch: (String) -> Unit,
    searchResults: List<String>,
    onResultClick: (String) -> Unit,
    modifier: Modifier = Modifier,
    // 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,
) {
    // 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)
                    )
                }
            }
        }
    }
}

कोड के बारे में अहम बातें

  • जब भी उपयोगकर्ता खोज बार में टेक्स्ट टाइप करता है या मिटाता है, तब onQueryChange Lambda फ़ंक्शन कॉल किया जाता है.
  • SearchBarDefaults.InputField में leadingIcon शामिल होता है. इससे इनपुट फ़ील्ड की शुरुआत में खोज का आइकॉन जुड़ जाता है. साथ ही, इसमें trailingIcon भी शामिल होता है. इससे इनपुट फ़ील्ड के आखिर में "ज़्यादा विकल्प" आइकॉन जुड़ जाता है. यहां, उपयोगकर्ता को सॉर्ट करने और फ़िल्टर करने के विकल्प दिए जा सकते हैं.
  • onSearch = { … } calls the onSearch lambda and collapses the search bar when the search is submitted.
  • LazyColumn, खोज के संभावित तौर पर ज़्यादा नतीजों को असरदार तरीके से मैनेज करता है. यह searchResults सूची के ज़रिए इटरेट करता है और हर नतीजे को ListItem के तौर पर दिखाता है.
  • हर ListItem कंपोज़ेबल, आइटम टेक्स्ट, अतिरिक्त जानकारी दिखाने वाला टेक्स्ट, और स्टार आइकॉन को आइटम के leadingContent के तौर पर दिखाता है. इस उदाहरण में, आइटम को पसंदीदा के तौर पर सेव करने का विकल्प दिखाया गया है.
  • फ़िल्टर करने की लॉजिक के लिए, CustomizableSearchBarExample GitHub पर पूरे सोर्स कोड में देखें.

नतीजा

इस इमेज में, खोज बार दिखाया गया है. इसमें &#39;खोज बार में मौजूद टेक्स्ट खोजें&#39; लिखा है. खोज बार के नीचे, खोज के लिए सुझावों की एक सूची दिखती है. हर सुझाव के बगल में स्टार का आइकॉन होता है.
तीसरी इमेज. काम के सुझाव दिखाने वाला खोज बार.

अन्य संसाधन