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

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

في ميزة "الإنشاء"، أقرب مكافئ لرمز CoordinatorLayout هو Scaffold. يوفّر Scaffold خانات محتوى لدمج مكونات Material Components في أنماط الشاشة والتفاعلات الشائعة. توضّح هذه الصفحة كيفية نقل عملية تنفيذ 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. في المقتطف أو النشاط، احصل على إشارة إلى 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

حالات الاستخدام الشائعة

تصغير أشرطة الأدوات وتوسيعها

في نظام العرض، لطيّ شريط الأدوات وتوسيعه باستخدام CoordinatorLayout، استخدِم AppBarLayout كسمة حاوية لشريط الأدوات. يمكنك بعد ذلك تحديد Behavior من خلال layout_behavior في ملف XML على العنصر المرتبط View (مثل RecyclerView أو NestedScrollView) لتحديد كيفية collapsible/expands شريط الأدوات أثناء الانتقال.

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

1. يُرجى الاتصال برقم TopAppBarDefaults.enterAlwaysScrollBehavior() لإنشاء TopAppBarScrollBehavior.
2. قدِّم TopAppBarScrollBehavior الذي تم إنشاؤه إلى TopAppBar.

3. اربط NestedScrollConnection عبر Modifier.nestedScroll في 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، والتي يمكنها قبول 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 Design: مستندات حول مكونات Material Design المتوافقة مع تطبيق "الكتابة السحرية"، مثل Scaffold
• نقل بيانات تطبيق Sunflower إلى Jetpack Compose: مشاركة مدوّنة توثّق رحلة نقل البيانات من Views إلى Compose في تطبيق Sunflower sample الذي يحتوي على CoordinatorLayout.