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

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

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

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

  1. TopAppBarScrollBehavior बनाने के लिए, TopAppBarDefaults.enterAlwaysScrollBehavior() को कॉल करें.
  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 पर नेस्ट किए गए स्क्रोल का सैंपल देखें.

दराज़

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