סרגלי אפליקציות

סרגלי אפליקציות הם קונטיינרים שמאפשרים למשתמשים לגשת לתכונות ולפריטי ניווט חשובים. יש שני סוגים של סרגלי אפליקציות: סרגלי אפליקציות עליונים וסרגלי אפליקציות תחתונים. הנה הסבר על המראה והמטרה של כל אחד מהם:

סוג

מראה

מטרה

סרגל האפליקציה העליון

בחלק העליון של המסך.

מספקת גישה למשימות ולמידע חשובים. בדרך כלל הוא כולל כותרת, פעולות עיקריות לביצוע ופריטי ניווט מסוימים.

סרגל האפליקציה התחתון

בחלק התחתון של המסך.

בדרך כלל כולל פריטי ניווט עיקריים. יכול גם לספק גישה לפעולות מרכזיות אחרות, למשל באמצעות כפתור פעולה צף (FAB) שכלול בו.
דוגמה לסרגל אפליקציה עליון ותחתון.
איור 1. סרגל אפליקציה עליון (מימין) וסרגל אפליקציה תחתון (משמאל).

כדי להטמיע סרגל אפליקציה עליון וסרגל אפליקציה תחתון, משתמשים בקודים הקומפוזביליים TopAppBar ו-BottomAppBar, בהתאמה. הם מאפשרים ליצור ממשקים עקביים שכוללים פקדי ניווט ופעולות, ותואמים לעקרונות של Material Design.

סרגלי האפליקציה העליונים

בטבלה הבאה מפורטים ארבעת הסוגים של סרגלי האפליקציות העליונים:

סוג

דוגמה

קטן: למסכים שלא דורשים הרבה ניווט או פעולות.

 סרגל אפליקציה עליון קטן

מיושר למרכז: למסכים שיש בהם פעולה ראשית אחת.

 סרגל האפליקציה העליון מיושר למרכז

בינוני: למסכים שדורשים כמות בינונית של ניווט ופעולות.

 סרגל האפליקציה העליון בגודל בינוני

גדול: למסכים שדורשים הרבה ניווט ופעולות.

 סרגל אפליקציה עליון גדול

פלטפורמת ה-API

הפונקציות השונות שמאפשרות להטמיע את ארבעת סרגלי האפליקציות העליונים השונים דומות מאוד. יש להם כמה פרמטרים עיקריים משותפים:

  • ‫title: הטקסט שמופיע בסרגל האפליקציה.
  • ‫navigationIcon: הסמל הראשי לניווט. מופיע בצד ימין של סרגל האפליקציה.
  • ‫actions: סמלים שמאפשרים למשתמשים לגשת לפעולות מרכזיות. הם מופיעים בצד שמאל של סרגל האפליקציה.
  • scrollBehavior: קובע איך סרגל האפליקציה העליון מגיב לגלילה של התוכן הפנימי של ה-scaffold.
  • colors: קובע איך סרגל האפליקציה יופיע.

התנהגות הגלילה

אתם יכולים לקבוע איך סרגל האפליקציה יגיב כשהמשתמש גולל את התוכן הפנימי של ה-scaffold. כדי לעשות את זה, יוצרים מופע של TopAppBarScrollBehavior ומעבירים אותו לסרגל האפליקציה העליון בשביל הפרמטר scrollBehavior.

יש שלושה סוגים של TopAppBarScrollBehavior. הם:

  • ‫enterAlwaysScrollBehavior: כשהמשתמש מושך למעלה את התוכן הפנימי של הפיגום, סרגל האפליקציה העליון מתכווץ. סרגל האפליקציה מתרחב כשהמשתמש מתחיל לגלול למטה את התוכן הפנימי.
  • exitUntilCollapsedScrollBehavior: דומה ל-enterAlwaysScrollBehavior, אבל סרגל האפליקציה מתרחב רק כשהמשתמש גורר את התוכן עד למטה.
  • ‫pinnedScrollBehavior: סרגל האפליקציה נשאר במקום ולא מגיב לגלילה.

בדוגמאות הבאות מוטמעות כמה מהאפשרויות האלה.

דוגמאות

בקטעים הבאים מוסבר איך להטמיע את ארבעת הסוגים השונים של סרגלי האפליקציות העליונים, כולל דוגמאות שונות לאופן שבו אפשר לשלוט בהתנהגות הגלילה.

קטן

כדי ליצור סרגל אפליקציה עליון קטן, משתמשים בקוד TopAppBar קומפוזבילי. בדוגמה הבאה מוטמע סרגל אפליקציה עליון בסיסי שמכיל רק כותרת.

