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

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

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

איור 1. סרגל אפליקציות עליון (משמאל) וסרגל אפליקציות תחתון (מימין).

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

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

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

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

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

פלטפורמת ה-API

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

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

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

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

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

• ‫enterAlwaysScrollBehavior: כשמשתמש מושך למעלה את התוכן הפנימי של ה-scaffold, סרגל האפליקציות העליון מתכווץ. סרגל האפליקציות מתרחב כשהמשתמש מתחיל למשוך כלפי מטה את התוכן הפנימי.
• ‫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)
    }
}
AppBar.kt

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

איור 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)
    }
}
AppBar.kt

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

איור 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)
    }
}
AppBar.kt

ההטמעה הזו נראית כך, עם הדגמה של התנהגות הגלילה מ-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)
    }
}
AppBar.kt

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

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

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

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

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

@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."
        )
    }
}
AppBar.kt

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

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

הערה: אפשר להשתמש גם ב-BottomAppBar בלי להעביר ערך ל-actions ול-floatingActionButton. במקרה כזה, אפשר ליצור סרגל אפליקציות מותאם אישית בתחתית המסך על ידי מילוי BottomAppBar בתוכן כמו שממלאים מאגרי תוכן אחרים.

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

• מסמכי Material3 – סרגל האפליקציות העליון
• מסמכי Material3 – סרגל האפליקציה התחתון
• Scaffold