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