Hiển thị thanh ứng dụng ở dưới cùng

Tạo thanh ứng dụng dưới 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. Hãy làm theo hướng dẫn này để thêm thanh ứng dụng dưới cùng vào ứng dụng bằng cách sử dụng thành phần kết hợp BottomAppBar.

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 thanh ứng dụng ở dưới cùng

Sử dụng mã sau để tạo một thanh ứng dụng ở dưới cùng chứa 4 nút biểu tượng và một nút hành động nổi:

@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."
        )
    }
}
AppBar.kt

Các điểm chính về mã

  • Scaffold bên ngoài có đặt bottomBar.
  • Cách triển khai bottomBar chứa danh sách các hành động.
  • Các hành động là cách triển khai IconButton chứa Icon cho văn bản mô tả hình ảnh và nội dung, mỗi hành động có một lambda onClick để thực hiện các hành động này.

Bạn có thể 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ả

Ví dụ về thanh ứng dụng ở dưới cùng
Hình 1. Ví dụ về thanh ứng dụng ở dưới cùng.

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ì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.
Bộ sưu tập hướng dẫn nhanh
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.
Bộ sưu tập hướng dẫn nhanh

Bạn có câu hỏi hoặc ý kiến phản hồi

Hãy truy cập vào trang câu hỏi thường gặp để tìm hiểu về các hướng dẫn nhanh hoặc liên hệ với chúng tôi để cho chúng tôi biết suy nghĩ của bạn.
Chuyển đến phần Câu hỏi thường gặp Để lại ý kiến phản hồi