अडैप्टिव नेविगेशन बनाएं

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

NavigationSuiteScaffold स्विच करने की प्रक्रिया को आसान बना देता है नेविगेशन यूज़र इंटरफ़ेस (यूआई) के बीच स्विच करने के लिए, सही नेविगेशन यूज़र इंटरफ़ेस (यूआई) कंपोज़ेबल दिखाकर WindowSizeClass के आधार पर. इसमें डाइनैमिक तरीके से शामिल रनटाइम विंडो का साइज़ बदलने के दौरान, यूज़र इंटरफ़ेस (यूआई) बदलना. डिफ़ॉल्ट व्यवहार यह है इनमें से कोई एक यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट दिखाएं:

  • नेविगेशन बार अगर चौड़ाई या ऊंचाई छोटी है या डिवाइस टेबलटॉप पॉस्चर
  • बाकी सभी चीज़ों के लिए नेविगेशन रेल
पहली इमेज. NavigationSuiteScaffold, कॉम्पैक्ट विंडो में नेविगेशन बार दिखाता है.
दूसरी इमेज. NavigationSuiteScaffold, बड़ी की गई विंडो में एक नेविगेशन रेल दिखाता है.

डिपेंडेंसी जोड़ें

NavigationSuiteScaffold इसमें शामिल है: Material3 के अडैप्टिव नेविगेशन सुइट लाइब्रेरी. अपने ऐप्लिकेशन की build.gradle फ़ाइल में, लाइब्रेरी के लिए डिपेंडेंसी जोड़ें या मॉड्यूल:

Kotlin


implementation("androidx.compose.material3:material3-adaptive-navigation-suite")

ग्रूवी


implementation 'androidx.compose.material3:material3-adaptive-navigation-suite'

स्कैफ़ोल्ड बनाएं

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

enum class AppDestinations(
    @StringRes val label: Int,
    val icon: ImageVector,
    @StringRes val contentDescription: Int
) {
    HOME(R.string.home, Icons.Default.Home, R.string.home),
    FAVORITES(R.string.favorites, Icons.Default.Favorite, R.string.favorites),
    SHOPPING(R.string.shopping, Icons.Default.ShoppingCart, R.string.shopping),
    PROFILE(R.string.profile, Icons.Default.AccountBox, R.string.profile),
}
SampleNavigationSuiteScaffold.kt

NavigationSuiteScaffold का इस्तेमाल करने के लिए, आपको मौजूदा डेस्टिनेशन को ट्रैक करना होगा, जो तो rememberSaveable का इस्तेमाल करके यह काम किया जा सकता है:

var currentDestination by rememberSaveable { mutableStateOf(AppDestinations.HOME) }
SampleNavigationSuiteScaffold.kt

