Thanh ứng dụng

Thanh ứng dụng là vùng chứa cho phép người dùng 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: thanh ứng dụng trên cùng và thanh ứng dụng ở dưới cùng. Hình thức và mục đích tương ứng của chúng như sau:

Loại	Hình thức	Mục đích
Thanh ứng dụng trên cùng	Ở trên cùng màn hình.	Cho phép truy cập vào các tác vụ và thông tin chính. Thường chứa tiêu đề, các mục hành động cốt lõi và một số mục điều hướng.
Thanh ứng dụng ở dưới cùng	Ở dưới cùng màn hình.	Thường bao gồm các mục điều hướng cốt lõi. Cũng có thể cho phép truy cập vào các hành động chính khác, chẳng hạn như thông qua nút hành động nổi có trong đó.

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 các thành phần kết hợp TopAppBar và BottomAppBar. Các thành phần này cho phép bạn tạo giao diện nhất quán, đóng gói các chế độ điều khiển hành động và điều hướng, đồng thời 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, có các tham số cụ thể để nhận các thanh ứng dụng đó. Để biết thêm thông tin về cách Scaffold cung cấp một cách thuận tiện để cấu trúc ứng dụng, hãy truy cập vào trang Scaffold page.

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 những màn hình không yêu cầu nhiều thao tác hoặc điều hướng.
Căn giữa: Dành cho những màn hình có một hành động chính.
Trung bình: Dành cho những màn hình yêu cầu một lượng vừa phải các thao tác và điều hướng.
Lớn: Dành cho những màn hình yêu cầu nhiều thao tác và điều hướng.

Bề mặt API

Các thành phần kết hợp khác nhau cho phép bạn triển khai 4 loại thanh ứng dụng trên cùng khá giống nhau. Chúng có 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 ở 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 hành động chính. Chúng 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 việc cuộn nội dung bên trong của khung hiển thị.
• 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 khung hiển thị đã cho. Để làm như vậy, hãy tạo một thực thể của TopAppBarScrollBehavior và truyền thực thể đó vào thanh ứng dụng trên cùng cho tham số scrollBehavior.

Có 3 loại TopAppBarScrollBehavior. Chúng như sau:

• enterAlwaysScrollBehavior: Khi người dùng kéo nội dung bên trong của khung hiển thị 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 bắt đầu kéo nội dung bên trong xuống.
• exitUntilCollapsedScrollBehavior: Tương tự như enterAlwaysScrollBehavior, mặc dù thanh ứng dụng chỉ mở rộng khi người dùng kéo nội dung xuống hết.
• 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 ví dụ sau đây triển khai một số lựa chọn 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 nhiều ví dụ về cách bạn có thể kiểm soát hành vi cuộn.

Nhỏ

Để tạo thanh ứng dụng trên cùng nhỏ, hãy sử dụng thành phần kết hợp TopAppBar. Ví dụ sau đây triển khai một thanh ứng dụng trên cùng cơ bản chỉ chứa tiêu đề.

Ví dụ sau đây không truyền giá trị cho TopAppBar cho scrollBehavior và do đó, 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)
    }
}
AppBar.kt

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

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

Căn giữa

Thanh ứng dụng trên cùng 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 thanh ứng dụng này, hãy sử dụng thành phần kết hợp dành riêng CenterAlignedTopAppBar.

Ví dụ này sử dụng enterAlwaysScrollBehavior() để lấy giá trị mà nó truyền cho scrollBehavior. Do đó, thanh này sẽ thu gọn khi người dùng cuộn nội dung bên trong của khung hiển thị.

@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.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ăn giữa.

Phương tiện

Thanh ứng dụng trên cùng trung bình đặt tiêu đề bên dưới mọi biểu tượng bổ sung. Để tạo một thanh ứng dụng như vậy, 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() để lấy 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 có dạng như sau, với bản minh hoạ về cách hành vi cuộn từ enterAlwaysScrollBehavior() xuất hiện:

Hình 4. Thanh ứng dụng trên cùng trung bình thu gọn khi người dùng cuộn lên và mở rộng khi người dùng cuộn xuống.

Lớn

Thanh ứng dụng trên cùng lớn tương tự như thanh ứng dụng trên cù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 thanh ứng dụng như vậy, 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() để lấy giá trị mà nó truyền cho scrollBehavior. Do đó, thanh này sẽ thu gọn khi người dùng cuộn nội dung bên trong của khung hiển thị, nhưng sau đó sẽ 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 trên cùng lớn.

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 các 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 đây:

• actions: Một loạt biểu tượng xuất hiện ở bên trái thanh. Đây thường là các hành động chính cho màn hình đã cho 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."
        )
    }
}
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 cần truyền giá trị cho actions và floatingActionButton. Trong trường hợp đó, bạn có thể tạo thanh ứng dụng ở dưới cùng tuỳ chỉnh bằng cách điền nội dung vào BottomAppBar như các vùng chứa khác.

Tài nguyên khác

• Tài liệu về Material3 – Thanh ứng dụng trên cùng
• Tài liệu về Material3 – Thanh ứng dụng ở dưới cùng
• Khung hiển thị