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, 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 các nút này như sau:

Loại

Diện mạo

Mục đích

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

Ở đầu màn hình.

Cung cấp quyền truy cập vào các tác vụ và thông tin chính. Thường lưu trữ 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 nút hành động nổi có trong đó.
Ví dụ về thanh ứng dụng ở trên cùng và dưới cùng.
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 thành phần kết hợp TopAppBar và BottomAppBar tương ứng. 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 thành phần điều khiển thao tác và điều hướng, đồng thời phù hợp với các nguyên tắc của Material Design.

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 các màn hình không yêu cầu nhiều thao tác điều hướng hoặc hành động.

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

Căn giữa: Dành cho các màn hình có một thao tác chính.

 Thanh ứng dụng trên cùng căn giữa

Trung bình: Dành cho màn hình yêu cầu số lượng thao tác và điều hướng ở mức trung bình.

 Thanh ứng dụng trên cùng cỡ trung bình

Lớn: Dành cho màn hình cần nhiều thao tác và thao tác điều hướng.

 Thanh ứng dụng trên cùng có kích thước lớn

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 hàng đầu khá giống nhau. Các lớp này 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 ở bên trái thanh ứng dụng.
  • actions: Biểu tượng cung cấp cho người dùng quyền truy cập vào các thao tác chính. Các nút này 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 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 một ngăn xếp nhất định. Để thực hiện việc này, hãy tạo một thực thể của TopAppBarScrollBehavior và truyền thực thể đó đế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 nội dung bên trong của ngăn 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 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 ngăn xếp.
  • 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ố tuỳ 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 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ỉ chứa một tiêu đề.

Ví dụ sau đây không truyền TopAppBar một giá trị cho scrollBehavior, do đó, ví dụ này không phản ứng với việ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:

Ví dụ về thanh ứng dụng trên cùng nhỏ.
Hình 2. Một 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, 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() để 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 scaffolding.

@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:

Viết văn bản thay thế tại đây
Hình 3. Thanh ứng dụng trên cùng căn giữa.

Trung bình

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

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

Lớn

Thanh ứng dụng trên cùng lớn tương tự như thanh ứng dụ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 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() để 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 ngăn xếp, 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:

Một màn hình trong ứng dụng có thanh ứng dụng ở dưới cùng chứa các biểu tượng hành động ở bên trái và nút hành động nổi ở bên phải.
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:

  • 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.

@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:

Một màn hình trong ứng dụng có thanh ứng dụng ở dưới cùng chứa các biểu tượng hành động ở bên trái và nút hành động nổi ở bên phải.
Hình 6. Ví dụ về cách triển khai thanh ứng dụng ở dưới cùng.

Tài nguyên khác