כדי ליצור סרגל אפליקציות קטן בחלק העליון, משתמשים ב-composable TopAppBar. זהו סרגל האפליקציות העליון הפשוט ביותר שאפשר ליצור, ובדוגמה הזו הוא מכיל רק שם.
בדוגמה הבאה לא מועבר ל-TopAppBar ערך של scrollBehavior, ולכן סרגל האפליקציות העליון לא מגיב לגלילה של התוכן הפנימי.
התוצאה
איור 1. סרגל אפליקציות קטן בחלק העליון.
סרגל האפליקציה העליון מיושר למרכז
סרגל האפליקציות העליון שממורכז באמצע זהה לסרגל האפליקציות הקטן, מלבד העובדה שהכותרת ממוקמת במרכז הרכיב. כדי להטמיע את הרכיב הזה, משתמשים ב-composable הייעודי CenterAlignedTopAppBar.
בדוגמה הזו נעשה שימוש ב-enterAlwaysScrollBehavior() כדי לקבל את הערך שהוא מעביר עבור scrollBehavior. הסרגל מתכווץ כשהמשתמש גולל את התוכן הפנימי של התבנית.
התוצאה
איור 2. סרגל אפליקציות עליון שמיושר למרכז.
סרגל אפליקציה בינוני בחלק העליון
בסרגל האפליקציות הבינוני בחלק העליון, הכותרת ממוקמת מתחת לסמלים נוספים. כדי ליצור אחד, משתמשים ב-composable MediumTopAppBar.
בדומה לקוד הקודם, בדוגמה הזו נעשה שימוש ב-enterAlwaysScrollBehavior() כדי לקבל את הערך שהוא מעביר ל-scrollBehavior.
התוצאה
איור 3. סרגל אפליקציה בינוני בחלק העליון של המסך שמציג את התנהגות הגלילה מ-enterAlwaysScrollBehavior.
סרגל אפליקציה גדול בחלק העליון
סרגל האפליקציות העליון הגדול דומה לסרגל האפליקציות הבינוני, אבל הריווח בין השם לסמלים גדול יותר והוא תופס יותר מקום במסך באופן כללי. כדי ליצור רכיב כזה, משתמשים ברכיב ה-composable LargeTopAppBar.
בדוגמה הזו נעשה שימוש ב-exitUntilCollapsedScrollBehavior() כדי לקבל את הערך שהוא מעביר ל-scrollBehavior. הסרגל מתכווץ כשהמשתמש גולל את התוכן הפנימי של התבנית, אבל מתרחב כשהמשתמש גולל עד סוף התוכן הפנימי.
התוצאה
איור 4. דוגמה להטמעה של סרגל אפליקציה גדול בחלק העליון.
הטמעת סרגל אפליקציה תחתון
כדי ליצור סרגל אפליקציות בתחתית המסך, משתמשים ברכיב ה-Composable BottomAppBar, שהוא דומה לרכיב ה-Composable של סרגל האפליקציות בחלק העליון של המסך.
מעבירים רכיבים מורכבים לפרמטרים המרכזיים הבאים:
actions: סדרה של סמלים שמופיעים בצד ימין של הסרגל. בדרך כלל אלה פעולות מפתח במסך נתון או פריטים לניווט.
floatingActionButton: לחצן הפעולה הצף שמופיע בצד שמאל של הסרגל.
התוצאה
איור 5. דוגמה להטמעה של סרגל אפליקציות בתחתית המסך.
נקודות עיקריות
בדרך כלל מעבירים את שורת האפליקציות ל-composable Scaffold, שיש לו פרמטרים ספציפיים לקבלת שורת האפליקציות.
לרכיבי ה-Composables שבהם אתם משתמשים כדי להטמיע את שורת האפליקציות העליונה יש פרמטרים מרכזיים משותפים:
title: הטקסט שמופיע בסרגל האפליקציות.
navigationIcon: הסמל הראשי לניווט, שמופיע בצד ימין של סרגל האפליקציות.
actions: סמלים שמספקים למשתמש גישה לפעולות מפתח, שמופיעים בצד שמאל של סרגל האפליקציות.
scrollBehavior: קובע איך סרגל האפליקציות העליון מגיב לגלילה של התוכן הפנימי של התבנית.
colors: קובע איך סרגל האפליקציות יופיע.
אתם יכולים לקבוע איך שורת האפליקציה תגיב כשהמשתמש יגלול את התוכן הפנימי של התבנית. כדי לעשות זאת, יוצרים מופע של TopAppBarScrollBehavior ומעבירים אותו לסרגל האפליקציות העליון עבור הפרמטר scrollBehavior. יש שלושה סוגים של TopAppBarScrollBehavior:
enterAlwaysScrollBehavior: כשהמשתמש גורר את התוכן הפנימי של התבנית למעלה, שורת האפליקציות העליונה מתכווצת. סרגל האפליקציות מתרחב כשהמשתמש מושך למטה את התוכן הפנימי.
exitUntilCollapsedScrollBehavior: בדומה ל-enterAlwaysScrollBehavior, אבל סרגל האפליקציות מתרחב גם כשהמשתמש מגיע לסוף התוכן הפנימי של התבנית.
pinnedScrollBehavior: סרגל האפליקציות נשאר במקום ולא מגיב לגלילה.
אוספים שמכילים את המדריך הזה
המדריך הזה הוא חלק מהאוספים הבאים של מדריכים מהירים, שמכסים יעדים רחבים יותר לפיתוח Android:
הצגת רכיבים אינטראקטיביים
איך פונקציות מורכבות מאפשרות ליצור בקלות רכיבי ממשק משתמש יפים על סמך מערכת העיצוב של Material Design.
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-02-06 (שעון UTC).
[null,null,["עדכון אחרון: 2025-02-06 (שעון UTC)."],[],[],null,["\u003cbr /\u003e\n\nApp bars are containers at the top or the bottom of the screen that give your\nusers access to key features and navigation items:\n\n| Type | Appearance | Purpose |\n|---------------------------|----------------------------------|-------------------------------------------------------------------------------------------------------------------------------|\n| [Top app bar](#top) | Across the top of the screen. | Provides access to key tasks and information. Typically hosts a title, core action items, and certain navigation items. |\n| [Bottom app bar](#bottom) | Across the bottom of the screen. | Typically includes core navigation items. Might give access to other actions, for example, by using a floating action button. |\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nImplement a top app bar\n\nThe following code shows implementations for the four types of top app bars,\nincluding varying examples of how you can control scroll behavior.\n\n- [Small top app bar](#small)\n- [Center-aligned top app bar](#center)\n- [Medium top app bar](#medium)\n- [Large top app bar](#large)\n\nSmall top app bar\n\nTo create a small top app bar, use the [`TopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#TopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)) composable. This is the\nsimplest possible top app bar and in this example just contains a title.\n\nThe following example does not pass `TopAppBar` a value for\n`scrollBehavior`, so the top app bar does not react to scrolling of the inner\ncontent.\n\nResult **Figure 1.** A small top app bar.\n\nCenter-aligned top app bar\n\nThe center-aligned top app bar is the same as the small app bar,\nexcept the title is centered within the component. To implement it, use the\ndedicated [`CenterAlignedTopAppBar`](/reference/kotlin/androidx/compose/material/package-summary#Scaffold(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.material.ScaffoldState,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.material.FabPosition,kotlin.Boolean,kotlin.Function1,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) composable.\n\nThis example uses `enterAlwaysScrollBehavior()` to get the value that it passes\nfor `scrollBehavior`. The bar collapses when the user scrolls the\nscaffold's inner content.\n\nResult **Figure 2.** A center-aligned top app bar.\n\nMedium top app bar\n\nThe medium top app bar places the title beneath any additional icons. To create\none, use the [`MediumTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#MediumTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)) composable.\n\nLike the previous code, this example uses `enterAlwaysScrollBehavior()` to\nget the value that it passes for `scrollBehavior`.\n\nResult\n\n\u003cbr /\u003e\n\n**Figure 3.** A medium top app bar demonstrating the scroll behavior from `enterAlwaysScrollBehavior`.\n\n\u003cbr /\u003e\n\nLarge top app bar\n\nA large top app bar is similar to the medium, though the padding between the\ntitle and the icons is greater and it occupies more space on screen overall. To\ncreate one, use the [`LargeTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#LargeTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior) ) composable.\n\nThis example uses\n`exitUntilCollapsedScrollBehavior()` to get the value that it passes for\n`scrollBehavior`. The bar collapses when the user scrolls the\nscaffold's inner content, but then expands when the user scrolls to the end of\nthe inner content.\n\nResult **Figure 4.** An example implementation of a large top app bar.\n\nImplement a bottom app bar\n\nTo create a bottom app bar, use the [`BottomAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#BottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)) composable, which is\nsimilar to the top app bar composable.\n\nYou pass composables for the following key\nparameters:\n\n- `actions`: A series of icons that appear on the left side of the bar. These are commonly either key actions for the given screen, or navigation items.\n- `floatingActionButton`: The floating action button that appears on the right side of the bar.\n\n| **Note:** You can also use `BottomAppBar` without passing a value for `actions` and `floatingActionButton`. You create a custom bottom app bar by filling `BottomAppBar` with content as you would other containers.\n\nResult **Figure 5.** An example implementation of a bottom app bar.\n\nKey points\n\n- You generally pass app bars to the `Scaffold` composable, which has specific parameters to receive them.\n- The composables that you use to implement top app\n bars share key parameters:\n\n - `title`: The text that appears across the app bar.\n - `navigationIcon`: The primary icon for navigation, which appears on the left of the app bar.\n - `actions`: Icons that provide the user access to key actions, which appear on the right of the app bar.\n - `scrollBehavior`: Determines how the top app bar responds to scrolling of the scaffold's inner content.\n - `colors`: Determines how the app bar appears.\n- You can control how the app bar responds when the user scrolls the\n scaffold's inner content. To do so, create an instance of\n [`TopAppBarScrollBehavior`](/reference/kotlin/androidx/compose/material3/TopAppBarScrollBehavior) and pass it to your top app bar for the\n `scrollBehavior` parameter. There are three types of `TopAppBarScrollBehavior`:\n\n - `enterAlwaysScrollBehavior`: When the user pulls up the scaffold's inner content, the top app bar collapses. The app bar expands when the user pulls down the inner content.\n - `exitUntilCollapsedScrollBehavior`: Similar to `enterAlwaysScrollBehavior`, though the app bar also expands when the user reaches the end of the scaffold's inner content.\n - `pinnedScrollBehavior`: The app bar remains in place and does not react to scrolling.\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay interactive components \nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback \nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
