แอปส่วนใหญ่มีปลายทางระดับบนสุดไม่กี่แห่งที่เข้าถึงได้ผ่าน UI การไปยังส่วนต่างๆ หลักของแอป ในหน้าต่างขนาดกะทัดรัด เช่น โทรศัพท์มาตรฐาน ปลายทางก็จะแสดงในแถบนำทางที่ ด้านล่างของหน้าต่าง ในหน้าต่างที่ขยาย เช่น แอปแบบเต็มหน้าจอบน แท็บเล็ต แถบนำทางที่วางควบคู่ไปกับแอป จึงเป็นตัวเลือกที่ดีกว่าเนื่องจาก เข้าถึงการควบคุมการนำทางได้ง่ายขึ้นเมื่อแตะฝั่งซ้ายและขวาค้างไว้ ของอุปกรณ์
NavigationSuiteScaffold
ช่วยให้การเปลี่ยนอุปกรณ์ง่ายขึ้น
ระหว่าง UI การนำทางด้วยการแสดง UI การนำทางที่เหมาะสม Composable
จาก WindowSizeClass
ซึ่งรวมถึงแบบไดนามิก
การเปลี่ยน UI ระหว่างการเปลี่ยนขนาดหน้าต่างรันไทม์ ลักษณะการทำงานเริ่มต้นคือการ
แสดงคอมโพเนนต์ UI อย่างใดอย่างหนึ่งต่อไปนี้
- แถบนำทาง หากความกว้างหรือความสูงมีขนาดกะทัดรัด หรือหากอุปกรณ์อยู่ใน ท่าตั้งโต๊ะ
- ระบบนำทางสำหรับสิ่งอื่นๆ ที่เหลือ
![](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/navigationsuitescaffold_with_nav_bar.png?authuser=5&hl=th)
NavigationSuiteScaffold
แสดงแถบนำทางในหน้าต่างขนาดกะทัดรัด
![](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/navigationsuitescaffold_with_nav_rail.png?authuser=5&hl=th)
NavigationSuiteScaffold
แสดงแถบนำทางในหน้าต่างที่ขยาย
เพิ่มทรัพยากร Dependency
NavigationSuiteScaffold
เป็นส่วนหนึ่งของ
ชุดการนำทางแบบปรับอัตโนมัติของ Material3
ไลบรารี เพิ่มทรัพยากร Dependency สำหรับไลบรารีในไฟล์ build.gradle
ของแอป
หรือโมดูล:
Kotlin
implementation("androidx.compose.material3:material3-adaptive-navigation-suite")
ดึงดูด
implementation 'androidx.compose.material3:material3-adaptive-navigation-suite'
สร้างนั่งร้าน
2 ส่วนหลักของ NavigationSuiteScaffold
คือรายการชุดการนำทาง
และเนื้อหาสำหรับปลายทางที่เลือก คุณสามารถระบุ
รายการชุดการนำทางใน Composable แต่เป็นเรื่องปกติที่จะมีการกำหนดรายการเหล่านี้
ที่อื่น เช่น ใน 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), }
หากต้องการใช้ NavigationSuiteScaffold
คุณต้องติดตามปลายทางปัจจุบัน ซึ่ง
คุณสามารถทำได้โดยใช้ rememberSaveable
:
var currentDestination by rememberSaveable { mutableStateOf(AppDestinations.HOME) }
ในตัวอย่างต่อไปนี้ พารามิเตอร์ navigationSuiteItems
(ประเภท
NavigationSuiteScope
จะใช้ฟังก์ชัน item
เพื่อกำหนด UI การนำทางสำหรับปลายทางแต่ละแห่ง UI ปลายทางคือ
ใช้ในแถบนำทาง แถบ และลิ้นชัก หากต้องการสร้างรายการนำทาง คุณต้อง
วนซ้ำ AppDestinations
ของคุณ (ตามที่กำหนดไว้ในข้อมูลโค้ดก่อนหน้า):
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. }
ภายใน lambda ของเนื้อหาปลายทาง ให้ใช้ค่า currentDestination
เพื่อ
กำหนดว่าจะแสดง UI ใด หากใช้ไลบรารีการนำทางในแอป ให้ใช้ไลบรารีนี้
ที่นี่เพื่อแสดงปลายทางที่เหมาะสม เงื่อนไขว่าเมื่อใดควรเพียงพอ ดังนี้
NavigationSuiteScaffold( navigationSuiteItems = { /*...*/ } ) { // Destination content. when (currentDestination) { AppDestinations.HOME -> HomeDestination() AppDestinations.FAVORITES -> FavoritesDestination() AppDestinations.SHOPPING -> ShoppingDestination() AppDestinations.PROFILE -> ProfileDestination() } }
เปลี่ยนสี
NavigationSuiteScaffold
สร้าง Surface
ทั่วทั้งพื้นที่
นั่งร้านมักจะกินพื้นที่หน้าต่างเต็ม นอกจากนี้ นั่งร้าน
วาด UI การไปยังส่วนต่างๆ โดยเฉพาะ เช่น NavigationBar
ทั้งพื้นผิวและ UI การนำทางใช้ค่าที่ระบุไว้ใน
ธีมใหม่ แต่คุณสามารถลบล้างค่าของธีมได้
พารามิเตอร์ containerColor
จะระบุสีของพื้นผิว ค่าเริ่มต้น
คือสีพื้นหลังของรูปแบบสีของคุณ พารามิเตอร์ contentColor
ระบุสีของเนื้อหาบนพื้นผิวนั้น ค่าเริ่มต้นคือ "on" สี
ของค่าใดๆ ที่ระบุไว้สำหรับ containerColor
ตัวอย่างเช่น หาก containerColor
ใช้สี background
จากนั้น contentColor
จะใช้สี onBackground
ดูธีมดีไซน์ Material 3 ใน Compose
เพื่อดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการทำงานของระบบสี เมื่อลบล้างค่าเหล่านี้
ใช้ค่าที่กำหนดไว้ในธีมเพื่อให้แอปรองรับการแสดงผลแบบมืดและสว่าง
โหมด:
NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, containerColor = MaterialTheme.colorScheme.primary, contentColor = MaterialTheme.colorScheme.onPrimary, ) { // Content... }
UI การนำทางถูกวาดไว้ที่ด้านหน้าของพื้นผิว NavigationSuiteScaffold
ค่าเริ่มต้นสำหรับสี UI มาจาก
NavigationSuiteDefaults.colors()
แต่คุณ
สามารถลบล้างค่าเหล่านี้ได้ด้วย เช่น ถ้าต้องการพื้นหลังของ
แถบนำทางให้โปร่งใส แต่ค่าอื่นๆ กลับเป็นค่าเริ่มต้น
ลบล้าง navigationBarContainerColor
:
NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, navigationSuiteColors = NavigationSuiteDefaults.colors( navigationBarContainerColor = Color.Transparent, ) ) { // Content... }
สุดท้ายนี้คุณปรับแต่งแต่ละรายการได้ใน UI การนำทาง เมื่อเรียกใช้เมธอด
item
คุณสามารถส่งต่อในอินสแตนซ์
NavigationSuiteItemColors
คลาสจะระบุ
สีของรายการต่างๆ ในแถบนำทาง แถบนำทาง และการนำทาง
ลิ้นชัก ซึ่งหมายความว่าคุณสามารถมีสีที่เหมือนกันใน UI การไปยังส่วนต่างๆ แต่ละประเภทได้
หรือคุณสามารถเลือกสีที่แตกต่างกันตามความต้องการของคุณ กําหนดสีที่
ระดับ NavigationSuiteScaffold
เพื่อใช้อินสแตนซ์ของออบเจ็กต์เดียวกันสำหรับรายการทั้งหมดได้
และเรียกฟังก์ชัน NavigationSuiteDefaults.itemColors()
เพื่อลบล้างเท่านั้น
รายการที่ต้องการเปลี่ยนแปลง:
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... }
ปรับแต่งประเภทการนำทาง
ลักษณะการทำงานเริ่มต้นของ NavigationSuiteScaffold
จะเปลี่ยน UI การไปยังส่วนต่างๆ
ตามขนาดหน้าต่าง
ชั้นเรียน อย่างไรก็ตาม คุณ
คุณอาจต้องลบล้างลักษณะการทำงานนี้ ตัวอย่างเช่น ถ้าแอปของคุณแสดงรายการเดียว
หน้าต่างเนื้อหาขนาดใหญ่สำหรับฟีด แอปอาจใช้การนำทางแบบถาวรได้
ลิ้นชักสำหรับหน้าต่างที่ขยายแล้ว แต่ยังคงกลับไปใช้ลักษณะการทำงานเริ่มต้นของ
คลาสขนาดกะทัดรัดและขนาดกลาง:
val adaptiveInfo = currentWindowAdaptiveInfo() val customNavSuiteType = with(adaptiveInfo) { if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.EXPANDED) { NavigationSuiteType.NavigationDrawer } else { NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(adaptiveInfo) } } NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, layoutType = customNavSuiteType, ) { // Content... }
แหล่งข้อมูลเพิ่มเติม
ดูคำแนะนำเกี่ยวกับดีไซน์ Material
ดูคอมโพเนนต์ไลบรารี androidx.compose.material3
รายการต่อไปนี้