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

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

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

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

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

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

Kotlin

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

Groovy

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),
}

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

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

यहां दिए गए उदाहरण में, navigationSuiteItems पैरामीटर (टाइप 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.
}

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

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

रंग बदलें

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

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

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

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

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

आखिर में, नेविगेशन यूज़र इंटरफ़ेस (यूआई) में हर आइटम को पसंद के मुताबिक बनाया जा सकता है. 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...
}

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

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

val adaptiveInfo = currentWindowAdaptiveInfo()
val customNavSuiteType = with(adaptiveInfo) {
    if (windowSizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_EXPANDED_LOWER_BOUND)) {
        NavigationSuiteType.NavigationDrawer
    } else {
        NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(adaptiveInfo)
    }
}

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

अन्य संसाधन