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

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

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

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

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

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

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

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

{% endverba नया %}

आपके लिए सुझाव

• ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
• मटीरियल कॉम्पोनेंट और लेआउट
• Compose में विंडो इनसेट
• Scroll

{% verbatim %}