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

Hầu hết ứ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ổ thu gọn, chẳng hạn như màn hình điện thoại tiêu chuẩn, các đích đến thường hiển thị trong thanh điều hướng ở cuối cửa sổ. Trong một 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, thanh điều hướng cùng với ứng dụng thường là lựa chọn tốt hơn vì các nút điều hướng dễ tiếp cận hơn trong khi giữ bên trái và bên phải của thiết bị.

NavigationSuiteScaffold đơn giản hoá việc chuyển đổi giữa các giao diện người dùng điều hướng bằng cách hiển thị 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 việc tự động thay đổi giao diện người dùng trong quá trình thay đổi kích thước cửa sổ trong 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ị ở tư thế trên mặt bàn
  • Dải điều hướng cho mọi nội dung khác
Hình 1. NavigationSuiteScaffold hiển thị một thanh điều hướng trong các cửa sổ thu gọn.
Hình 2. NavigationSuiteScaffold hiển thị dải điều hướng trong các cửa sổ mở rộng.

Thêm phần phụ thuộc

NavigationSuiteScaffold là một phần của thư viện Bộ điều hướng thích ứng Material3. 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:

Kotlin

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

Groovy

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

Tạo một giàn giáo

Hai phần chính của NavigationSuiteScaffold là các mục của 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 bộ điều hướng trong một thành phần kết hợp, nhưng thông thường, bạn sẽ xác định các mục này ở nơi khác, chẳng hạn như 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 việc này 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 được sử dụng trên các thanh điều hướng, dải điều hướng và ngăn. Để tạo các mục điều hướng, bạn lặp lại 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 nội dung đích, hãy sử dụng giá trị currentDestination để quyết định giao diện người dùng sẽ hiển thị. Nếu bạn sử dụng thư viện điều hướng trong ứng dụng, hãy sử dụng thư viện đó tại đây để hiển thị đích đến thích hợp. Câu lệnh when có thể đủ:

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 mà scaffolding chiếm, thường là toàn bộ cửa sổ. Ngoài ra, giàn giáo còn vẽ giao diện người dùng điều hướng cụ thể, chẳng hạn như NavigationBar. Cả giao diện người dùng và giao diện điều hướng đều sử dụng các giá trị được chỉ định trong giao diện của ứng dụng, nhưng bạn có thể ghi đè các giá trị giao diện.

Tham số containerColor chỉ định màu của nền tảng. Giá trị mặc định là màu nền của bảng phối màu. Tham số contentColor chỉ định màu của nội dung trên nền tảng đó. Giá trị mặc định là màu "bật" 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, thì contentColor sẽ sử dụng màu onBackground. Hãy xem phần Tuỳ chỉnh giao diện Material Design 3 trong Compose để biết thêm thông tin chi tiết về cách hoạt động của hệ thống màu. Khi ghi đè các giá trị này, hãy sử dụng các giá trị được xác định trong giao diện để ứng dụng của bạn hỗ trợ chế độ hiển thị sáng và tối:

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 giao diện NavigationSuiteScaffold. Giá trị mặc định cho màu giao diện người dùng do NavigationSuiteDefaults.colors() cung cấp, 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à mặc định, hãy 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 chỉ định màu cho các mục trong thanh điều hướng, dải điều hướng và ngăn điều hướng. Điều đó có nghĩa là bạn có thể sử dụng màu giống nhau trên mỗi loại giao diện người dùng điều hướng hoặc bạn có thể thay đổi màu sắc dựa trên nhu cầu của mình. Xác định màu sắc ở 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 đè các màu 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 thành phần điều hướng

Hành vi mặc định của NavigationSuiteScaffold thay đổi giao diện người dùng điều hướng dựa trên các lớp kích thước cửa sổ. 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 duy nhất cho một nguồn cấp dữ liệu, thì ứng dụng có thể sử 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 hành vi 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

Trước
Hỗ trợ chế độ kết xuất cửa sổ trên màn hình
Tiếp
Xây dựng bố cục danh sách-chi tiết