Thanh ứng dụng

Thanh ứng dụng là 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à các mục điều hướng. Có hai loại thanh ứng dụng là thanh ứng dụng trên cùng và thanh ứng dụng dưới cùng thanh. Sau đây là hình thức và mục đích tương ứng:

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 chính. Thường thì lưu trữ 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ể cung 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 có chứa.

Hình 1. Thanh ứng dụng trên cùng (bên trái) và thanh ứng dụng ở dưới cùng (bên phải).

Để 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 TopAppBar và Thành phần kết hợp BottomAppBar. Chúng cho phép bạn tạo sự nhất quán những giao diện đóng gói điều khiển điều hướng và điều khiển hành động, cũng như cho phù hợp với các nguyên tắc của Material Design.

Lưu ý quan trọng: Thanh ứng dụng thường được truyền đến thành phần kết hợp Scaffold, để nhận các thông số cụ thể. Để biết thêm thông tin về cách Scaffold cung cấp một cách thuận tiện để xây dựng cấu trúc ứng dụng của bạn, hãy truy cập Scaffold trang.

Thanh ứng dụng trên cùng

Bảng sau đây trình bày 4 loại thanh ứng dụng trên cùng:

Loại	Ví dụ
Nhỏ: Dành cho 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 thao tác 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 những 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 ứng dụng hàng đầu các thanh tương tự nhau. Chúng có chung một số 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 trên bên trái thanh ứng dụng.
• actions: Các biểu tượng cho phép người dùng truy cập vào các thao tác chính. Chúng xuất hiện ở bên phải của 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.

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 nội dung bên trong của scaffold. Để thực hiện việc này, hãy tạo một phiên bản của TopAppBarScrollBehavior rồi chuyển thành phần này vào thanh ứng dụng trên cùng cho Tham số scrollBehavior.

Có 3 loại TopAppBarScrollBehavior. Các điều khoản này như sau:

• enterAlwaysScrollBehavior: Khi người dùng kéo bên trong của scaffold (giàn giáo) lên nội dung, 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 scaffold.
• pinnedScrollBehavior: Thanh ứng dụng vẫn giữ nguyên và không phản ứng với cuộn.

Các ví dụ sau đây triển khai một số 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 ví dụ khác nhau về cách bạn có thể kiểm soát hành vi cuộn.

Nhỏ

Để 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ỉ cần chứa tiêu đề.

Ví dụ sau đây không truyền giá trị cho TopAppBar scrollBehavior nên không phản ứng với thao tác cuộn của thành phần bên trong nội dung.

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

Phương thức triển khai có dạng như sau:

Hình 2. Thanh ứng dụng nhỏ ở trên cùng.

Đã 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ị mà nó truyền trong scrollBehavior. Do đó, thanh này sẽ thu gọn khi người dùng cuộn nội dung bên trong của scaffold.

@Composable
fun CenterAlignedTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                    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.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior,
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

Phương thức triển khai có dạng như sau:

Hình 3. Thanh ứng dụng trên cùng được căn giữa.

Trung bình

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 Thứ nhất là 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ị mà nó 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.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

Phương thức triển khai này có dạng như sau, kèm theo phần minh hoạ về cách cuộn từ enterAlwaysScrollBehavior() sẽ xuất hiện:

Hình 4. Thanh ứng dụng trên cùng được căn giữa.

Lớn

Thanh ứng dụng lớn trên cùng tương tự như thanh 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ể. Người nhận tạo một tập dữ liệu, 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ị truyền scrollBehavior. Do đó, thanh này sẽ thu gọn khi người dùng cuộn nội dung bên trong của scaffold, 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.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

Phương thức triển khai có dạng như sau:

Hình 5. Ví dụ về cách triển khai thanh ứng dụng lớn trên cùng.

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. Đang dùng thành phần kết hợp 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 thành phần kết hợp cho khoá sau thông số:

• actions: Một loạt biểu tượng xuất hiện ở bên trái thanh. Các thường là các thao tác chính trên màn hình cụ thể hoặc các mục điều hướng.
• floatingActionButton: Nút hành động nổi xuất hiện trê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."
        )
    }
}
AppBar.kt

Phương thức triển khai có dạng như sau:

Hình 6. Ví dụ về cách triển khai thanh ứng dụng ở dưới cùng.

Lưu ý: Bạn cũng có thể sử dụng BottomAppBar mà không chuyển giá trị cho actions và floatingActionButton. Trong trường hợp đó, bạn có thể tạo thanh ứng dụng tuỳ chỉnh ở dưới cùng bằng cách lấp đầy BottomAppBar bằng nội dung giống như cách bạn làm với các vùng chứa khác.

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