Nút hành động nổi (FAB) là một nút nhấn có độ nhấn mạnh cao, cho phép người dùng thực hiện một thao tác chính trong ứng dụng. Nút này quảng bá một hành động tập trung duy nhất, là lộ trình phổ biến nhất mà người dùng có thể thực hiện và thường được neo ở dưới cùng bên phải của màn hình.
Hãy xem xét 3 trường hợp sử dụng sau đây mà bạn có thể sử dụng FAB:
- Tạo mục mới: Trong ứng dụng ghi chú, bạn có thể sử dụng một FAB để nhanh chóng tạo một ghi chú mới.
- Thêm người liên hệ mới: Trong ứng dụng trò chuyện, một FAB có thể mở một giao diện cho phép người dùng thêm người khác vào cuộc trò chuyện.
- Đặt vị trí ở giữa: Trong giao diện bản đồ, một FAB có thể đặt bản đồ ở giữa vị trí hiện tại của người dùng.
Trong Material Design, có 4 loại FAB:
- FAB: Nút hành động nổi có kích thước thông thường.
- FAB nhỏ: Nút hành động nổi nhỏ hơn.
- FAB lớn: Nút hành động nổi lớn hơn.
- FAB mở rộng: Một nút hành động nổi chứa nhiều nội dung hơn một biểu tượng.
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
Kotlin
implementation(platform("androidx.compose:compose-bom:2025.01.01"))
Groovy
implementation platform('androidx.compose:compose-bom:2025.01.01')
Tạo nút hành động nổi cơ bản
Để tạo một nút hành động nổi chung, hãy sử dụng thành phần kết hợp FloatingActionButton cơ bản:
@Composable fun Example(onClick: () -> Unit) { FloatingActionButton( onClick = { onClick() }, ) { Icon(Icons.Filled.Add, "Floating action button.") } }
Kết quả
Tạo nút hành động nổi nhỏ
Để tạo một nút hành động nổi nhỏ, hãy sử dụng thành phần kết hợp SmallFloatingActionButton. Ví dụ sau đây minh hoạ cách thực hiện việc này, cùng với việc thêm màu tuỳ chỉnh.
@Composable fun SmallExample(onClick: () -> Unit) { SmallFloatingActionButton( onClick = { onClick() }, containerColor = MaterialTheme.colorScheme.secondaryContainer, contentColor = MaterialTheme.colorScheme.secondary ) { Icon(Icons.Filled.Add, "Small floating action button.") } }
Kết quả
Tạo nút hành động nổi lớn
Để tạo một nút hành động nổi lớn, hãy sử dụng thành phần kết hợp LargeFloatingActionButton. Thành phần kết hợp này không khác biệt đáng kể so với các ví dụ khác, ngoại trừ việc thành phần kết hợp này tạo ra một nút lớn hơn.
Sau đây là cách triển khai đơn giản một FAB lớn.
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
Kết quả
Tạo nút hành động nổi mở rộng
Bạn có thể tạo các nút hành động nổi phức tạp hơn bằng thành phần kết hợp ExtendedFloatingActionButton. Điểm khác biệt chính giữa lớp này và FloatingActionButton là lớp này có các tham số icon và text chuyên dụng. Các lớp này cho phép bạn tạo một nút có nội dung phức tạp hơn và điều chỉnh theo tỷ lệ để phù hợp với nội dung của nút đó.
Đoạn mã sau đây minh hoạ cách triển khai ExtendedFloatingActionButton, với các giá trị mẫu được truyền cho icon và text.
@Composable fun ExtendedExample(onClick: () -> Unit) { ExtendedFloatingActionButton( onClick = { onClick() }, icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") }, text = { Text(text = "Extended FAB") }, ) }
Kết quả
Điểm chính
Mặc dù có một số thành phần kết hợp mà bạn có thể sử dụng để tạo nút hành động nổi nhất quán với Material Design, nhưng các tham số của các thành phần kết hợp này không khác nhau nhiều. Sau đây là một số tham số chính bạn cần lưu ý:
onClick: Hàm được gọi khi người dùng nhấn vào nút.containerColor: Màu của nút.contentColor: Màu của biểu tượng.
z## 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
