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

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

सहायता पैनल लागू करना

SupportingPaneScaffold में ज़्यादा से ज़्यादा तीन पैनल होते हैं: मुख्य पैनल, सहायक पैनल, और अतिरिक्त पैनल. स्कैफ़ोल्ड में तीन पैनलों को खिड़की की जगह देने के लिए सभी हिसाब लगाए जा सकते हैं. बड़ी स्क्रीन पर, स्caf़ولد मुख्य पैनल के साथ-साथ साइड में सहायक पैनल दिखाता है. छोटी स्क्रीन पर, स्कैफ़ोल्ड मुख्य या सहायक पैनल को फ़ुल स्क्रीन में दिखाता है.

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

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

SupportingPaneScaffold, 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 — अडैप्टिव लेआउट, जैसे कि SupportingPaneScaffold
  • ज़रूरत के हिसाब से नेविगेशन — पैनल के अंदर और उनके बीच नेविगेट करने के लिए कंपोज़ेबल

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

छोटी विंडो में, एक बार में सिर्फ़ एक पैनल दिखता है. इसलिए, पैनल के बीच स्विच करने के लिए, ThreePaneScaffoldNavigator का इस्तेमाल करें. rememberSupportingPaneScaffoldNavigator की मदद से नेविगेटर का एक इंस्टेंस बनाएं. 'वापस जाएं' जेस्चर को मैनेज करने के लिए, BackHandler का इस्तेमाल करें. यह canNavigateBack() की जांच करता है और navigateBack() को कॉल करता है:

val navigator = rememberSupportingPaneScaffoldNavigator()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}
SampleSupportingPaneScaffold.kt

स्कैफ़ोल्ड के लिए PaneScaffoldDirective की ज़रूरत होती है. इससे यह कंट्रोल होता है कि स्क्रीन को कैसे बांटना है और कितना स्पेस इस्तेमाल करना है. साथ ही, ThreePaneScaffoldValue से पैनल की मौजूदा स्थिति के बारे में पता चलता है. जैसे, वे बड़े किए गए हैं या छिपाए गए हैं. डिफ़ॉल्ट व्यवहार के लिए, नेविगेटर के scaffoldDirective और scaffoldValue का इस्तेमाल करें:

SupportingPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    mainPane = { /*...*/ },
    supportingPane = { /*...*/ },
)
SampleSupportingPaneScaffold.kt

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

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

val navigator = rememberSupportingPaneScaffoldNavigator()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}

SupportingPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    mainPane = {
        AnimatedPane(modifier = Modifier.safeContentPadding()) {
            // Main pane content
            if (navigator.scaffoldValue[SupportingPaneScaffoldRole.Supporting] == PaneAdaptedValue.Hidden) {
                Button(
                    modifier = Modifier.wrapContentSize(),
                    onClick = {
                        navigator.navigateTo(SupportingPaneScaffoldRole.Supporting)
                    }
                ) {
                    Text("Show supporting pane")
                }
            } else {
                Text("Supporting pane is shown")
            }
        }
    },
    supportingPane = {
        AnimatedPane(modifier = Modifier.safeContentPadding()) {
            // Supporting pane content
            Text("Supporting pane")
        }
    },
)
SampleSupportingPaneScaffold.kt

पैनल के कॉम्पोज़ेबल निकालना

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

@Composable
fun ThreePaneScaffoldScope.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")
        }
    }
}

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

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

val navigator = rememberSupportingPaneScaffoldNavigator()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}

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

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