קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
אפשר ליצור סרגל אפליקציה בחלק העליון כדי לעזור למשתמשים לנווט ולגשת לפונקציות באפליקציה, באמצעות הרכיב הניתן לקיבוץ TopAppBar.
תאימות גרסאות
כדי להטמיע את האפשרות הזו, צריך להגדיר את minSDK של הפרויקט לרמת API 21 ואילך.
יחסי תלות
יצירת רכיב שאפשר לשלב בסרגל האפליקציות העליון
יוצרים שורת אפליקציה בחלק העליון באמצעות הרכיב ה-composable MediumTopAppBar, שמתכווץ כשהמשתמש גולל למטה באזור התוכן, ומתרחב כשהמשתמש גולל בחזרה לחלק העליון של התוכן:
פעולה IconButton עם פונקציית lambda onClick לביצוע הפעולה.
IconButton שמכיל Icon עם תמונה של סמל וטקסט של תיאור התוכן.
התנהגות הגלילה של התוכן הפנימי של Scaffold מוגדרת בתור enterAlwaysScrollBehavior(). כך אפשר לכווץ את שורת האפליקציות כשהמשתמשים מושכים את התוכן הפנימי למעלה, ולהרחיב את שורת האפליקציות כשהם מושכים את התוכן הפנימי למטה.
בנוסף ל-MediumTopBar, שמכיל את השם, אפשר גם להשתמש באפשרויות הבאות:
TopAppBar: משתמשים במצב הזה במסכים שלא דורשים הרבה פעולות או ניווט.
CenterAlignedTopAppBar: משתמשים באפשרות הזו במסכים שיש בהם פעולה ראשית אחת.הכותרת ממוקמת במרכז הרכיב.
MediumTopAppBar: משמש למסכים שדורשים כמות מתונה של ניווט ופעולות.
LargeTopAppBar: משתמשים בהם במסכים שדורשים הרבה פעולות ניווט. יש בה יותר רווחים מאשר ב-MediumTopAppBar, והכותרת ממוקמת מתחת לסמלים נוספים.
תוצאות
איור 1. סרגל אפליקציה בינוני בחלק העליון.
אוספים שמכילים את המדריך הזה
המדריך הזה הוא חלק מהאוספים הבאים של מדריכים מהירים, שמכסים יעדים רחבים יותר לפיתוח Android:
יצירת אב טיפוס של מסך הבית
איך משתמשים בפלטפורמה סטנדרטית כדי ליצור ממשקי משתמש מורכבים התשתית מחברת בין חלקים שונים של ממשק המשתמש, ומעניקה לאפליקציות מראה וסגנון עקביים.
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-02-06 (שעון UTC).
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 2025-02-06 (שעון UTC)."],[],[],null,["# Display a top app bar\n\n\u003cbr /\u003e\n\nCreate a top app bar to help users navigate and access functions in your app,\nusing the [`TopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#TopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)) composable.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nCreate a composable for top app bar\n-----------------------------------\n\nCreate a top app bar using 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 that collapses\nwhen the user scrolls down the content area, and expands when the user scrolls\nback to the top of the content:\n\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun MediumTopAppBarExample() {\n val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())\n\n Scaffold(\n modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),\n topBar = {\n MediumTopAppBar(\n colors = TopAppBarDefaults.topAppBarColors(\n containerColor = MaterialTheme.colorScheme.primaryContainer,\n titleContentColor = MaterialTheme.colorScheme.primary,\n ),\n title = {\n Text(\n \"Medium Top App Bar\",\n maxLines = 1,\n overflow = TextOverflow.Ellipsis\n )\n },\n navigationIcon = {\n IconButton(onClick = { /* do something */ }) {\n Icon(\n imageVector = Icons.AutoMirrored.Filled.ArrowBack,\n contentDescription = \"Localized description\"\n )\n }\n },\n actions = {\n IconButton(onClick = { /* do something */ }) {\n Icon(\n imageVector = Icons.Filled.Menu,\n contentDescription = \"Localized description\"\n )\n }\n },\n scrollBehavior = scrollBehavior\n )\n },\n ) { innerPadding -\u003e\n ScrollContent(innerPadding)\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/AppBar.kt#L260-L301\n \n```\n\n\u003cbr /\u003e\n\n### Key points about the code\n\n- An outer [`Scaffold`](/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)) with a `TopBar` set.\n- A title consisting of a single `Text` element.\n- A top bar with a single action defined.\n- An [`IconButton`](/reference/kotlin/androidx/compose/material/package-summary#IconButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)) action with an `onClick` lambda to perform the action.\n- An `IconButton` containing an [`Icon`](/reference/kotlin/androidx/compose/material3/package-summary#Icon(androidx.compose.ui.graphics.ImageBitmap,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color)) that has an icon image and a content description text.\n- The scroll behavior for the Scaffold's inner content is defined as `enterAlwaysScrollBehavior()`. This collapses the app bar when the user pulls up the inner content, and expands the app bar when the user pulls down the inner content.\n- In addition to `MediumTopBar`, which contains the title, you can also use:\n - `TopAppBar`: use for screens that don't require a lot of navigation or actions.\n - [`CenterAlignedTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#CenterAlignedTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)): use for screens that have a single primary action.Title is centered within the component.\n - `MediumTopAppBar`: use for screens that require a moderate amount of navigation and actions.\n - [`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)): use for screens that require a lot of navigation and actions. Uses more padding than `MediumTopAppBar` and places the title beneath any additional icons.\n\nResults\n-------\n\n\u003cbr /\u003e\n\n**Figure 1.** A medium top app bar.\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Create a home screen scaffold\n\nFind out how to use a standardized platform to build complex user interfaces. The scaffold holds together different parts of the UI, giving apps a coherent look and feel. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/create-a-home-screen-scaffold) \n\n### Display interactive components\n\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\n--------------------------\n\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)"]]
