Compose-এ CoordinatorLayout মাইগ্রেট করা

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

Compose-এ, CoordinatorLayout-এর সবচেয়ে কাছাকাছি সমতুল্য হল Scaffold। Scaffold-এ কন্টেন্ট স্লট থাকে যা সাধারণ স্ক্রিন প্যাটার্ন ও ইন্টার‍্যাকশনে মেটিরিয়াল কম্পোনেন্ট একত্রিত করতে সাহায্য করে। এই পৃষ্ঠায় বর্ণনা করা হয়েছে যে Compose-এ Scaffold ব্যবহার করার জন্য আপনি কীভাবে CoordinatorLayout মাইগ্রেট করতে পারবেন।

মাইগ্রেশনের ধাপ

CoordinatorLayout থেকে Scaffold-এ মাইগ্রেট করতে, এই ধাপগুলি অনুসরণ করুন:

1. নিচের স্নিপেটে, CoordinatorLayout-এ AppBarLayout আছে, যার মধ্যে ToolBar, ViewPager এবং FloatingActionButton আছে। আপনার UI হায়ারার্কি থেকে CoordinatorLayout এবং এর চাইল্ডকে কমেন্ট হিসেবে চিহ্নিত করুন এবং এটি পরিবর্তন করতে একটি ComposeView যোগ করুন।

   ```xml

   <!-- AppBarLayout contents here -->
   

   ```

2. আপনার ফ্র্যাগমেন্ট বা অ্যাক্টিভিটিতে, আপনি এইমাত্র যোগ করেছেন এমন 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. আরও স্ক্রিন এলিমেন্ট যোগ করতে এবং বাকি চাইল্ড Views মাইগ্রেট করতে 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

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

টুলবার আড়াল ও বড় করুন

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

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

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

3. Scaffold-এ Modifier.nestedScroll-এর মাধ্যমে NestedScrollConnection কানেক্ট করুন যাতে স্ক্রল করা যায় এমন কন্টেন্ট উপরে/নিচে স্ক্রল করার সময় 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 */
       // ...
   }
   MigrationCommonScenariosSnippets.kt

স্ক্রল করার সময় কলাপ্স/এক্সপ্যান্ড করার এফেক্ট কাস্টমাইজ করুন

আপনি enterAlwaysScrollBehavior-এর জন্য একাধিক প্যারামিটার প্রদান করতে পারেন যাতে কোলাপ্সিং/এক্সপ্যান্ডিং অ্যানিমেশন এফেক্ট কাস্টমাইজ করা যায়। এছাড়াও, TopAppBarDefaults অন্যান্য TopAppBarScrollBehavior প্রদান করে, যেমন exitUntilCollapsedScrollBehavior, যা কন্টেন্ট সম্পূর্ণভাবে নিচের দিকে স্ক্রল করা হলে শুধুমাত্র অ্যাপ বার প্রসারিত করে।

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

ড্রয়ার

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

Compose-এ, আপনি 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 স্লট প্রদান করে, যা Snackbar দেখানোর জন্য SnackbarHost কম্পোজেবল গ্রহণ করতে পারে।

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

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

আরও জানুন

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

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