नीचे दिए गए उदाहरण में, navigationSuiteItems पैरामीटर (type NavigationSuiteScope अपने item फ़ंक्शन का इस्तेमाल करता है का इस्तेमाल करें. गंतव्य यूज़र इंटरफ़ेस (यूआई) है इनका इस्तेमाल नेविगेशन बार, रेल, और पैनल में किया जाता है. नेविगेशन आइटम बनाने के लिए, अपने AppDestinations पर लूप करें (पिछले स्निपेट में बताया गया है):

NavigationSuiteScaffold(
    navigationSuiteItems = {
        AppDestinations.entries.forEach {
            item(
                icon = {
                    Icon(
                        it.icon,
                        contentDescription = stringResource(it.contentDescription)
                    )
                },
                label = { Text(stringResource(it.label)) },
                selected = it == currentDestination,
                onClick = { currentDestination = it }
            )
        }
    }
) {
    // TODO: Destination content.
}
SampleNavigationSuiteScaffold.kt

डेस्टिनेशन कॉन्टेंट lambda में, currentDestination वैल्यू का इस्तेमाल करके तय करें कि कौन-सा यूज़र इंटरफ़ेस (यूआई) दिखाना है. अगर आपके ऐप्लिकेशन में नेविगेशन लाइब्रेरी का इस्तेमाल किया जाता है, तो उसका इस्तेमाल करें यहां जाएं. एक स्टेटमेंट जब काफ़ी हो सकता है:

NavigationSuiteScaffold(
    navigationSuiteItems = { /*...*/ }
) {
    // Destination content.
    when (currentDestination) {
        AppDestinations.HOME -> HomeDestination()
        AppDestinations.FAVORITES -> FavoritesDestination()
        AppDestinations.SHOPPING -> ShoppingDestination()
        AppDestinations.PROFILE -> ProfileDestination()
    }
}
SampleNavigationSuiteScaffold.kt

रंग बदलें

NavigationSuiteScaffold, पूरे इलाके के लिए Surface बनाता है आम तौर पर, मचान की खिड़की पूरी तरह से भरी होती है. उसके सबसे ऊपर, स्कैफ़ोल्ड एक खास नेविगेशन यूज़र इंटरफ़ेस (यूआई) ड्रॉ करता है, जैसे कि NavigationBar. सरफ़ेस और नेविगेशन यूज़र इंटरफ़ेस (यूआई), दोनों में आपके ऐप्लिकेशन के थीम का इस्तेमाल किया जा सकता है, लेकिन थीम की वैल्यू को बदला जा सकता है.

containerColor पैरामीटर से सरफ़ेस का रंग पता चलता है. डिफ़ॉल्ट आपकी कलर स्कीम का बैकग्राउंड कलर है. contentColor पैरामीटर सरफ़ेस पर मौजूद कॉन्टेंट का रंग बताता है. डिफ़ॉल्ट सेटिंग "चालू है" पर सेट होती है रंग इनमें से जो भी containerColor के लिए तय किया गया है. उदाहरण के लिए, अगर containerColor background रंग का इस्तेमाल करता है. इसके बाद, contentColor onBackground रंग का इस्तेमाल करता है. Compose में मटीरियल डिज़ाइन 3 थीमिंग देखें देखें. इन वैल्यू को ओवरराइड करते समय, अपनी थीम में तय की गई वैल्यू का इस्तेमाल करें, ताकि आपका ऐप्लिकेशन गहरे और हल्के रंग के डिसप्ले के साथ काम करे मोड:

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    containerColor = MaterialTheme.colorScheme.primary,
    contentColor = MaterialTheme.colorScheme.onPrimary,
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

नेविगेशन यूज़र इंटरफ़ेस (यूआई), NavigationSuiteScaffold प्लैटफ़ॉर्म के सामने बनाया गया है. यूज़र इंटरफ़ेस (यूआई) के रंगों के लिए डिफ़ॉल्ट वैल्यू इसके ज़रिए दी जाती हैं NavigationSuiteDefaults.colors(), लेकिन आप साथ ही, इन वैल्यू को बदल सकते हैं. उदाहरण के लिए, अगर आपको बैकग्राउंड में जिसमें नेविगेशन बार को पारदर्शी रखा जाए, लेकिन अन्य वैल्यू को डिफ़ॉल्ट बनाया जाए, navigationBarContainerColor को ओवरराइड करें:

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    navigationSuiteColors = NavigationSuiteDefaults.colors(
        navigationBarContainerColor = Color.Transparent,
    )
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

कुल मिलाकर, नेविगेशन यूज़र इंटरफ़ेस (यूआई) में हर आइटम को पसंद के मुताबिक बनाया जा सकता है. item फ़ंक्शन है, तो आप एक बार में पास कर सकते हैं NavigationSuiteItemColors. क्लास तय करती है नेविगेशन बार, नेविगेशन रेल, और नेविगेशन में मौजूद आइटम के रंग दराज़. इसका मतलब है कि आपके हर तरह के नेविगेशन यूज़र इंटरफ़ेस (यूआई) में रंग एक जैसे हो सकते हैं, या फिर अपनी ज़रूरतों के हिसाब से रंग में बदलाव किया जा सकता है. यहां पर रंग परिभाषित करें सभी आइटम के लिए एक ही ऑब्जेक्ट इंस्टेंस का इस्तेमाल करने के लिए, NavigationSuiteScaffold लेवल और NavigationSuiteDefaults.itemColors() फ़ंक्शन को सिर्फ़ ओवरराइड करने के लिए कॉल करें इनमें बदलाव कर सकते हैं:

val myNavigationSuiteItemColors = NavigationSuiteDefaults.itemColors(
    navigationBarItemColors = NavigationBarItemDefaults.colors(
        indicatorColor = MaterialTheme.colorScheme.primaryContainer,
        selectedIconColor = MaterialTheme.colorScheme.onPrimaryContainer
    ),
)

NavigationSuiteScaffold(
    navigationSuiteItems = {
        AppDestinations.entries.forEach {
            item(
                icon = {
                    Icon(
                        it.icon,
                        contentDescription = stringResource(it.contentDescription)
                    )
                },
                label = { Text(stringResource(it.label)) },
                selected = it == currentDestination,
                onClick = { currentDestination = it },
                colors = myNavigationSuiteItemColors,
            )
        }
    },
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

नेविगेशन टाइप को पसंद के मुताबिक बनाएं

NavigationSuiteScaffold के डिफ़ॉल्ट तरीके से, नेविगेशन यूज़र इंटरफ़ेस (यूआई) बदलता है विंडो के साइज़ के आधार पर क्लास. हालांकि, आपको इस व्यवहार को ओवरराइड कर सकता है. उदाहरण के लिए, अगर आपका ऐप्लिकेशन फ़ीड के कॉन्टेंट का बड़ा पैनल होने पर, ऐप्लिकेशन स्थायी नेविगेशन का इस्तेमाल कर सकता है विस्तृत विंडो के लिए ड्रॉर लेकिन फिर भी छोटी और मीडियम साइज़ की विंडो:

val adaptiveInfo = currentWindowAdaptiveInfo()
val customNavSuiteType = with(adaptiveInfo) {
    if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.EXPANDED) {
        NavigationSuiteType.NavigationDrawer
    } else {
        NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(adaptiveInfo)
    }
}

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    layoutType = customNavSuiteType,
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

अन्य संसाधन

मटीरियल डिज़ाइन दिशा-निर्देश देखें:

यहां दिए गए androidx.compose.material3 लाइब्रेरी कॉम्पोनेंट देखें:

पीछे जाएं
मल्टी-विंडो मोड के साथ काम करता है
आगे बढ़ें
लिस्ट की जानकारी वाला लेआउट बनाना