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

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

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

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

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

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

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

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

अन्य संसाधन

Material Design के दिशा-निर्देश देखें:

• नेविगेशन बार
• नेविगेशन रेल
• नेविगेशन पैनल

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

• NavigationBar
• NavigationRail
• ModalNavigationDrawer
• PermanentNavigationDrawer