העברת CoordinatorLayout לכתיבה

‫CoordinatorLayout הוא ViewGroup שמאפשר פריסות מורכבות, חופפות ומקוננות. הוא משמש כמאגר כדי להפעיל אינטראקציות ספציפיות של Material Design, כמו הרחבה או כיווץ של סרגלי כלים וגיליונות תחתונים, עבור תצוגות שמוכלות בו.

ב-Compose, המקבילה הקרובה ביותר ל-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, שהוא המקבילה של ViewPager2 ב-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 מספק כדי להוסיף עוד רכיבים למסך ולהעביר את שאר ה-Views של הילדים. אפשר להשתמש במשבצת 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.

מגירות

ב-Views, מטמיעים חלונית ניווט באמצעות 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 מספק slot snackbarHost שיכול לקבל composable 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.
• העברת Sunflower ל-Jetpack פיתוח נייטיב: פוסט בבלוג שמתעד את תהליך ההעברה מ-Views לפיתוח נייטיב של אפליקציית הדוגמה Sunflower, שמכילה CoordinatorLayout.