‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

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

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

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

דוגמה לסרגל אפליקציות בחלק העליון והתחתון של המסך. — **איור 1.** סרגל אפליקציות עליון (משמאל) וסרגל אפליקציות תחתון (מימין).

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

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

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

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

פלטפורמת ה-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

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

מסך באפליקציה עם סרגל אפליקציה תחתון שכולל ארבעה סמלי פעולה בצד שמאל ולחצן פעולה צף (FAB) בצד ימין. — **איור 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

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

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

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

פלטפורמת ה-API

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

דוגמאות

קטן

מיושר למרכז

בינוני

גדול

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

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

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