CoordenatorLayout को Compose में माइग्रेट करें

CoordinatorLayout एक ViewGroup है, जो मुश्किल, ओवरलैप होने वाले, और नेस्ट किए गए लेआउट को चालू करता है. इसका इस्तेमाल कंटेनर के तौर पर किया जाता है, ताकि इसमें मौजूद व्यू के लिए, मटीरियल डिज़ाइन के कुछ इंटरैक्शन चालू किए जा सकें. जैसे, टूलबार और बॉटम शीट को बड़ा/छोटा करना.

Compose में, CoordinatorLayout के सबसे करीब Scaffold है. Scaffold, कॉन्टेंट स्लॉट उपलब्ध कराता है, ताकि मटीरियल कॉम्पोनेंट को सामान्य स्क्रीन पैटर्न और इंटरैक्शन में जोड़ा जा सके. इस पेज पर बताया गया है कि Compose में Scaffold का इस्तेमाल करने के लिए, CoordinatorLayout को कैसे माइग्रेट किया जा सकता है.

माइग्रेट करने का तरीका

CoordinatorLayout को Scaffold पर माइग्रेट करने के लिए, यह तरीका अपनाएं:

1. नीचे दिए गए स्निपेट में, CoordinatorLayout में एक AppBarLayout शामिल है. इसमें ToolBar, ViewPager, और FloatingActionButton शामिल हैं. यूज़र इंटरफ़ेस (यूआई) की हैरारकी से CoordinatorLayout और उसके चाइल्ड एलिमेंट को टिप्पणी के तौर पर मार्क करें. इसके बाद, इसे बदलने के लिए ComposeView जोड़ें.

   ```xml

   <!-- AppBarLayout contents here -->
   

   ```

2. अपने फ़्रैगमेंट या ऐक्टिविटी में, अभी-अभी जोड़े गए ComposeView का रेफ़रंस पाएं और उस पर setContent तरीके को कॉल करें. मेथड की बॉडी में, Scaffold को इसके कॉन्टेंट के तौर पर सेट करें:

   composeView.setContent {
       Scaffold(Modifier.fillMaxSize()) { contentPadding ->
           // Scaffold contents
           // ...
       }
   }
   MigrationCommonScenariosSnippets.kt

3. Scaffold के कॉन्टेंट में, अपनी स्क्रीन का मुख्य कॉन्टेंट जोड़ें. ऊपर दिए गए एक्सएमएल में मुख्य कॉन्टेंट ViewPager2 है. इसलिए, हम HorizontalPager का इस्तेमाल करेंगे, जो Compose में इसके बराबर है. Scaffold का content लैम्डा, PaddingValues का एक इंस्टेंस भी हासिल करता है. इसे कॉन्टेंट रूट पर लागू किया जाना चाहिए. Modifier.padding का इस्तेमाल करके, HorizontalPager पर भी वही PaddingValues लागू किया जा सकता है.

   composeView.setContent {
       Scaffold(Modifier.fillMaxSize()) { contentPadding ->
           val pagerState = rememberPagerState {
               10
           }
           HorizontalPager(
               state = pagerState,
               modifier = Modifier.padding(contentPadding)
           ) { /* Page contents */ }
       }
   }
   MigrationCommonScenariosSnippets.kt

4. स्क्रीन पर ज़्यादा एलिमेंट जोड़ने और बाकी चाइल्ड व्यू को माइग्रेट करने के लिए, Scaffold के अन्य कॉन्टेंट स्लॉट इस्तेमाल करें. TopAppBar जोड़ने के लिए, topBar स्लॉट का इस्तेमाल किया जा सकता है. साथ ही, FloatingActionButton जोड़ने के लिए, floatingActionButton स्लॉट का इस्तेमाल किया जा सकता है.

   composeView.setContent {
       Scaffold(
           Modifier.fillMaxSize(),
           topBar = {
               TopAppBar(
                   title = {
                       Text("My App")
                   }
               )
           },
           floatingActionButton = {
               FloatingActionButton(
                   onClick = { /* Handle click */ }
               ) {
                   Icon(
                       Icons.Filled.Add,
                       contentDescription = "Add Button"
                   )
               }
           }
       ) { contentPadding ->
           val pagerState = rememberPagerState {
               10
           }
           HorizontalPager(
               state = pagerState,
               modifier = Modifier.padding(contentPadding)
           ) { /* Page contents */ }
       }
   }
   MigrationCommonScenariosSnippets.kt

इस्तेमाल के सामान्य उदाहरण

टूलबार को छोटा और बड़ा करना

व्यू सिस्टम में, CoordinatorLayout की मदद से टूलबार को छोटा और बड़ा करने के लिए, AppBarLayout को टूलबार के कंटेनर के तौर पर इस्तेमाल किया जाता है. इसके बाद, स्क्रोल किए जा सकने वाले व्यू (जैसे, RecyclerView या NestedScrollView) पर एक्सएमएल में layout_behavior के ज़रिए Behavior की वैल्यू तय की जा सकती है. इससे यह तय किया जा सकता है कि स्क्रोल करने पर टूलबार कैसे छोटा/बड़ा हो.

