साथ काम करने वाले पैनल का लेआउट बनाएं

सहायक पैनल का लेआउट, उपयोगकर्ता का ध्यान ऐप्लिकेशन के मुख्य कॉन्टेंट पर बनाए रखता है. साथ ही, ज़रूरी जानकारी भी दिखाता है. उदाहरण के लिए, मुख्य पैनल में किसी फ़िल्म की जानकारी दिख सकती है, जबकि सहायक पैनल में मिलती-जुलती फ़िल्में, एक ही निर्देशक की फ़िल्में या एक ही कलाकार की फ़िल्में दिख सकती हैं.

ज़्यादा जानकारी के लिए, Material 3 के साथ काम करने वाले पैनल के लिए दिशा-निर्देश देखें.

NavigableSupportingPaneScaffold की मदद से, सहायक पैनल लागू करना

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

सहायक पैनल स्कैफ़ोल्ड में ज़्यादा से ज़्यादा तीन पैनल हो सकते हैं:

  • मुख्य पैनल: इसमें मुख्य कॉन्टेंट दिखता है.
  • सहायक पैनल: इसमें मुख्य पैनल से जुड़ी ज़्यादा जानकारी या टूल मिलते हैं.
  • अतिरिक्त पैनल (ज़रूरी नहीं): इसका इस्तेमाल, ज़रूरत पड़ने पर अतिरिक्त कॉन्टेंट के लिए किया जाता है.

स्कैफ़ोल्ड, विंडो के साइज़ के हिसाब से अडजस्ट होता है:

  • बड़ी विंडो में, मुख्य और सहायक पैनल एक साथ दिखते हैं.

  • छोटी विंडो में, एक बार में सिर्फ़ एक पैनल दिखता है. उपयोगकर्ताओं के नेविगेट करने पर, पैनल स्विच हो जाता है.

    मुख्य कॉन्टेंट, ज़्यादातर डिसप्ले में होता है. साथ ही, उसमें सहायक कॉन्टेंट भी होता है.
    पहली इमेज. पैनल लेआउट का इस्तेमाल किया जा सकता है.

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

NavigableSupportingPaneScaffold, Material 3 के अडैप्टिव लेआउट की लाइब्रेरी का हिस्सा है.

अपने ऐप्लिकेशन या मॉड्यूल की build.gradle फ़ाइल में, इन तीन मिलती-जुलती डिपेंडेंसी जोड़ें:

Kotlin

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

Groovy

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

  • अडैप्टिव: HingeInfo और Posture जैसे लो-लेवल बिल्डिंग ब्लॉक

  • adaptive-layout: अडैप्टिव लेआउट, जैसे कि ListDetailPaneScaffold और SupportingPaneScaffold

  • adaptive-navigation: पैनल के अंदर और उनके बीच नेविगेट करने के लिए कॉम्पोज़ेबल. साथ ही, ऐसे अडैप्टिव लेआउट जो डिफ़ॉल्ट रूप से नेविगेशन की सुविधा देते हैं, जैसे कि NavigableListDetailPaneScaffold और NavigableSupportingPaneScaffold

पक्का करें कि आपके प्रोजेक्ट में compose-material3-adaptive version 1.1.0-beta1 या इसके बाद का वर्शन शामिल हो.

'पीछे जाने पर झलक दिखाने वाला हाथ का जेस्चर' सुविधा के लिए ऑप्ट-इन करना

Android 15 या उससे पहले के वर्शन में, प्रिडिक्टिव बैक ऐनिमेशन चालू करने के लिए, आपको प्रिडिक्टिव बैक जेस्चर के लिए ऑप्ट-इन करना होगा. ऑप्ट-इन करने के लिए, अपनी AndroidManifest.xml फ़ाइल में <application> टैग या अलग-अलग <activity> टैग में android:enableOnBackInvokedCallback="true" जोड़ें.

