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

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

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 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 पैरामीटर (टाइप 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

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

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

रंग बदलें

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

containerColor पैरामीटर, प्लैटफ़ॉर्म का रंग बताता है. डिफ़ॉल्ट रूप से, आपकी कलर स्कीम का बैकग्राउंड रंग दिखता है. contentColor पैरामीटर, उस प्लैटफ़ॉर्म पर मौजूद कॉन्टेंट का रंग बताता है. डिफ़ॉल्ट रूप से, containerColor के लिए जो भी रंग तय किया गया है वह "चालू" रंग होता है. उदाहरण के लिए, अगर containerColor के लिए background रंग का इस्तेमाल किया जाता है, तो contentColor के लिए onBackground रंग का इस्तेमाल किया जाता है. कलर सिस्टम के काम करने के तरीके के बारे में ज़्यादा जानने के लिए, Compose में Material Design 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

अन्य संसाधन

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