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

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

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

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

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

יישור למרכז

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

בינוני

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

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

כדי ליצור סרגל אפליקציות בתחתית המסך, משתמשים ב-composable‏ 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 docs - Top app bar
• Material3 docs - Bottom app bar
• Scaffold