نقل 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) لتحديد كيفية collapse/expand شريط الأدوات أثناء الانتقال للأعلى أو للأسفل.

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