تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

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

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

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

وفي المقتطف أدناه، تحتوي السمة 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" />

في الجزء أو النشاط، احصل على مرجع إلى ComposeView الذي أضفته للتو واستدعِ طريقة setContent عليه. في نص الطريقة، اضبط Scaffold باعتباره المحتوى:
```
composeView.setContent {
    Scaffold(Modifier.fillMaxSize()) { contentPadding ->
        // Scaffold contents
        // ...
    }
}MigrationCommonScenariosSnippets.kt
```
في محتوى 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
```

استخدِم خانات المحتوى الأخرى التي يوفّرها 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 في طريقة العرض المرتبطة القابلة للتمرير (مثل RecyclerView أو NestedScrollView) لتوضيح كيفية تصغير أو توسيع شريط الأدوات أثناء الانتقال.

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

يمكنك الاتصال بـ TopAppBarDefaults.enterAlwaysScrollBehavior() لإنشاء TopAppBarScrollBehavior.
تقديم TopAppBarScrollBehavior التي تم إنشاؤها إلى TopAppBar.

اربط 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))
            Divider()
            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

اطّلِع على Snackbars لمعرفة مزيد من المعلومات.

مزيد من المعلومات

لمزيد من المعلومات عن نقل بيانات "CoordinatorLayout" إلى Compose، يُرجى الاطّلاع على المراجع التالية:

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

أفلام مُقترَحة لك

ملاحظة: يتم عرض نص الرابط عند إيقاف JavaScript.
تصاميم ومكوّنات Material
المساحات الداخلية للنافذة في Compose
الانتقال