जब आपका ऐप्लिकेशन Android 16 (एपीआई लेवल 36) या उसके बाद के वर्शन को टारगेट करता है, तो अनुमानित तरीके से वापस जाने की सुविधा डिफ़ॉल्ट रूप से चालू हो जाती है.

नेविगेटर बनाना

छोटी विंडो में, एक बार में सिर्फ़ एक पैनल दिखता है. इसलिए, पैनल के बीच स्विच करने के लिए, ThreePaneScaffoldNavigator का इस्तेमाल करें. rememberSupportingPaneScaffoldNavigator की मदद से, नेविगेटर का एक इंस्टेंस बनाएं.

val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator()
val scope = rememberCoroutineScope()

SampleSupportingPaneScaffold.kt

नेविगेटर को स्कैफ़ोल्ड को पास करना

स्कैफ़ोल्ड के लिए ThreePaneScaffoldNavigator की ज़रूरत होती है. यह एक इंटरफ़ेस होता है, जो स्कैफ़ोल्ड की स्थिति, ThreePaneScaffoldValue, और PaneScaffoldDirective को दिखाता है.

NavigableSupportingPaneScaffold(
    navigator = scaffoldNavigator,
    mainPane = { /*...*/ },
    supportingPane = { /*...*/ },
)
SampleSupportingPaneScaffold.kt

मुख्य पैनल और सहायक पैनल, कॉम्पोज़ेबल होते हैं. इनमें आपका कॉन्टेंट होता है. नेविगेट करते समय पैनल के लिए डिफ़ॉल्ट ऐनिमेशन लागू करने के लिए, AnimatedPane का इस्तेमाल करें. स्caf़ولد वैल्यू का इस्तेमाल करके देखें कि सहायक पैनल छिपा है या नहीं. अगर ऐसा है, तो सहायक पैनल दिखाने के लिए, navigateTo(SupportingPaneScaffoldRole.Supporting) को कॉल करने वाला बटन दिखाएं.

यहां स्कैफ़ोल्ड को पूरी तरह से लागू करने का तरीका बताया गया है:

val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator()
val scope = rememberCoroutineScope()

NavigableSupportingPaneScaffold(
    navigator = scaffoldNavigator,
    mainPane = {
        AnimatedPane(
            modifier = Modifier
                .safeContentPadding()
                .background(Color.Red)
        ) {
            if (scaffoldNavigator.scaffoldValue[SupportingPaneScaffoldRole.Supporting] == PaneAdaptedValue.Hidden) {
                Button(
                    modifier = Modifier
                        .wrapContentSize(),
                    onClick = {
                        scope.launch {
                            scaffoldNavigator.navigateTo(SupportingPaneScaffoldRole.Supporting)
                        }
                    }
                ) {
                    Text("Show supporting pane")
                }
            } else {
                Text("Supporting pane is shown")
            }
        }
    },
    supportingPane = {
        AnimatedPane(modifier = Modifier.safeContentPadding()) {
            Text("Supporting pane")
        }
    }
)
SampleSupportingPaneScaffold.kt

पैनल के कॉम्पोनेंट निकालना

SupportingPaneScaffold के अलग-अलग पैनल को उनके अलग-अलग कॉम्पोज़ेबल में निकालें, ताकि उन्हें फिर से इस्तेमाल किया जा सके और उनकी जांच की जा सके. अगर आपको डिफ़ॉल्ट ऐनिमेशन चाहिए, तो AnimatedPane को ऐक्सेस करने के लिए ThreePaneScaffoldScope का इस्तेमाल करें:

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun ThreePaneScaffoldPaneScope.MainPane(
    shouldShowSupportingPaneButton: Boolean,
    onNavigateToSupportingPane: () -> Unit,
    modifier: Modifier = Modifier,
) {
    AnimatedPane(
        modifier = modifier.safeContentPadding()
    ) {
        // Main pane content
        if (shouldShowSupportingPaneButton) {
            Button(onClick = onNavigateToSupportingPane) {
                Text("Show supporting pane")
            }
        } else {
            Text("Supporting pane is shown")
        }
    }
}

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun ThreePaneScaffoldPaneScope.SupportingPane(
    modifier: Modifier = Modifier,
) {
    AnimatedPane(modifier = modifier.safeContentPadding()) {
        // Supporting pane content
        Text("This is the supporting pane")
    }
}
SampleSupportingPaneScaffold.kt

