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

‫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, שהוא המקבילה של 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

תרחישים נפוצים לדוגמה

כיווץ והרחבה של סרגלי כלים

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