Xây dựng chế độ điều hướng thích ứng

Hầu hết các ứng dụng đều có một vài đích đến cấp cao nhất có thể truy cập được thông qua giao diện người dùng điều hướng chính của ứng dụng. Trong các cửa sổ nhỏ gọn, chẳng hạn như điện thoại tiêu chuẩn màn hình, đích đến thường được hiển thị trong thanh điều hướng ở cuối cửa sổ. Trong cửa sổ mở rộng, chẳng hạn như ứng dụng toàn màn hình trên máy tính bảng, dải điều hướng dọc theo ứng dụng thường là lựa chọn tốt hơn vì bạn có thể dễ dàng tiếp cận các nút điều khiển điều hướng hơn khi giữ cạnh bên trái và bên phải của thiết bị.

NavigationSuiteScaffold đơn giản hoá quá trình chuyển đổi giữa các giao diện người dùng điều hướng bằng cách cho thấy thành phần kết hợp giao diện người dùng điều hướng thích hợp dựa trên WindowSizeClass. Điều này bao gồm động thay đổi giao diện người dùng trong các thay đổi về kích thước cửa sổ thời gian chạy. Hành vi mặc định là hiển thị một trong các thành phần giao diện người dùng sau:

• Thanh điều hướng nếu chiều rộng hoặc chiều cao nhỏ gọn hoặc nếu thiết bị đang ở tư thế trên mặt bàn
• Dải điều hướng cho mọi thao tác khác

Thêm phần phụ thuộc

NavigationSuiteScaffold là một phần của Bộ công cụ điều hướng thích ứng Material3 thư viện của bạn. Thêm phần phụ thuộc cho thư viện trong tệp build.gradle của ứng dụng hoặc mô-đun:

implementation("androidx.compose.material3:material3-adaptive-navigation-suite")

implementation 'androidx.compose.material3:material3-adaptive-navigation-suite'

Tạo một scaffold (giàn giáo)

Hai phần chính của NavigationSuiteScaffold là các mục trong bộ điều hướng và nội dung cho đích đến đã chọn. Bạn có thể trực tiếp xác định các mục của bộ điều hướng trong một thành phần kết hợp, nhưng chúng ta thường sẽ xác định các mục này ở nơi khác, ví dụ: trong một enum:

enum class AppDestinations(
    @StringRes val label: Int,
    val icon: ImageVector,
    @StringRes val contentDescription: Int
) {
    HOME(R.string.home, Icons.Default.Home, R.string.home),
    FAVORITES(R.string.favorites, Icons.Default.Favorite, R.string.favorites),
    SHOPPING(R.string.shopping, Icons.Default.ShoppingCart, R.string.shopping),
    PROFILE(R.string.profile, Icons.Default.AccountBox, R.string.profile),
}
SampleNavigationSuiteScaffold.kt

Để sử dụng NavigationSuiteScaffold, bạn phải theo dõi đích đến hiện tại. bạn có thể thực hiện bằng cách sử dụng rememberSaveable:

var currentDestination by rememberSaveable { mutableStateOf(AppDestinations.HOME) }
SampleNavigationSuiteScaffold.kt

