Thanh ứng dụng là các vùng chứa cung cấp cho người dùng quyền truy cập vào các tính năng chính và mục điều hướng. Có 2 loại thanh ứng dụng là thanh ứng dụng trên cùng và thanh ứng dụng ở dưới cùng. Giao diện và mục đích tương ứng của chúng như sau:
Loại |
Diện mạo |
Mục đích |
|---|---|---|
Thanh ứng dụng trên cùng |
Ở đầu màn hình. |
Cấp quyền truy cập vào các tác vụ và thông tin quan trọng. Thường thì bạn sẽ có một tiêu đề, các mục hành động chính và một số mục điều hướng nhất định. |
Thanh ứng dụng ở dưới cùng |
Ở cuối màn hình. |
Thường bao gồm các mục điều hướng chính. Cũng có thể cấp quyền truy cập vào các thao tác chính khác, chẳng hạn như thông qua một nút hành động nổi bên trong. |
Để triển khai thanh ứng dụng trên cùng và thanh ứng dụng dưới cùng, hãy sử dụng thành phần kết hợp TopAppBar và BottomAppBar tương ứng. Chúng cho phép bạn tạo ra các giao diện nhất quán đóng gói các chức năng điều hướng và điều khiển hành động, cũng như được điều chỉnh theo các nguyên tắc của Material Design.
Thanh ứng dụng hàng đầu
Bảng sau đây trình bày bốn loại thanh ứng dụng trên cùng:
Loại |
Ví dụ |
|---|---|
Nhỏ: Dành cho các màn hình không yêu cầu nhiều thao tác hoặc thao tác. |
|
Căn giữa: Dành cho các màn hình có một hành động chính duy nhất. |
|
Trung bình: Dành cho các màn hình yêu cầu thao tác và thao tác vừa phải. |
|
Lớn: Dành cho các màn hình yêu cầu nhiều thao tác và thao tác. |
|
Nền tảng API
Các thành phần kết hợp cho phép bạn triển khai 4 thanh ứng dụng trên cùng khá giống nhau. Chúng có chung một số thông 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 cho tính năng điều hướng. Xuất hiện ở bên trái thanh ứng dụng.actions: Các biểu tượng cho phép người dùng thực hiện các thao tác chính. Chúng sẽ 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 vớ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.
Hành vi cuộ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 vào nội dung bên trong của giàn giáo đã cho. Để thực hiện việc này, hãy tạo một thực thể của TopAppBarScrollBehavior và truyền nó đến thanh ứng dụng trên cùng cho tham số scrollBehavior.
Có ba loại TopAppBarScrollBehavior. Các thuộc tính này như sau:
enterAlwaysScrollBehavior: Khi người dùng kéo lên nội dung bên trong của Scaffold, 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 sẽ mở rộng khi người dùng truy cập đến cuối nội dung bên trong của giàn giáo.pinnedScrollBehavior: Thanh ứng dụng vẫn giữ nguyên vị trí và không phản ứng với thao tác cuộn.
Các ví dụ sau đây triển khai một vài tuỳ chọn trong số này.
Ví dụ
Các phần sau đây cung cấp cách triển khai cho 4 loại thanh ứng dụng trên cùng, bao gồm cả các ví dụ khác nhau về cách bạn có thể kiểm soát hành vi cuộn.
Nhỏ
Để tạo 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 không truyền TopAppBar một giá trị cho scrollBehavior nên không phản ứng với thao tác cuộn nội dung bên trong.
@Composable
fun SmallTopAppBarExample() {
Scaffold(
topBar = {
TopAppBar(
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
titleContentColor = MaterialTheme.colorScheme.primary,
),
title = {
Text("Small Top App Bar")
}
)
},
) { innerPadding ->
ScrollContent(innerPadding)
}
}
Phương thức triển khai có dạng như sau:
Đã căn giữa
Thanh ứng dụng trên cùng được căn giữa về cơ bản giống với thanh ứng dụng nhỏ, mặc dù tiêu đề được căn giữa trong thành phần. Để triển khai, 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() để nhận giá trị được truyền cho scrollBehavior. Do đó, thanh sẽ thu gọn khi người dùng cuộn nội dung bên trong của giàn giáo.
@Composable
fun CenterAlignedTopAppBarExample() {
val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
CenterAlignedTopAppBar(
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
titleContentColor = MaterialTheme.colorScheme.primary,
),
title = {
Text(
"Centered Top App Bar",
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
},
navigationIcon = {
IconButton(onClick = { /* do something */ }) {
Icon(
imageVector = Icons.Filled.ArrowBack,
contentDescription = "Localized description"
)
}
},
actions = {
IconButton(onClick = { /* do something */ }) {
Icon(
imageVector = Icons.Filled.Menu,
contentDescription = "Localized description"
)
}
},
scrollBehavior = scrollBehavior,
)
},
) { innerPadding ->
ScrollContent(innerPadding)
}
}
Phương thức triển khai có dạng như sau:
Medium
Thanh ứng dụng ở trên cùng trung bình đặt tiêu đề bên dưới bất kỳ biểu tượng bổ sung nào. Để 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ư đoạn mã trước, ví dụ này sử dụng enterAlwaysScrollBehavior() để
nhận giá trị được truyền cho scrollBehavior.
@Composable
fun MediumTopAppBarExample() {
val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())
Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
MediumTopAppBar(
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
titleContentColor = MaterialTheme.colorScheme.primary,
),
title = {
Text(
"Medium Top App Bar",
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
},
navigationIcon = {
IconButton(onClick = { /* do something */ }) {
Icon(
imageVector = Icons.Filled.ArrowBack,
contentDescription = "Localized description"
)
}
},
actions = {
IconButton(onClick = { /* do something */ }) {
Icon(
imageVector = Icons.Filled.Menu,
contentDescription = "Localized description"
)
}
},
scrollBehavior = scrollBehavior
)
},
) { innerPadding ->
ScrollContent(innerPadding)
}
}
Cách triển khai này có dạng như sau, minh hoạ cách hoạt động cuộn từ enterAlwaysScrollBehavior() xuất hiện:
Lớn
Thanh ứng dụng lớn trên cùng cũng tương tự như 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ổng thể. Để 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.
Không giống như các đoạn mã trước, ví dụ này sử dụng exitUntilCollapsedScrollBehavior() để nhận giá trị được truyền cho scrollBehavior. Do đó, thanh sẽ 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.
@Composable
fun LargeTopAppBarExample() {
val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())
Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
LargeTopAppBar(
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
titleContentColor = MaterialTheme.colorScheme.primary,
),
title = {
Text(
"Large Top App Bar",
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
},
navigationIcon = {
IconButton(onClick = { /* do something */ }) {
Icon(
imageVector = Icons.Filled.ArrowBack,
contentDescription = "Localized description"
)
}
},
actions = {
IconButton(onClick = { /* do something */ }) {
Icon(
imageVector = Icons.Filled.Menu,
contentDescription = "Localized description"
)
}
},
scrollBehavior = scrollBehavior
)
},
) { innerPadding ->
ScrollContent(innerPadding)
}
}
Phương thức triển khai có dạng như sau:
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. Việc sử dụng thành phần kết hợp này khá giống với thành phần kết hợp thanh ứng dụng trên cùng được mô tả trong các phần trước của trang này. 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 ở phía bên trái 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 thanh.
@Composable
fun BottomAppBarExample() {
Scaffold(
bottomBar = {
BottomAppBar(
actions = {
IconButton(onClick = { /* do something */ }) {
Icon(Icons.Filled.Check, contentDescription = "Localized description")
}
IconButton(onClick = { /* do something */ }) {
Icon(
Icons.Filled.Edit,
contentDescription = "Localized description",
)
}
IconButton(onClick = { /* do something */ }) {
Icon(
Icons.Filled.Mic,
contentDescription = "Localized description",
)
}
IconButton(onClick = { /* do something */ }) {
Icon(
Icons.Filled.Image,
contentDescription = "Localized description",
)
}
},
floatingActionButton = {
FloatingActionButton(
onClick = { /* do something */ },
containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
) {
Icon(Icons.Filled.Add, "Localized description")
}
}
)
},
) { innerPadding ->
Text(
modifier = Modifier.padding(innerPadding),
text = "Example of a scaffold with a bottom app bar."
)
}
}
Phương thức triển khai có dạng như sau:
Tài nguyên khác
- Tài liệu Material3 – Thanh ứng dụng trên cùng
- Tài liệu Material3 – Thanh ứng dụng ở dưới cùng
- Scaffold