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

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

Compose-এ, CoordinatorLayout এর সবচেয়ে কাছাকাছি সমতুল্য হলো একটি Scaffold । একটি Scaffold Material Component-গুলোকে একত্রিত করে সাধারণ স্ক্রিন প্যাটার্ন এবং ইন্টারঅ্যাকশন তৈরি করার জন্য কন্টেন্ট স্লট প্রদান করে। এই পৃষ্ঠাটিতে বর্ণনা করা হয়েছে, কীভাবে আপনি আপনার 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 এর একটি ইনস্ট্যান্সও গ্রহণ করে, যা কন্টেন্ট রুটে প্রয়োগ করা উচিত। আপনি একই PaddingValues HorizontalPager এ প্রয়োগ করতে 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 ব্যবহার করা হয়। এরপর, layout_behavior সময় টুলবারটি কীভাবে সংকুচিত/প্রসারিত হবে তা নির্ধারণ করার জন্য, আপনি সংশ্লিষ্ট স্ক্রলযোগ্য ভিউ (যেমন 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-তে থাকা নেস্টেড স্ক্রল স্যাম্পলটি দেখুন।

ড্রয়ার

ভিউ ব্যবহার করে, রুট ভিউ হিসেবে একটি 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

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

আরও জানুন

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

{% হুবহু %} {% endverbatim %} {% হুবহু %} {% endverbatim %}