Оптимизируйте свои подборки
Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Создайте верхнюю панель приложения, чтобы помочь пользователям перемещаться и получать доступ к функциям вашего приложения, используя компонуемый элемент TopAppBar .
Совместимость версий
Для этой реализации требуется, чтобы для minSDK вашего проекта был установлен уровень API 21 или выше.
Зависимости
Создайте компонуемый элемент для верхней панели приложения
Создайте верхнюю панель приложения с помощью составного объекта MediumTopAppBar , который сворачивается, когда пользователь прокручивает область содержимого вниз, и расширяется, когда пользователь прокручивает обратно к началу содержимого:
Действие IconButton с лямбда-выражением onClick для выполнения действия.
IconButton содержащий Icon с изображением значка и текстом описания содержимого.
Поведение прокрутки внутреннего содержимого Scaffold определяется как enterAlwaysScrollBehavior() . Это сворачивает панель приложения, когда пользователь извлекает внутреннее содержимое, и расширяет панель приложения, когда пользователь опускает внутреннее содержимое.
В дополнение к MediumTopBar , который содержит заголовок, вы также можете использовать:
TopAppBar : используйте для экранов, которые не требуют большого количества навигации или действий.
CenterAlignedTopAppBar : используйте для экранов с одним основным действием. Заголовок центрируется внутри компонента.
MediumTopAppBar : используйте для экранов, требующих умеренного количества навигации и действий.
LargeTopAppBar : используйте для экранов, требующих большого количества навигации и действий. Использует больше полей, чем MediumTopAppBar , и помещает заголовок под любыми дополнительными значками.
Результаты
Рисунок 1. Средняя верхняя панель приложения.
Коллекции, содержащие это руководство
Это руководство является частью тщательно подобранной коллекции быстрых руководств, охватывающих более широкие цели разработки Android:
Создайте каркас главного экрана
Узнайте, как использовать стандартизированную платформу для создания сложных пользовательских интерфейсов. Структура объединяет различные части пользовательского интерфейса, придавая приложениям целостный внешний вид.
Узнайте, как компонуемые функции позволяют легко создавать красивые компоненты пользовательского интерфейса на основе системы проектирования Material Design.
Контент и образцы кода на этой странице предоставлены по лицензиям. 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)"]]