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 // ... } }
في محتوى
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 */ } } }
استخدِم خانات المحتوى الأخرى التي يوفّرها
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 */ } } }
حالات الاستخدام الشائعة
تصغير أشرطة الأدوات وتوسيعها
في نظام العرض، لتصغير شريط الأدوات وتوسيعه باستخدام 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 */ // ... }
تخصيص تأثير التمرير القابل للتصغير أو التوسيع
يمكنك توفير عدة معلَمات لـ 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 // ... } }
راجِع الأدراج للاطّلاع على مزيد من المعلومات.
أشرطة إعلام منبثقة
توفّر "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 // ... }
اطّلِع على Snackbars لمعرفة مزيد من المعلومات.
مزيد من المعلومات
لمزيد من المعلومات عن نقل بيانات "CoordinatorLayout
" إلى Compose، يُرجى الاطّلاع على المراجع التالية:
- مكونات وتصاميم Material: مستندات عن مكوّنات Material Design
المتوافقة مع Compose، مثل
Scaffold
. - نقل بيانات دوار الشمس إلى Jetpack Compose: مشاركة مدونة توثّق رحلة الانتقال من صفحة "Views" إلى "إنشاء" في نموذج تطبيق Sunflower،
ويحتوي على
CoordinatorLayout
.
أفلام مُقترَحة لك
- ملاحظة: يتم عرض نص الرابط عند إيقاف JavaScript.
- تصاميم ومكوّنات Material
- المساحات الداخلية للنافذة في Compose
- الانتقال