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

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

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 के अन्य कॉन्टेंट स्लॉट का इस्तेमाल करके, स्क्रीन पर ज़्यादा एलिमेंट जोड़ें और बचे हुए चाइल्ड व्यू माइग्रेट करें. 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) में, एक्सएमएल में Behavior से लेकर layout_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 में, पैनल के लिए 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 स्लॉट होता है, जो Snackbar दिखाने के लिए, SnackbarHost कंपोज़ेबल को स्वीकार कर सकता है.

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