রচনা করার জন্য সমন্বয়কারী লেআউট স্থানান্তর করুন

CoordinatorLayout হল একটি ViewGroup যা জটিল, ওভারল্যাপিং এবং নেস্টেড লেআউট সক্ষম করে। এটি একটি ধারক হিসাবে ব্যবহৃত হয় নির্দিষ্ট মেটেরিয়াল ডিজাইন ইন্টারঅ্যাকশনগুলিকে সক্ষম করতে, যেমন টুলবারগুলি প্রসারণ/সংকোচন করা এবং নীচের শীটগুলির মধ্যে থাকা ভিউগুলির জন্য।

রচনায়, CoordinatorLayout নিকটতম সমতুল্য হল একটি Scaffold । একটি Scaffold সাধারণ স্ক্রীন প্যাটার্ন এবং মিথস্ক্রিয়াতে উপাদান উপাদানগুলিকে একত্রিত করার জন্য সামগ্রী স্লট সরবরাহ করে। এই পৃষ্ঠাটি বর্ণনা করে যে আপনি কীভাবে রচনায় Scaffold ব্যবহার করতে আপনার CoordinatorLayout বাস্তবায়ন স্থানান্তর করতে পারেন।

মাইগ্রেশন পদক্ষেপ

CoordinatorLayout Scaffold এ স্থানান্তর করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

1. নীচের স্নিপেটে, 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" />
   

2. আপনার ফ্র্যাগমেন্ট বা ক্রিয়াকলাপে, আপনি এইমাত্র যোগ করা ComposeView একটি রেফারেন্স পান এবং এটিতে setContent পদ্ধতিতে কল করুন। পদ্ধতির মূল অংশে, এর বিষয়বস্তু হিসাবে একটি Scaffold সেট করুন:

   composeView.setContent {
       Scaffold(Modifier.fillMaxSize()) { contentPadding ->
           // Scaffold contents
           // ...
       }
   }
   MigrationCommonScenariosSnippets.kt

3. আপনার 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 */ }
       }
   }
   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 ) XML-এ layout_behavior মাধ্যমে একটি Behavior নির্দিষ্ট করতে পারেন।

রচনায়, আপনি একটি 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 এছাড়াও অন্যান্য TopAppBarScrollBehavior প্রদান করে যেমন exitUntilCollapsedScrollBehavior , যা শুধুমাত্র অ্যাপ বারকে প্রসারিত করে যখন বিষয়বস্তু সম্পূর্ণ নিচে স্ক্রোল করা হয়।

একটি সম্পূর্ণ কাস্টম প্রভাব (উদাহরণস্বরূপ, একটি প্যারালাক্স প্রভাব) তৈরি করতে, আপনি নিজের NestedScrollConnection তৈরি করতে পারেন এবং সামগ্রী স্ক্রোল করার সাথে সাথে টুলবারটি ম্যানুয়ালি অফসেট করতে পারেন। একটি কোড উদাহরণের জন্য AOSP-এ নেস্টেড স্ক্রোল নমুনা দেখুন।

ড্রয়ার

ভিউ সহ, আপনি রুট ভিউ হিসাবে একটি DrawerLayout ব্যবহার করে একটি নেভিগেশন ড্রয়ার বাস্তবায়ন করেন। পরিবর্তে, আপনার CoordinatorLayout হল DrawerLayout এর একটি চাইল্ড ভিউ। ড্রয়ারে নেভিগেশন বিকল্পগুলি প্রদর্শন করতে DrawerLayout অন্য একটি চাইল্ড ভিউ রয়েছে, যেমন একটি NavigationView ।

কম্পোজে, আপনি 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

আরও জানতে Snackbars দেখুন।

আরও জানুন

একটি CoordinatorLayout রচনায় স্থানান্তরিত করার বিষয়ে আরও তথ্যের জন্য, নিম্নলিখিত সংস্থানগুলি দেখুন:

• মেটেরিয়াল কম্পোনেন্টস এবং লেআউটস : ম্যাটেরিয়াল ডিজাইনের উপাদানের ডকুমেন্টেশন যা কম্পোজে সমর্থিত, যেমন Scaffold ।
• জেটপ্যাক কম্পোজে সূর্যমুখী স্থানান্তরিত করা : একটি ব্লগ পোস্ট যা ভিউ থেকে সানফ্লাওয়ার স্যাম্পল অ্যাপের কম্পোজ পর্যন্ত মাইগ্রেশন যাত্রার নথিভুক্ত করে, যাতে একটি CoordinatorLayout রয়েছে।