برای نوشتن، CoordinatorLayout را مهاجرت کنید

CoordinatorLayout یک ViewGroup است که طرح‌بندی‌های پیچیده، همپوشانی و تودرتو را امکان‌پذیر می‌کند. از آن به عنوان یک ظرف برای فعال کردن تعاملات طراحی مواد خاص، مانند گسترش/جمع کردن نوار ابزار و صفحات پایین، برای Views موجود در آن استفاده می‌شود.

در Compose، نزدیکترین معادل یک CoordinatorLayout یک Scaffold است. یک Scaffold شکاف های محتوا را برای ترکیب اجزای مواد در الگوهای صفحه نمایش و تعاملات رایج فراهم می کند. این صفحه توضیح می دهد که چگونه می توانید پیاده سازی CoordinatorLayout خود را برای استفاده از Scaffold در Compose منتقل کنید.

مراحل مهاجرت

برای انتقال CoordinatorLayout به Scaffold ، این مراحل را دنبال کنید:

1. در قطعه زیر، CoordinatorLayout حاوی یک AppBarLayout برای حاوی ToolBar ، ViewPager و FloatingActionButton است. CoordinatorLayout و فرزندان آن را از سلسله مراتب UI خود نظر دهید و یک 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 آن است. content lambda از Scaffold نیز نمونه‌ای از PaddingValues ​​را دریافت می‌کند که باید در ریشه محتوا اعمال شود. می توانید از Modifier.padding برای اعمال همان PaddingValues ​​در HorizontalPager استفاده کنید.

   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 به عنوان ظرفی برای نوار ابزار استفاده می‌کنید. سپس می‌توانید یک Behavior از طریق layout_behavior در XML در نمای پیمایشی مرتبط (مانند RecyclerView یا NestedScrollView ) تعیین کنید تا نحوه جمع شدن/بسط نوار ابزار در حین پیمایش را مشخص کنید.

در Compose، می‌توانید از طریق TopAppBarScrollBehavior به یک اثر مشابه دست پیدا کنید. به عنوان مثال، برای پیاده سازی یک نوار ابزار در حال جمع شدن/بسط به طوری که نوار ابزار هنگام اسکرول کردن به بالا ظاهر شود، این مراحل را دنبال کنید:

1. برای ایجاد یک TopAppBarScrollBehavior TopAppBarDefaults.enterAlwaysScrollBehavior() را فراخوانی کنید.
2. TopAppBarScrollBehavior ایجاد شده را در TopAppBar ارائه دهید.

3. NestedScrollConnection را از طریق Modifier.nestedScroll در Scaffold وصل کنید تا 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 را فراهم می کند که می تواند یک 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 به Compose، به منابع زیر مراجعه کنید:

• اجزای متریال و طرح‌بندی : مستندات مربوط به اجزای طراحی متریال که در Compose پشتیبانی می‌شوند، مانند Scaffold .
• مهاجرت Sunflower به Jetpack Compose : یک پست وبلاگی که سفر مهاجرت از Views به Compose از برنامه نمونه Sunflower را که حاوی CoordinatorLayout است، مستند می کند.