Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Tạo thanh ứng dụng trên cùng để giúp người dùng điều hướng và truy cập vào các chức năng trong ứng dụng của bạn bằng cách sử dụng thành phần kết hợp TopAppBar.
Khả năng tương thích của phiên bản
Phương thức triển khai này yêu cầu bạn phải đặt minSDK của dự án thành API cấp 21 trở lên.
Phần phụ thuộc
Tạo một thành phần kết hợp cho thanh ứng dụng trên cùng
Tạo một thanh ứng dụng trên cùng bằng thành phần kết hợp MediumTopAppBar. Thành phần kết hợp này sẽ thu gọn khi người dùng cuộn xuống khu vực nội dung và mở rộng khi người dùng cuộn trở lại đầu nội dung:
Một thanh trên cùng với một hành động được xác định.
Một thao tác IconButton với lambda onClick để thực hiện thao tác.
IconButton chứa Icon có hình ảnh biểu tượng và văn bản mô tả nội dung.
Hành vi cuộn cho nội dung bên trong của Scaffold được xác định là enterAlwaysScrollBehavior(). Thao tác này sẽ thu gọn thanh ứng dụng khi người dùng kéo nội dung bên trong lên và mở rộng thanh ứng dụng khi người dùng kéo nội dung bên trong xuống.
Ngoài MediumTopBar chứa tiêu đề, bạn cũng có thể sử dụng:
TopAppBar: dùng cho các màn hình không yêu cầu nhiều thao tác điều hướng hoặc hành động.
CenterAlignedTopAppBar: dùng cho các màn hình có một thao tác chính.Tiêu đề được căn giữa trong thành phần.
MediumTopAppBar: dùng cho các màn hình yêu cầu số lượng thao tác và điều hướng vừa phải.
LargeTopAppBar: dùng cho các màn hình yêu cầu nhiều thao tác và thao tác điều hướng. Sử dụng khoảng đệm nhiều hơn MediumTopAppBar và đặt tiêu đề bên dưới mọi biểu tượng bổ sung.
Kết quả
Hình 1. Thanh ứng dụng trên cùng có kích thước trung bình.
Các bộ sưu tập chứa hướng dẫn này
Hướng dẫn này là một phần của các bộ sưu tập Hướng dẫn nhanh được tuyển chọn này, bao gồm các mục tiêu phát triển Android rộng hơn:
Tạo một giàn đỡ màn hình chính
Tìm hiểu cách sử dụng một nền tảng chuẩn hoá để xây dựng giao diện người dùng phức tạp. Khung này kết hợp các phần khác nhau của giao diện người dùng, mang đến cho ứng dụng một giao diện nhất quán.
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-02-06 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 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)"]]
