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

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

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

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

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

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

    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. TopAppBarScrollBehavior बनाने के लिए, TopAppBarDefaults.enterAlwaysScrollBehavior() को कॉल करें.
  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

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

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

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

दराज़

व्यू की मदद से, रूट व्यू के तौर पर 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 को Compose में माइग्रेट करने के बारे में ज़्यादा जानकारी के लिए, ये संसाधन देखें: