ऐप्लिकेशन के सबसे ऊपर डाइनैमिक बार बनाना

इस गाइड में, Compose में डाइनैमिक टॉप ऐप्लिकेशन बार बनाने का तरीका बताया गया है. यह बार, सूची से आइटम चुने जाने पर अपने विकल्पों को बदलता है. चुने गए आइटम की स्थिति के आधार पर, सबसे ऊपर मौजूद ऐप्लिकेशन बार के टाइटल और कार्रवाइयों में बदलाव किया जा सकता है.

डाइनैमिक टॉप ऐप्लिकेशन बार के काम करने का तरीका लागू करना

इस कोड से, टॉप ऐप्लिकेशन बार के लिए एक ऐसा कंपोज़ेबल फ़ंक्शन तय होता है जो आइटम के चुने जाने के आधार पर बदलता है:

@Composable
fun AppBarSelectionActions(
    selectedItems: Set<Int>,
    modifier: Modifier = Modifier,
) {
    val hasSelection = selectedItems.isNotEmpty()
    val topBarText = if (hasSelection) {
        "Selected ${selectedItems.size} items"
    } else {
        "List of items"
    }

    TopAppBar(
        title = {
            Text(topBarText)
        },
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.primaryContainer,
            titleContentColor = MaterialTheme.colorScheme.primary,
        ),
        actions = {
            if (hasSelection) {
                IconButton(onClick = {
                    /* click action */
                }) {
                    Icon(
                        imageVector = Icons.Filled.Share,
                        contentDescription = "Share items"
                    )
                }
            }
        },
        modifier = modifier
    )
}

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

  • AppBarSelectionActions, चुने गए आइटम इंडेक्स की Set को स्वीकार करता है.
  • topBarText में बदलाव इस बात पर निर्भर करता है कि आपने कोई आइटम चुना है या नहीं.
    • आइटम चुनने पर, चुने गए आइटम की संख्या बताने वाला टेक्स्ट TopAppBar में दिखता है.
    • अगर आपने कोई आइटम नहीं चुना है, तो topBarText "आइटम की सूची" होगी.
  • actions ब्लॉक से यह तय होता है कि ऐप्लिकेशन बार में सबसे ऊपर कौनसी कार्रवाइयां दिखेंगी. अगर hasSelection की वैल्यू true है, तो टेक्स्ट के बाद शेयर आइकॉन दिखता है.
  • IconButton का onClick लैम्ब्डा, आइकॉन पर क्लिक करने पर शेयर करने की कार्रवाई को मैनेज करता है.

नतीजा

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

चुनी जा सकने वाली सूची को डाइनैमिक टॉप ऐप्लिकेशन बार में इंटिग्रेट करना

इस उदाहरण में, डाइनैमिक टॉप ऐप्लिकेशन बार में चुनी जा सकने वाली सूची जोड़ने का तरीका बताया गया है:

@Composable
private fun AppBarMultiSelectionExample(
    modifier: Modifier = Modifier,
) {
    val listItems by remember { mutableStateOf(listOf(1, 2, 3, 4, 5, 6)) }
    var selectedItems by rememberSaveable { mutableStateOf(setOf<Int>()) }

    Scaffold(
        modifier = modifier,
        topBar = { AppBarSelectionActions(selectedItems) }
    ) { innerPadding ->
        LazyColumn(contentPadding = innerPadding) {
            itemsIndexed(listItems) { _, index ->
                val isItemSelected = selectedItems.contains(index)
                ListItemSelectable(
                    selected = isItemSelected,
                    Modifier
                        .combinedClickable(
                            interactionSource = remember { MutableInteractionSource() },
                            indication = null,
                            onClick = {
                                /* click action */
                            },
                            onLongClick = {
                                if (isItemSelected) selectedItems -= index else selectedItems += index
                            }
                        )
                )
            }
        }
    }
}

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

  • आपने सूची में कितने आइटम चुने हैं, इसके आधार पर सबसे ऊपर मौजूद बार अपडेट होता है.
  • selectedItems में, चुने गए आइटम के इंडेक्स का सेट होता है.
  • AppBarMultiSelectionExample, स्क्रीन को स्ट्रक्चर करने के लिए Scaffold का इस्तेमाल करता है.
    • topBar = { AppBarSelectionActions(selectedItems) }, AppBarSelectionActions कंपोज़ेबल को टॉप ऐप्लिकेशन बार के तौर पर सेट करता है. AppBarSelectionActions को selectedItems स्थिति मिलती है.
  • LazyColumn, आइटम को वर्टिकल सूची में दिखाता है. इसमें सिर्फ़ स्क्रीन पर दिखने वाले आइटम रेंडर होते हैं.
  • ListItemSelectable से, सूची में मौजूद ऐसे आइटम का पता चलता है जिसे चुना जा सकता है.
    • combinedClickable की मदद से, आइटम चुनने के लिए क्लिक और देर तक क्लिक करने, दोनों को हैंडल किया जा सकता है. क्लिक करने पर कोई कार्रवाई होती है, जबकि किसी आइटम पर देर तक क्लिक करने से, उसके चुने जाने की स्थिति टॉगल होती है.

नतीजा

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

अन्य संसाधन