CoordinatorLayout
एक ViewGroup
है, जो जटिल, ओवरलैप होने वाली, और
नेस्ट किए गए लेआउट. इसका इस्तेमाल कंटेनर के तौर पर किया जाता है, ताकि इसमें मौजूद व्यू के लिए, Material Design के खास इंटरैक्शन चालू किए जा सकें. जैसे, टूलबार और बॉटम शीट को बड़ा/छोटा करना.
Compose में, CoordinatorLayout
की सबसे करीबी मिलती-जुलती वैल्यू
Scaffold
. Scaffold
में मटीरियल को आपस में मिलाने के लिए, कॉन्टेंट स्लॉट मिलते हैं
सामान्य स्क्रीन पैटर्न और इंटरैक्शन में शामिल कॉम्पोनेंट. इस पेज पर बताया गया है कि Compose में Scaffold
का इस्तेमाल करने के लिए, CoordinatorLayout
को कैसे माइग्रेट किया जा सकता है.
माइग्रेट करने का तरीका
CoordinatorLayout
को Scaffold
पर माइग्रेट करने के लिए, यह तरीका अपनाएं:
नीचे दिए गए स्निपेट में,
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" />
अपने फ़्रैगमेंट या गतिविधि में, उस
ComposeView
का रेफ़रंस पाएं जिसे आपने ने अभी-अभी जोड़ा है और इसमेंsetContent
तरीके को कॉल करें. तरीके के मुख्य हिस्से में,Scaffold
को उसके कॉन्टेंट के तौर पर सेट करें:composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold contents // ... } }
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 */ } } }
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 */ } } }
इस्तेमाल के सामान्य उदाहरण
टूलबार को छोटा और बड़ा करें
व्यू सिस्टम में, CoordinatorLayout
की मदद से टूलबार को छोटा और बड़ा करने के लिए,
तो AppBarLayout
का इस्तेमाल टूलबार के कंटेनर के तौर पर किया जाता है. इसके बाद, स्क्रोल किए जा सकने वाले RecyclerView
या NestedScrollView
जैसे व्यू पर, एक्सएमएल में layout_behavior
की मदद से Behavior
तय किया जा सकता है. इससे यह तय किया जा सकता है कि स्क्रोल करने पर टूलबार कैसे छोटा/बड़ा होगा.
Compose में, TopAppBarScrollBehavior
का इस्तेमाल करके भी ऐसा किया जा सकता है. उदाहरण के लिए, छोटा करना/बड़ा करना लागू करने के लिए
टूलबार दिखाई दे, ताकि ऊपर स्क्रोल करने पर टूलबार दिखे. इसके लिए, यह तरीका अपनाएं:
- ऑफ़र बनाने के लिए
TopAppBarDefaults.enterAlwaysScrollBehavior()
को कॉल करेंTopAppBarScrollBehavior
. TopAppBar
को बनाया गयाTopAppBarScrollBehavior
दें.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 */ // ... }
स्क्रोल करने पर कॉन्टेंट के छोटा या बड़ा होने के इफ़ेक्ट को पसंद के मुताबिक बनाना
छोटा/बड़ा होने वाले ऐनिमेशन इफ़ेक्ट को पसंद के मुताबिक बनाने के लिए, 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 // ... } }
ज़्यादा जानने के लिए, ड্রॉअर देखें.
स्नैकबार
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 // ... }
ज़्यादा जानने के लिए, स्नैकबार देखें.
ज़्यादा जानें
CoordinatorLayout
को 'लिखें' फ़ोल्डर में माइग्रेट करने के बारे में ज़्यादा जानने के लिए,
इन संसाधनों की मदद से:
- मटीरियल कॉम्पोनेंट और लेआउट: मटीरियल डिज़ाइन से जुड़े दस्तावेज़
कंपोज़ की सुविधा के साथ काम करने वाले कॉम्पोनेंट, जैसे कि
Scaffold
. - Sunflower को Jetpack Compose में माइग्रेट करना: एक ब्लॉग पोस्ट
इस दस्तावेज़ में, व्यू से 'सूरजमुखी के सैंपल' तक के माइग्रेशन की जानकारी दी जाती है
ऐप्लिकेशन, जिसमें एक
CoordinatorLayout
है.
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- मटीरियल कॉम्पोनेंट और लेआउट
- लिखने की सुविधा में विंडो इनसेट
- Scroll