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

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

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

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

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

1. في المقتطف أدناه، يحتوي CoordinatorLayout على AppBarLayout يضمّ ToolBar وViewPager وFloatingActionButton. أشِر إلى CoordinatorLayout والعناصر الفرعية التابعة له باعتبارها تعليقًا من التسلسل الهرمي لواجهة المستخدم وأضِف ComposeView لاستبداله.

   ```xml

   <!-- AppBarLayout contents here -->
   

   ```

   ملاحظة: بما أنّ CoordinatorLayout هو ViewGroup، من الأفضل نقل جميع طرق العرض الفرعية إلى Compose في الوقت نفسه أو قبل هذه الخطوة، وذلك حسب استراتيجية النقل. ومع ذلك، إذا لم تتمكّن من إجراء ذلك، يمكنك إضافة AndroidView لاستخدام "طرق العرض" ضمن Compose. يمكنك الاطّلاع على استخدام طرق العرض في Compose لمزيد من المعلومات.

2. في Fragment أو Activity، احصل على مرجع إلى ComposeView الذي أضفته للتو واستدعِ طريقة setContent عليه. في نص الطريقة، اضبط Scaffold كمحتوى لها:

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

3. في محتوى Scaffold، أضِف المحتوى الأساسي لشاشتك داخله. بما أنّ المحتوى الأساسي في ملف XML أعلاه هو ViewPager2، سنستخدم HorizontalPager، وهو ما يعادله في Compose. تتلقّى دالة lambda content في 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) لتوضيح كيفية تصغير/توسيع شريط الأدوات أثناء التمرير.

في Compose، يمكنك تحقيق تأثير مماثل من خلال 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

ملاحظة: إذا كنت تستخدم مكوّنات Material 2، عليك تنفيذ شريط الأدوات القابل للتصغير أو التوسيع يدويًا. بدلاً من ذلك، يمكنك استخدام CoordinatorLayout كتنسيق خارجي لـ ComposeView. تم توضيح هذه الطريقة في منشور المدوّنة نقل Sunflower إلى Jetpack Compose.

تخصيص تأثير التمرير للتصغير/التوسيع

يمكنك تقديم عدة مَعلمات لـ enterAlwaysScrollBehavior من أجل تخصيص تأثير الحركة عند التصغير أو التوسيع. يوفّر TopAppBarDefaults أيضًا TopAppBarScrollBehavior أخرى، مثل exitUntilCollapsedScrollBehavior، التي توسّع شريط التطبيق فقط عند الانتقال إلى أسفل المحتوى.

لإنشاء تأثير مخصّص بالكامل (على سبيل المثال، تأثير اختلاف المنظر)، يمكنك أيضًا إنشاء NestedScrollConnection الخاص بك وإزاحة شريط الأدوات يدويًا أثناء تمرير المحتوى. يمكنك الاطّلاع على نموذج الانتقال المُدمَج في مشروع Android المفتوح المصدر (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 يمكنها قبول دالة مركّبة 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.