Compose में, TopAppBarScrollBehavior का इस्तेमाल करके ऐसा ही असर पाया जा सकता है. उदाहरण के लिए, छोटा/बड़ा होने वाला टूलबार लागू करने के लिए, ताकि ऊपर की ओर स्क्रोल करने पर टूलबार दिखे, यह तरीका अपनाएं:

1. TopAppBarScrollBehavior बनाने के लिए, TopAppBarDefaults.enterAlwaysScrollBehavior() को कॉल करें.
2. बनाए गए TopAppBarScrollBehavior को TopAppBar को दें.

3. Scaffold पर Modifier.nestedScroll की मदद से NestedScrollConnection को कनेक्ट करें, ताकि स्क्रोल किए जा सकने वाले कॉन्टेंट को ऊपर/नीचे स्क्रोल करने पर, Scaffold को नेस्ट किए गए स्क्रोल इवेंट मिल सकें. इस तरह, कॉन्टेंट स्क्रोल होने पर, ऐप्लिकेशन बार सही तरीके से छोटा/बड़ा हो सकता है.

   // 1. Create the TopAppBarScrollBehavior
   val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
   
   Scaffold(
       topBar = {
           TopAppBar(
               title = {
                   Text("My App")
               },
               // 2. Provide scrollBehavior to TopAppBar
               scrollBehavior = scrollBehavior
           )
       },
       // 3. Connect the scrollBehavior.nestedScrollConnection to the Scaffold
       modifier = Modifier
           .fillMaxSize()
           .nestedScroll(scrollBehavior.nestedScrollConnection)
   ) { contentPadding ->
       /* Contents */
       // ...
   }
   MigrationCommonScenariosSnippets.kt

स्क्रोल करने पर, छोटा/बड़ा होने वाले इफ़ेक्ट को पसंद के मुताबिक बनाना

enterAlwaysScrollBehavior के लिए कई पैरामीटर दिए जा सकते हैं, ताकि छोटा/बड़ा करने वाले ऐनिमेशन इफ़ेक्ट को पसंद के मुताबिक बनाया जा सके. TopAppBarDefaults में अन्य TopAppBarScrollBehavior भी उपलब्ध हैं. जैसे, exitUntilCollapsedScrollBehavior. इससे ऐप्लिकेशन बार सिर्फ़ तब बड़ा होता है, जब कॉन्टेंट को पूरा नीचे तक स्क्रोल किया जाता है.

पूरी तरह से कस्टम इफ़ेक्ट (उदाहरण के लिए, पैरालैक्स इफ़ेक्ट) बनाने के लिए, अपना NestedScrollConnection भी बनाया जा सकता है. साथ ही, कॉन्टेंट के स्क्रोल होने पर टूलबार को मैन्युअल तरीके से ऑफ़सेट किया जा सकता है. कोड का उदाहरण देखने के लिए, एओएसपी पर नेस्टेड स्क्रोल का सैंपल देखें.

ड्रॉर

व्यू की मदद से, नेविगेशन पैनल को लागू किया जाता है. इसके लिए, रूट व्यू के तौर पर DrawerLayout का इस्तेमाल किया जाता है. वहीं, आपका CoordinatorLayout, DrawerLayout का चाइल्ड व्यू है. DrawerLayout में एक और चाइल्ड व्यू भी होता है, जैसे कि NavigationView. इसका इस्तेमाल, ड्रॉअर में नेविगेशन के विकल्प दिखाने के लिए किया जाता है.

Compose में, ModalNavigationDrawer कंपोज़ेबल का इस्तेमाल करके नेविगेशन पैनल लागू किया जा सकता है. ModalNavigationDrawer, ड्रॉअर के लिए drawerContent स्लॉट और स्क्रीन के कॉन्टेंट के लिए content स्लॉट उपलब्ध कराता है.

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            HorizontalDivider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    Scaffold(Modifier.fillMaxSize()) { contentPadding ->
        // Scaffold content
        // ...
    }
}
MigrationCommonScenariosSnippets.kt

ज़्यादा जानने के लिए, ड्रॉअर देखें.

स्नैकबार

Scaffold, snackbarHost स्लॉट उपलब्ध कराता है. इसमें SnackbarHost कंपोज़ेबल को स्वीकार किया जा सकता है, ताकि Snackbar को दिखाया जा सके.

val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show snackbar") },
            icon = { Icon(Icons.Filled.Image, contentDescription = "") },
            onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar("Snackbar")
                }
            }
        )
    }
) { contentPadding ->
    // Screen content
    // ...
}
MigrationCommonScenariosSnippets.kt

ज़्यादा जानने के लिए, स्नैकबार देखें.

ज़्यादा जानें

CoordinatorLayout को Compose पर माइग्रेट करने के बारे में ज़्यादा जानने के लिए, ये लेख पढ़ें:

• मटीरियल कॉम्पोनेंट और लेआउट: Compose में इस्तेमाल किए जा सकने वाले मटीरियल डिज़ाइन कॉम्पोनेंट के बारे में दस्तावेज़, जैसे कि Scaffold.
• सनफ़्लॉवर को Jetpack Compose पर माइग्रेट करना: यह एक ब्‍लॉग पोस्‍ट है, जिसमें सनफ़्लॉवर सैंपल के तौर पर मिले ऐप्लिकेशन को व्यू से Compose पर माइग्रेट करने की प्रोसेस के बारे में बताया गया है. इसमें एक CoordinatorLayout शामिल है.