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

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

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

माइग्रेशन के चरण

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 के कॉन्टेंट में, स्क्रीन का मुख्य कॉन्टेंट जोड़ें. ऊपर दिए गए XML में मुख्य कॉन्टेंट 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 की ओर से उपलब्ध कराए गए अन्य कॉन्टेंट स्लॉट का इस्तेमाल करके, स्क्रीन पर ज़्यादा एलिमेंट जोड़ें. साथ ही, बच्चों के लिए बने वीडियो के बचे हुए व्यू माइग्रेट करें. topBar स्लॉट का इस्तेमाल करके TopAppBar जोड़ा जा सकता है. साथ ही, 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 का इस्तेमाल किया जाता है. इसके बाद, layout_behavior के ज़रिए, एक्सएमएल में Behavior तय किया जा सकता है. इससे यह तय किया जा सकता है कि स्क्रोल करने पर, टूलबार कैसे छोटा/बड़ा होगा. इसके लिए, स्क्रोल किए जा सकने वाले व्यू (जैसे, RecyclerView या NestedScrollView) का इस्तेमाल किया जाता है.

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

1. TopAppBarDefaults.enterAlwaysScrollBehavior() को कॉल करके, TopAppBarScrollBehavior बनाएं.
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 भी बनाया जा सकता है. साथ ही, कॉन्टेंट स्क्रोल होने पर टूलबार को मैन्युअल तरीके से ऑफ़सेट किया जा सकता है. कोड के उदाहरण के लिए, AOSP पर नेस्ट किए गए स्क्रोल का सैंपल देखें.

दराज़

व्यू की मदद से, रूट व्यू के तौर पर 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.
• Sunflower को Jetpack Compose पर माइग्रेट करना: यह एक ब्लॉग पोस्ट है. इसमें Sunflower सैंपल ऐप्लिकेशन को Views से Compose पर माइग्रेट करने की प्रोसेस के बारे में बताया गया है. इस ऐप्लिकेशन में CoordinatorLayout शामिल है.