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

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

Compose में, CoordinatorLayout की सबसे करीबी मिलती-जुलती वैल्यू Scaffold. Scaffold में मटीरियल को आपस में मिलाने के लिए, कॉन्टेंट स्लॉट मिलते हैं सामान्य स्क्रीन पैटर्न और इंटरैक्शन में शामिल कॉम्पोनेंट. इस पेज पर बताया गया है कि Compose में Scaffold का इस्तेमाल करने के लिए, CoordinatorLayout को कैसे माइग्रेट किया जा सकता है.

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

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

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

   <!--  <androidx.coordinatorlayout.widget.CoordinatorLayout-->
   <!--      android:id="@+id/coordinator_layout"-->
   <!--      android:layout_width="match_parent"-->
   <!--      android:layout_height="match_parent"-->
   <!--      android:fitsSystemWindows="true">-->
   
   <!--    <androidx.compose.ui.platform.ComposeView-->
   <!--        android:id="@+id/compose_view"-->
   <!--        android:layout_width="match_parent"-->
   <!--        android:layout_height="match_parent"-->
   <!--        app:layout_behavior="@string/appbar_scrolling_view_behavior" />-->
   
   <!--    <com.google.android.material.appbar.AppBarLayout-->
   <!--        android:id="@+id/app_bar_layout"-->
   <!--        android:layout_width="match_parent"-->
   <!--        android:layout_height="wrap_content"-->
   <!--        android:fitsSystemWindows="true"-->
   <!--        android:theme="@style/Theme.Sunflower.AppBarOverlay">-->
   
       <!-- AppBarLayout contents here -->
   
   <!--    </com.google.android.material.appbar.AppBarLayout>-->
   
   <!--  </androidx.coordinatorlayout.widget.CoordinatorLayout>-->
   
   <androidx.compose.ui.platform.ComposeView
       android:id="@+id/compose_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />
   

   ध्यान दें: CoordinatorLayout एक ViewGroup है. इसलिए, माइग्रेशन की रणनीति के आधार पर, एक ही समय पर या इस चरण से पहले, इसके सभी चाइल्ड व्यू को 'लिखें' पर माइग्रेट करना सबसे अच्छा है. हालांकि, अगर आपको ऐसा करने में समस्या आ रही है, तो कंपोज़ में व्यू का इस्तेमाल करने के लिए AndroidView. लिखें में व्यू का इस्तेमाल करना देखें, ज़्यादा जानें.

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

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

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

   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 का इस्तेमाल टूलबार के कंटेनर के तौर पर किया जाता है. इसके बाद, स्क्रोल किए जा सकने वाले RecyclerView या NestedScrollView जैसे व्यू पर, एक्सएमएल में layout_behavior की मदद से Behavior तय किया जा सकता है. इससे यह तय किया जा सकता है कि स्क्रोल करने पर टूलबार कैसे छोटा/बड़ा होगा.

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

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

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

   // 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

ध्यान दें: अगर Material 2 कॉम्पोनेंट का इस्तेमाल किया जा रहा है, तो आपको टूलबार को मैन्युअल तरीके से छोटा/बड़ा करना होगा. इसके अलावा, ComposeView के आउटर लेआउट के तौर पर CoordinatorLayout का इस्तेमाल किया जा सकता है. यह तरीका Jetpack Compose में सूरजमुखी के विज्ञापन को माइग्रेट करना ब्लॉग में दस्तावेज़ किया गया है पोस्ट.

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

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

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

दराज़

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

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

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 स्लॉट उपलब्ध कराता है. इसमें Snackbar दिखाने के लिए, SnackbarHost composable को शामिल किया जा सकता है.

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 को 'लिखें' फ़ोल्डर में माइग्रेट करने के बारे में ज़्यादा जानने के लिए, इन संसाधनों की मदद से:

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