نقل CoorditorLayout إلى أداة "Compose"

‫CoordinatorLayout هو ViewGroup يتيح إنشاء تنسيقات معقّدة ومتداخلة ومتداخلة. ويتم استخدامها كحاوية لتفعيل تفاعلات معيّنة في Material Design، مثل توسيع/تصغير أشرطة الأدوات وأوراق البيانات السفلية، وذلك بالنسبة إلى "طرق العرض" المضمّنة فيها.

في "إنشاء"، أقرب بديل لـ CoordinatorLayout هو Scaffold. يوفر Scaffold خانات محتوى لدمج عناصر Material في أنماط شاشة وتفاعلات شائعة. توضّح هذه الصفحة كيفية نقل عملية تنفيذ CoordinatorLayout إلى Scaffold في Compose.

خطوات نقل البيانات

لنقل البيانات من CoordinatorLayout إلى Scaffold، اتّبِع الخطوات التالية:

1. في المقتطف أدناه، يحتوي CoordinatorLayout على AppBarLayout يتضمّن ToolBar وViewPager وFloatingActionButton. علِّق على 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. تتلقّى دالة 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 لإضافة المزيد من عناصر الشاشة ونقل عناصر View الثانوية المتبقية. يمكنك استخدام الخانة 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 كحاوية لشريط الأدوات. يمكنك بعد ذلك تحديد Behavior من خلال layout_behavior في ملف XML في العرض القابل للتمرير المرتبط (مثل RecyclerView أو NestedScrollView) لتحديد طريقة تصغير/توسيع شريط الأدوات أثناء التمرير.

في ميزة "الكتابة بذكاء"، يمكنك تحقيق تأثير مشابه من خلال TopAppBarScrollBehavior. على سبيل المثال، لتنفيذ شريط أدوات قابل للتصغير والتوسيع بحيث يظهر شريط الأدوات عند التمرير للأعلى، اتّبِع الخطوات التالية:

1. اتّصِل بالرقم TopAppBarDefaults.enterAlwaysScrollBehavior() لإنشاء TopAppBarScrollBehavior.
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، يُرجى الاطّلاع على المراجع التالية:

• مكوّنات وتنسيقات Material: مستندات حول مكوّنات Material Design المتوافقة مع Compose، مثل Scaffold
• نقل تطبيق Sunflower إلى Jetpack Compose: مشاركة مدوّنة توثّق رحلة نقل البيانات من Views إلى Compose في تطبيق Sunflower النموذجي الذي يتضمّن CoordinatorLayout.