نقل 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 للحصول على مثال للرمز.

أدراج

باستخدام "طرق العرض"، يمكنك تنفيذ درج تنقّل من خلال استخدام 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: مشاركة مدوّنة توثّق رحلة نقل تطبيق Sunflower التجريبي من Views إلى Compose، وهو تطبيق يتضمّن CoordinatorLayout.