Trong ví dụ sau, tham số navigationSuiteItems (loại NavigationSuiteScope sử dụng hàm item để xác định giao diện người dùng điều hướng cho một đích đến riêng lẻ. Giao diện người dùng đích là được sử dụng trên thanh điều hướng, dải và ngăn điều hướng. Để tạo các mục điều hướng, bạn lặp lại qua AppDestinations (được xác định trong đoạn mã trước):

NavigationSuiteScaffold(
    navigationSuiteItems = {
        AppDestinations.entries.forEach {
            item(
                icon = {
                    Icon(
                        it.icon,
                        contentDescription = stringResource(it.contentDescription)
                    )
                },
                label = { Text(stringResource(it.label)) },
                selected = it == currentDestination,
                onClick = { currentDestination = it }
            )
        }
    }
) {
    // TODO: Destination content.
}
SampleNavigationSuiteScaffold.kt

Trong lambda của nội dung đích, hãy dùng giá trị currentDestination để quyết định giao diện người dùng nào sẽ hiển thị. Nếu bạn dùng một thư viện điều hướng trong ứng dụng, hãy dùng thư viện đó ở đây để hiển thị đích đến thích hợp. Câu lệnh when có thể là đủ:

NavigationSuiteScaffold(
    navigationSuiteItems = { /*...*/ }
) {
    // Destination content.
    when (currentDestination) {
        AppDestinations.HOME -> HomeDestination()
        AppDestinations.FAVORITES -> FavoritesDestination()
        AppDestinations.SHOPPING -> ShoppingDestination()
        AppDestinations.PROFILE -> ProfileDestination()
    }
}
SampleNavigationSuiteScaffold.kt

Thay đổi màu sắc

NavigationSuiteScaffold tạo một Surface trên toàn bộ khu vực Scaffold chiếm, thường là toàn cửa sổ. Trên hết, scaffold (giàn giáo) vẽ một giao diện người dùng điều hướng cụ thể, chẳng hạn như NavigationBar. Cả nền tảng và giao diện người dùng điều hướng đều sử dụng các giá trị được chỉ định trong giao diện nhưng bạn có thể ghi đè các giá trị giao diện.

Tham số containerColor chỉ định màu của bề mặt. Mặc định là màu nền trong bảng phối màu của bạn. Tham số contentColor chỉ định màu của nội dung trên bề mặt đó. Mặc định là "bật" màu của bất kỳ giá trị nào được chỉ định cho containerColor. Ví dụ: nếu containerColor sử dụng màu background, sau đó contentColor sử dụng màu onBackground. Xem Tuỳ chỉnh giao diện Material Design 3 trong Compose để biết thêm chi tiết về cách hoạt động của hệ màu. Khi ghi đè các giá trị này, dùng các giá trị được xác định trong giao diện để ứng dụng hỗ trợ giao diện tối và sáng chế độ:

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    containerColor = MaterialTheme.colorScheme.primary,
    contentColor = MaterialTheme.colorScheme.onPrimary,
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

Giao diện người dùng điều hướng được vẽ trước khu vực NavigationSuiteScaffold. Giá trị mặc định cho màu của giao diện người dùng được cung cấp bởi NavigationSuiteDefaults.colors(), nhưng bạn cũng có thể ghi đè các giá trị này. Ví dụ: nếu bạn muốn nền của thanh điều hướng trong suốt nhưng các giá trị khác là giá trị mặc định, ghi đè navigationBarContainerColor:

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    navigationSuiteColors = NavigationSuiteDefaults.colors(
        navigationBarContainerColor = Color.Transparent,
    )
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

Cuối cùng, bạn có thể tuỳ chỉnh từng mục trong giao diện người dùng điều hướng. Khi gọi hàm item, bạn có thể truyền vào một thực thể của NavigationSuiteItemColors. Lớp này sẽ chỉ định màu của các mục trong thanh điều hướng, dải điều hướng và thanh điều hướng ngăn. Tức là bạn có thể sử dụng màu giống nhau trên từng loại giao diện người dùng điều hướng, hoặc có thể thay đổi màu sắc theo nhu cầu của mình. Xác định màu ở Cấp độ NavigationSuiteScaffold để sử dụng cùng một thực thể đối tượng cho tất cả các mục và gọi hàm NavigationSuiteDefaults.itemColors() để chỉ ghi đè những danh sách mà bạn muốn thay đổi:

val myNavigationSuiteItemColors = NavigationSuiteDefaults.itemColors(
    navigationBarItemColors = NavigationBarItemDefaults.colors(
        indicatorColor = MaterialTheme.colorScheme.primaryContainer,
        selectedIconColor = MaterialTheme.colorScheme.onPrimaryContainer
    ),
)

NavigationSuiteScaffold(
    navigationSuiteItems = {
        AppDestinations.entries.forEach {
            item(
                icon = {
                    Icon(
                        it.icon,
                        contentDescription = stringResource(it.contentDescription)
                    )
                },
                label = { Text(stringResource(it.label)) },
                selected = it == currentDestination,
                onClick = { currentDestination = it },
                colors = myNavigationSuiteItemColors,
            )
        }
    },
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

Tuỳ chỉnh các loại điều hướng

Hành vi mặc định của NavigationSuiteScaffold sẽ thay đổi giao diện người dùng điều hướng dựa trên kích thước cửa sổ các lớp. Tuy nhiên, bạn có thể muốn ghi đè hành vi này. Ví dụ: nếu ứng dụng của bạn hiển thị một ngăn nội dung lớn cho một nguồn cấp dữ liệu, ứng dụng có thể dùng ngăn điều hướng cố định cho các cửa sổ mở rộng nhưng vẫn quay lại chế độ mặc định cho các lớp kích thước cửa sổ nhỏ gọn và trung bình:

val adaptiveInfo = currentWindowAdaptiveInfo()
val customNavSuiteType = with(adaptiveInfo) {
    if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.EXPANDED) {
        NavigationSuiteType.NavigationDrawer
    } else {
        NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(adaptiveInfo)
    }
}

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    layoutType = customNavSuiteType,
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

Tài nguyên khác

Xem hướng dẫn về Material Design:

• Thanh điều hướng
• Dải điều hướng
• Ngăn điều hướng

Hãy xem các thành phần thư viện androidx.compose.material3 sau đây:

• NavigationBar
• NavigationRail
• ModalNavigationDrawer
• PermanentNavigationDrawer