खोज बार

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

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

एपीआई सरफ़ेस

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

  • inputField: इससे खोज बार के इनपुट फ़ील्ड के बारे में पता चलता है. आम तौर पर, इसमें SearchBarDefaults.InputField का इस्तेमाल किया जाता है. इसकी मदद से, इन्हें पसंद के मुताबिक बनाया जा सकता है:
    • query: इनपुट फ़ील्ड में दिखाया जाने वाला क्वेरी टेक्स्ट.
    • onQueryChange: क्वेरी स्ट्रिंग में होने वाले बदलावों को मैनेज करने के लिए Lambda.
  • expanded: यह बूलियन वैल्यू है. इससे पता चलता है कि खोज बार को बड़ा करके, सुझाव या फ़िल्टर किए गए नतीजे दिखाए जा रहे हैं या नहीं.

  • onExpandedChange: ड्रॉपडाउन के बड़े किए गए स्टेटस में होने वाले बदलावों को मैनेज करने के लिए लैम्ब्डा.

  • 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 के ट्रैवर्सल ऑर्डर को कंट्रोल करता है.
    • isTraversalGroup को Box के लिए सेट किया गया है, ताकि इसके सभी चाइल्ड कंपोज़ेबल को ग्रुप किया जा सके.
    • traversalIndex को उस क्रम को तय करने के लिए सेट किया गया है जिसमें TalkBack, ग्रुप के हर पीयर से सुलभता की जानकारी पढ़ता है. TalkBack, -1 जैसी नेगेटिव वैल्यू वाले पीयर पर सुलभता की जानकारी को 1 जैसी पॉज़िटिव वैल्यू वाले पीयर से पहले पढ़ता है. वैल्यू एक फ़्लोट है, इसलिए हर पीयर पर -1.0 और 1.0 के बीच की वैल्यू सेट करके, कई पीयर के लिए कस्टम ऑर्डर तय किया जा सकता है.
  • SearchBar में, उपयोगकर्ता के इनपुट के लिए एक inputField और खोज से जुड़े सुझाव दिखाने के लिए एक Column होता है.
    • SearchBarDefaults.InputField, इनपुट फ़ील्ड बनाता है और उपयोगकर्ता की क्वेरी में होने वाले बदलावों को मैनेज करता है.
    • onQueryChange, टेक्स्ट इनपुट को मैनेज करता है और इनपुट फ़ील्ड में टेक्स्ट बदलने पर, स्थिति को अपडेट करता है.
    • expanded की स्थिति से, सुझावों की सूची दिखने की सेटिंग को कंट्रोल किया जाता है.
  • searchResults.forEach { result -> … }, searchResults सूची में मौजूद हर आइटम पर कार्रवाई करता है और हर नतीजे के लिए एक ListItem बनाता है.
    • ListItem पर क्लिक करने से, textFieldState अपडेट हो जाता है, खोज बार छोटा हो जाता है, और textField में खोज के चुने गए नतीजे भर जाते हैं.

नतीजा

खोज बार में 'a' अक्षर टाइप किया हुआ दिख रहा है. खोज बार के नीचे, खोज से जुड़े छह सुझावों की सूची दिखती है.
दूसरी इमेज. सुझावों के साथ खोज बार दिखाया गया है.

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

इस उदाहरण में एक 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: @Compos>able (() - Unit)? = { Icon(Icons.Default.Search, contentDescription = "Search") },
    trailingIco>n: @Composable (() - Unit)? = null,
    supportingContent: (@C>omposable (String) - Unit)? = null,
    leadingConten>t: (@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 = searchRes>ults.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 लैम्डा फ़ंक्शन को कॉल किया जाता है.
  • SearchBarDefaults.InputField में एक leadingIcon शामिल है, जो इनपुट फ़ील्ड की शुरुआत में खोज आइकॉन जोड़ता है. साथ ही, इसमें एक trailingIcon शामिल है, जो इनपुट फ़ील्ड के आखिर में "ज़्यादा विकल्प" आइकॉन जोड़ता है. यहां उपयोगकर्ता को क्रम से लगाने और फ़िल्टर करने के विकल्प दिए जा सकते हैं.
  • onSearch = { … }, onSearch लैम्ब्डा को कॉल करता है और खोज सबमिट होने पर खोज बार को छोटा कर देता है.
  • LazyColumn, खोज के नतीजों की बड़ी संख्या को बेहतर तरीके से मैनेज करता है. यह searchResults सूची में मौजूद हर आइटम पर कार्रवाई को दोहराता है और हर नतीजे को ListItem के तौर पर दिखाता है.
  • हर ListItem कंपोज़ेबल, आइटम का टेक्स्ट, ज़्यादा जानकारी दिखाने वाला टेक्स्ट, और आइटम के leadingContent के तौर पर स्टार आइकॉन दिखाता है. इस उदाहरण में, आइटम को पसंदीदा के तौर पर मार्क करने का विकल्प दिखाया गया है.
  • फ़िल्टर करने के लॉजिक के लिए, GitHub पर मौजूद पूरे सोर्स कोड में CustomizableSearchBarExample देखें.

नतीजा

एक खोज बार दिखाया गया है. इसमें 'टेक्स्ट से खोजें' शब्द लिखे हैं. खोज बार के नीचे, खोज से जुड़े सुझावों की सूची दिखती है. हर सुझाव के बगल में स्टार आइकॉन होता है.
तीसरी इमेज. खोज बार में काम के सुझाव दिख रहे हैं.

अन्य संसाधन