בדוגמה הבאה לא מועבר ערך ל-TopAppBar עבור scrollBehavior, ולכן אין תגובה לגלילה של התוכן הפנימי.

@Composable
fun SmallTopAppBarExample() {
    Scaffold(
        topBar = {
            TopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Small Top App Bar")
                }
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}

ההטמעה הזו נראית כך:

דוגמה לסרגל אפליקציה קטן בחלק העליון.
איור 2. סרגל אפליקציה עליון קטן.

מיושר למרכז

סרגל האפליקציה העליון המיושר למרכז הוא למעשה זהה לסרגל האפליקציה הקטן, אבל הכותרת מיושרת למרכז בתוך הרכיב. כדי להטמיע אותו, משתמשים בקוד CenterAlignedTopAppBar קומפוזבילי ייעודי.

בדוגמה הזו, הפונקציה enterAlwaysScrollBehavior() משמשת כדי לקבל את הערך שהיא מעבירה ל-scrollBehavior. לכן, הסרגל מתכווץ כשהמשתמש גולל את התוכן הפנימי של ה-scaffold.

@Composable
fun CenterAlignedTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Centered Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior,
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}

ההטמעה הזו נראית כך:

דוגמה לסרגל אפליקציה עליון שמיושר למרכז.
איור 3. סרגל אפליקציה עליון מיושר למרכז.

בינוני

בסרגל האפליקציה העליון בגודל בינוני, הכותרת ממוקמת מתחת לסמלים הנוספים. כדי ליצור כפתור כזה, משתמשים בקוד MediumTopAppBar קומפוזבילי.

כמו בקטע הקוד הקודם, בדוגמה הזו נעשה שימוש ב-enterAlwaysScrollBehavior() כדי לקבל את הערך שמועבר ל-scrollBehavior.

@Composable
fun MediumTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            MediumTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Medium Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}

כך נראית ההטמעה הזו, עם הדגמה של התנהגות הגלילה מ-enterAlwaysScrollBehavior():

איור 4. סרגל אפליקציה עליון בגודל בינוני שמתכווץ כשהמשתמש גולל למעלה ומתרחב כשהמשתמש גולל למטה.

גדול

סרגל אפליקציה עליון גדול דומה לסרגל הבינוני, אבל המרווח בין הכותרת לסמלים גדול יותר והוא תופס יותר מקום במסך באופן כללי. כדי ליצור כפתור כזה, משתמשים בקוד LargeTopAppBar קומפוזבילי.

בניגוד לקטעי הקוד הקודמים, בדוגמה הזו נעשה שימוש ב-exitUntilCollapsedScrollBehavior() כדי לקבל את הערך שמועבר ל-scrollBehavior. לכן, הסרגל מתכווץ כשהמשתמש גולל את התוכן הפנימי של ה-scaffold, אבל מתרחב כשהמשתמש גולל עד לסוף התוכן הפנימי.

@Composable
fun LargeTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            LargeTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Large Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}

ההטמעה הזו נראית כך:

מסך באפליקציה עם סרגל אפליקציה תחתון שכולל ארבעה סמלי פעולות בצד ימין, וכפתור פעולה צף בצד שמאל.
איור 5. דוגמה להטמעה של סרגל אפליקציה עליון גדול.

סרגל האפליקציה התחתון

כדי ליצור סרגל אפליקציות תחתון, משתמשים בפונקציה הקומפוזבילית BottomAppBar. השימוש ברכיב הקומפוזבילי הזה דומה מאוד לרכיבים הקומפוזביליים של סרגל האפליקציה העליון שמתוארים בקטעים הקודמים בדף הזה. מעבירים רכיבים קומפוזביליים לפרמטרים העיקריים הבאים:

  • ‫actions: סדרה של סמלים שמופיעים בצד ימין של הסרגל. בדרך כלל מדובר בפעולות מרכזיות במסך או בפריטי ניווט.
  • ‫floatingActionButton: כפתור הפעולה הצף שמופיע בצד ימין של הסרגל.

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(Icons.Filled.Check, contentDescription = "Localized description")
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Edit,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Mic,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Image,
                            contentDescription = "Localized description",
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* do something */ },
                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                    ) {
                        Icon(Icons.Filled.Add, "Localized description")
                    }
                }
            )
        },
    ) { innerPadding ->
        Text(
            modifier = Modifier.padding(innerPadding),
            text = "Example of a scaffold with a bottom app bar."
        )
    }
}

ההטמעה הזו נראית כך:

מסך באפליקציה עם סרגל אפליקציה תחתון שכולל ארבעה סמלי פעולות בצד ימין, וכפתור פעולה צף בצד שמאל.
איור 6. דוגמה להטמעה של סרגל אפליקציה תחתון.

מקורות מידע נוספים