CoordinatorLayout
হল একটি ViewGroup
যা জটিল, ওভারল্যাপিং এবং নেস্টেড লেআউট সক্ষম করে। এটি একটি ধারক হিসাবে ব্যবহৃত হয় নির্দিষ্ট মেটেরিয়াল ডিজাইন ইন্টারঅ্যাকশনগুলিকে সক্ষম করতে, যেমন টুলবারগুলি প্রসারণ/সংকোচন করা এবং নীচের শীটগুলির মধ্যে থাকা ভিউগুলির জন্য।
রচনায়, CoordinatorLayout
নিকটতম সমতুল্য হল একটি Scaffold
। একটি Scaffold
সাধারণ স্ক্রীন প্যাটার্ন এবং মিথস্ক্রিয়াতে উপাদান উপাদানগুলিকে একত্রিত করার জন্য সামগ্রী স্লট সরবরাহ করে। এই পৃষ্ঠাটি বর্ণনা করে যে আপনি কীভাবে রচনায় Scaffold
ব্যবহার করতে আপনার CoordinatorLayout
বাস্তবায়ন স্থানান্তর করতে পারেন।
মাইগ্রেশন পদক্ষেপ
CoordinatorLayout
কে Scaffold
এ স্থানান্তর করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
নীচের স্নিপেটে,
CoordinatorLayout
একটিToolBar
, একটিViewPager
এবং একটিFloatingActionButton
রাখার জন্য একটিAppBarLayout
রয়েছে। আপনার UI অনুক্রম থেকে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
সামগ্রীতে, এটির মধ্যে আপনার স্ক্রিনের প্রাথমিক বিষয়বস্তু যুক্ত করুন৷ যেহেতু উপরের XML-এর প্রাথমিক বিষয়বস্তু হল একটিViewPager2
, আমরা একটিHorizontalPager
ব্যবহার করব, যা এটির সমতুল্য রচনা।Scaffold
content
ল্যাম্বডাPaddingValues
একটি উদাহরণ পায় যা সামগ্রীর মূলে প্রয়োগ করা উচিত।HorizontalPager
এ একইPaddingValues
প্রয়োগ করতে আপনিModifier.padding
ব্যবহার করতে পারেন।composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> val pagerState = rememberPagerState { 10 } HorizontalPager( state = pagerState, modifier = Modifier.padding(contentPadding) ) { /* Page contents */ } } }
অন্যান্য সামগ্রী স্লটগুলি ব্যবহার করুন যা
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 */ } } }
সাধারণ ব্যবহারের ক্ষেত্রে
টুলবার সঙ্কুচিত করুন এবং প্রসারিত করুন
ভিউ সিস্টেমে, CoordinatorLayout
এর সাহায্যে টুলবারটি ভেঙে ফেলা এবং প্রসারিত করতে, আপনি টুলবারের জন্য একটি ধারক হিসাবে একটি AppBarLayout
ব্যবহার করেন। তারপরে আপনি স্ক্রোল করার সাথে সাথে টুলবারটি কীভাবে ভেঙে যায়/প্রসারিত হয় তা ঘোষণা করতে আপনি সংশ্লিষ্ট স্ক্রোলযোগ্য ভিউতে (যেমন RecyclerView
বা NestedScrollView
) XML-এ layout_behavior
মাধ্যমে একটি Behavior
নির্দিষ্ট করতে পারেন।
রচনায়, আপনি একটি TopAppBarScrollBehavior
মাধ্যমে অনুরূপ প্রভাব অর্জন করতে পারেন। উদাহরণস্বরূপ, একটি ভেঙে যাওয়া/প্রসারণকারী টুলবার বাস্তবায়ন করতে যাতে আপনি স্ক্রোল করার সময় টুলবারটি উপস্থিত হয়, এই পদক্ষেপগুলি অনুসরণ করুন:
- একটি
TopAppBarScrollBehavior
তৈরি করতেTopAppBarDefaults.enterAlwaysScrollBehavior()
কে কল করুন। -
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
তৈরি করতে পারেন এবং সামগ্রী স্ক্রোল করার সাথে সাথে টুলবারটি ম্যানুয়ালি অফসেট করতে পারেন। একটি কোড উদাহরণের জন্য AOSP-এ নেস্টেড স্ক্রোল নমুনা দেখুন।
ড্রয়ার
ভিউ সহ, আপনি রুট ভিউ হিসাবে একটি DrawerLayout
ব্যবহার করে একটি নেভিগেশন ড্রয়ার বাস্তবায়ন করেন। পরিবর্তে, আপনার CoordinatorLayout
হল DrawerLayout
এর একটি চাইল্ড ভিউ। ড্রয়ারে নেভিগেশন বিকল্পগুলি প্রদর্শন করতে DrawerLayout
অন্য একটি চাইল্ড ভিউ রয়েছে, যেমন একটি NavigationView
।
কম্পোজে, আপনি 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 // ... }
আরও জানতে Snackbars দেখুন।
আরও জানুন
একটি CoordinatorLayout
রচনায় স্থানান্তরিত করার বিষয়ে আরও তথ্যের জন্য, নিম্নলিখিত সংস্থানগুলি দেখুন:
- মেটেরিয়াল কম্পোনেন্টস এবং লেআউটস : ম্যাটেরিয়াল ডিজাইনের উপাদানের ডকুমেন্টেশন যা কম্পোজে সমর্থিত, যেমন
Scaffold
। - জেটপ্যাক কম্পোজে সূর্যমুখী স্থানান্তরিত করা : একটি ব্লগ পোস্ট যা ভিউ থেকে সানফ্লাওয়ার স্যাম্পল অ্যাপের কম্পোজ পর্যন্ত মাইগ্রেশন যাত্রার নথিভুক্ত করে, যাতে একটি
CoordinatorLayout
রয়েছে।
আপনার জন্য প্রস্তাবিত
- দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট প্রদর্শিত হয়
- উপাদান উপাদান এবং বিন্যাস
- কম্পোজে উইন্ডো ইনসেট
- স্ক্রল করুন