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

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

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

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

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

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

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

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

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

פלטפורמת API

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

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

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

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

גדול

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

• 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 – סרגל אפליקציות תחתון
• גז פחם