Để tạo một thanh ứng dụng nhỏ ở trên cùng, hãy sử dụng thành phần kết hợp TopAppBar. Đây là thanh ứng dụng trên cùng đơn giản nhất có thể và trong ví dụ này chỉ chứa một tiêu đề.
Ví dụ sau đây không truyền TopAppBar một giá trị cho scrollBehavior, vì vậy, thanh ứng dụng trên cùng không phản ứng với thao tác cuộn nội dung bên trong.
Kết quả
Hình 1. Một thanh ứng dụng trên cùng nhỏ.
Thanh ứng dụng trên cùng căn giữa
Thanh ứng dụng trên cùng căn giữa giống với thanh ứng dụng nhỏ, ngoại trừ tiêu đề được căn giữa trong thành phần. Để triển khai tính năng này, hãy sử dụng thành phần kết hợp CenterAlignedTopAppBar dành riêng.
Ví dụ này sử dụng enterAlwaysScrollBehavior() để lấy giá trị mà nó truyền cho scrollBehavior. Thanh này thu gọn khi người dùng cuộn nội dung bên trong của giàn giáo.
Kết quả
Hình 2. Thanh ứng dụng trên cùng căn giữa.
Thanh ứng dụng trên cùng cỡ trung bình
Thanh ứng dụng trên cùng cỡ trung đặt tiêu đề bên dưới mọi biểu tượng bổ sung. Để tạo một thành phần kết hợp, hãy sử dụng thành phần kết hợp MediumTopAppBar.
Giống như mã trước, ví dụ này sử dụng enterAlwaysScrollBehavior() để lấy giá trị mà nó truyền cho scrollBehavior.
Kết quả
Hình 3. Thanh ứng dụng trên cùng có kích thước trung bình minh hoạ hành vi cuộn từ enterAlwaysScrollBehavior.
Thanh ứng dụng trên cùng có kích thước lớn
Thanh ứng dụng trên cùng lớn tương tự như thanh ứng dụng trung bình, mặc dù khoảng đệm giữa tiêu đề và các biểu tượng lớn hơn và chiếm nhiều không gian hơn trên màn hình. Để tạo một thành phần kết hợp, hãy sử dụng thành phần kết hợp LargeTopAppBar.
Ví dụ này sử dụng exitUntilCollapsedScrollBehavior() để lấy giá trị mà nó truyền cho scrollBehavior. Thanh này thu gọn khi người dùng cuộn nội dung bên trong của giàn giáo, nhưng sau đó mở rộng khi người dùng cuộn đến cuối nội dung bên trong.
Kết quả
Hình 4. Ví dụ về cách triển khai thanh ứng dụng trên cùng lớn.
Triển khai thanh ứng dụng ở dưới cùng
Để tạo thanh ứng dụng dưới cùng, hãy sử dụng thành phần kết hợp BottomAppBar. Thành phần này tương tự như thành phần kết hợp thanh ứng dụng trên cùng.
Bạn truyền các thành phần kết hợp cho các tham số chính sau:
actions: Một loạt biểu tượng xuất hiện ở bên trái của thanh. Đây thường là các thao tác chính cho màn hình nhất định hoặc các mục điều hướng.
floatingActionButton: Nút hành động nổi xuất hiện ở bên phải của thanh.
Kết quả
Hình 5. Ví dụ về cách triển khai thanh ứng dụng ở dưới cùng.
Điểm chính
Bạn thường truyền thanh ứng dụng đến thành phần kết hợp Scaffold. Thành phần này có các tham số cụ thể để nhận thanh ứng dụng.
Các thành phần kết hợp mà bạn sử dụng để triển khai thanh ứng dụng trên cùng có chung các tham số chính:
title: Văn bản xuất hiện trên thanh ứng dụng.
navigationIcon: Biểu tượng chính để điều hướng, xuất hiện ở bên trái thanh ứng dụng.
actions: Các biểu tượng cung cấp cho người dùng quyền truy cập vào các thao tác chính, xuất hiện ở bên phải thanh ứng dụng.
scrollBehavior: Xác định cách thanh ứng dụng trên cùng phản hồi thao tác cuộn nội dung bên trong của Scaffold.
colors: Xác định cách thanh ứng dụng xuất hiện.
Bạn có thể kiểm soát cách thanh ứng dụng phản hồi khi người dùng cuộn nội dung bên trong của giàn giáo. Để thực hiện việc này, hãy tạo một thực thể của TopAppBarScrollBehavior và truyền thực thể đó đến thanh ứng dụng trên cùng cho tham số scrollBehavior. Có ba loại TopAppBarScrollBehavior:
enterAlwaysScrollBehavior: Khi người dùng kéo nội dung bên trong của ngăn xếp lên, thanh ứng dụng trên cùng sẽ thu gọn. Thanh ứng dụng sẽ mở rộng khi người dùng kéo nội dung bên trong xuống.
exitUntilCollapsedScrollBehavior: Tương tự như enterAlwaysScrollBehavior, mặc dù thanh ứng dụng cũng mở rộng khi người dùng đến cuối nội dung bên trong của ngăn xếp.
pinnedScrollBehavior: Thanh ứng dụng vẫn ở nguyên vị trí và không phản ứng với thao tác cuộn.
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:
Hiển thị các thành phần tương tác
Tìm hiểu cách các hàm có khả năng kết hợp giúp bạn dễ dàng tạo các thành phần giao diện người dùng đẹp mắt dựa trên hệ thống thiết kế Material Design.
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,["\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)"]]
