העברת 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, שהוא המקבילה של 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 משלכם ולהזיז את סרגל הכלים באופן ידני בזמן גלילת התוכן. דוגמה לקוד זמינה ב-Nested scroll sample ב-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 מספק חריץ 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: מסמכים בנושא רכיבי Material Design שנתמכים ב-Compose, כמו Scaffold.
• העברת Sunflower ל-Jetpack Compose: פוסט בבלוג שמתעד את תהליך ההעברה מ-Views ל-Compose של אפליקציית הדוגמה Sunflower, שמכילה CoordinatorLayout.