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

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

কম্পোজে, CoordinatorLayout এর নিকটতম সমতুল্য হল Scaffold । একটি Scaffold সাধারণ স্ক্রিন প্যাটার্ন এবং ইন্টারঅ্যাকশনে Material Components-কে একত্রিত করার জন্য কন্টেন্ট স্লট প্রদান করে। এই পৃষ্ঠাটি বর্ণনা করে যে আপনি কীভাবে আপনার CoordinatorLayout বাস্তবায়নকে Compose-এ Scaffold ব্যবহার করার জন্য স্থানান্তর করতে পারেন।

মাইগ্রেশনের ধাপগুলি

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

1. নিচের স্নিপেটে, CoordinatorLayout একটি AppBarLayout রয়েছে যার মধ্যে একটি ToolBar , একটি ViewPager এবং একটি FloatingActionButton রয়েছে। আপনার 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. আপনার Fragment অথবা Activity-তে, আপনার যোগ করা ComposeView এর একটি রেফারেন্স নিন এবং এতে setContent পদ্ধতিটি কল করুন। পদ্ধতির মূল অংশে, একটি Scaffold এর বিষয়বস্তু হিসেবে সেট করুন:

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

3. আপনার Scaffold এর কন্টেন্টে, আপনার স্ক্রিনের প্রাথমিক কন্টেন্ট যোগ করুন। যেহেতু উপরের XML এর প্রাথমিক কন্টেন্টটি একটি ViewPager2 , আমরা একটি HorizontalPager ব্যবহার করব, যা এর Compose সমতুল্য। 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 এর দেওয়া অন্যান্য কন্টেন্ট স্লট ব্যবহার করুন। আপনি 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

সাধারণ ব্যবহারের ক্ষেত্রে

টুলবারগুলি সঙ্কুচিত করুন এবং প্রসারিত করুন

View সিস্টেমে, CoordinatorLayout দিয়ে টুলবারটি ভেঙে ফেলা এবং প্রসারিত করার জন্য, আপনি টুলবারের জন্য একটি কন্টেইনার হিসাবে একটি AppBarLayout ব্যবহার করেন। তারপরে আপনি স্ক্রোল করার সময় টুলবারটি কীভাবে ভেঙে পড়ে/প্রসারিত হয় তা ঘোষণা করার জন্য সংশ্লিষ্ট স্ক্রোলেবল ভিউতে (যেমন RecyclerView বা NestedScrollView ) XML-এ layout_behavior এর মাধ্যমে একটি Behavior নির্দিষ্ট করতে পারেন।

Compose-এ, আপনি TopAppBarScrollBehavior মাধ্যমে একই রকম প্রভাব অর্জন করতে পারেন। উদাহরণস্বরূপ, একটি কলাপসিং/এক্সপান্ডিং টুলবার বাস্তবায়ন করতে যাতে আপনি যখন উপরে স্ক্রোল করবেন তখন টুলবারটি প্রদর্শিত হয়, এই পদক্ষেপগুলি অনুসরণ করুন:

1. একটি TopAppBarScrollBehavior তৈরি করতে TopAppBarDefaults.enterAlwaysScrollBehavior() এ কল করুন।
2. তৈরি করা TopAppBarScrollBehavior TopAppBar এ প্রদান করুন।

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-তে নেস্টেড স্ক্রোল নমুনা দেখুন।

ড্রয়ার

Views এর মাধ্যমে, আপনি একটি Navigation ড্রয়ারকে রুট ভিউ হিসেবে ব্যবহার করে বাস্তবায়ন করতে পারেন। পরিবর্তে, আপনার DrawerLayout হল DrawerLayout এর একটি চাইল্ড ভিউ। DrawerLayout CoordinatorLayout চাইল্ড ভিউও থাকে, যেমন 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

আরও জানতে স্ন্যাকবার দেখুন।

আরও জানুন

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

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