पैनल को कॉम्पोज़ेबल में बदलने से, SupportingPaneScaffold का इस्तेमाल करना आसान हो जाता है. इसकी तुलना, पिछले सेक्शन में बताए गए स्कैफ़ोल्ड को पूरी तरह से लागू करने से करें:

val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator()
val scope = rememberCoroutineScope()

NavigableSupportingPaneScaffold(
    navigator = scaffoldNavigator,
    mainPane = {
        MainPane(
            shouldShowSupportingPaneButton = scaffoldNavigator.scaffoldValue.secondary == PaneAdaptedValue.Hidden,
            onNavigateToSupportingPane = {
                scope.launch {
                    scaffoldNavigator.navigateTo(ThreePaneScaffoldRole.Secondary)
                }
            }
        )
    },
    supportingPane = { SupportingPane() },
)
SampleSupportingPaneScaffold.kt

अगर आपको स्कैफ़ोल्ड के कुछ खास पहलुओं पर ज़्यादा कंट्रोल चाहिए, तो NavigableSupportingPaneScaffold के बजाय SupportingPaneScaffold का इस्तेमाल करें. यह PaneScaffoldDirective और ThreePaneScaffoldValue या ThreePaneScaffoldState को अलग-अलग स्वीकार करता है. इस सुविधा की मदद से, पैनल के बीच के स्पेस के लिए कस्टम लॉजिक लागू किया जा सकता है. साथ ही, यह तय किया जा सकता है कि एक साथ कितने पैनल दिखाए जाएं. ThreePaneScaffoldPredictiveBackHandler जोड़कर, अनुमानित तौर पर वापस जाने की सुविधा भी चालू की जा सकती है.

ThreePaneScaffoldPredictiveBackHandler जोड़ें

प्रिडिक्टिव बैक हैंडलर अटैच करें, जो स्कैफ़ोल्ड नेविगेटर इंस्टेंस लेता है और backBehavior की जानकारी देता है. इससे यह तय होता है कि बैक नेविगेशन के दौरान, डेस्टिनेशन को बैकस्टैक से कैसे पॉप किया जाता है. इसके बाद, scaffoldDirective और scaffoldState को SupportingPaneScaffold पर पास करें. scaffoldNavigator.scaffoldState को पास करते हुए, ThreePaneScaffoldState को स्वीकार करने वाले ओवरलोड का इस्तेमाल करें.

SupportingPaneScaffold में मुख्य और सहायक पैनल तय करें. पैनल के डिफ़ॉल्ट ऐनिमेशन के लिए, AnimatedPane का इस्तेमाल करें.

यह तरीका अपनाने के बाद, आपका कोड कुछ ऐसा दिखेगा:

val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator()
val scope = rememberCoroutineScope()

ThreePaneScaffoldPredictiveBackHandler(
    navigator = scaffoldNavigator,
    backBehavior = BackNavigationBehavior.PopUntilScaffoldValueChange
)

SupportingPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    mainPane = {
        MainPane(
            shouldShowSupportingPaneButton = scaffoldNavigator.scaffoldValue.secondary == PaneAdaptedValue.Hidden,
            onNavigateToSupportingPane = {
                scope.launch {
                    scaffoldNavigator.navigateTo(ThreePaneScaffoldRole.Secondary)
                }
            }
        )
    },
    supportingPane = { SupportingPane() },
)
SampleSupportingPaneScaffold.kt

पीछे जाएं
लिस्ट की जानकारी वाला लेआउट बनाना
आगे बढ़ें
अडैप्टिव क्या करें और क्या न करें