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

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

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

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

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

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

סרגלי אפליקציות מובילים

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

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

פלטפורמת API

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

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

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

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

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

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

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

דוגמאות

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

קטן

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

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

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

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                    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. סרגל אפליקציות עליון שמיושר למרכז.

גדול

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

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

@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. השימוש ברכיב ה-Composable הזה דומה למדי לרכיבי ה-Composable של שורת האפליקציות העליונה שמתוארים בקטעים הקודמים בדף הזה. מעבירים רכיבים מורכבים לפרמטר המפתח הבא:

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

היישום הזה נראה כך:

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

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

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

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