สร้างการนำทางแบบปรับอัตโนมัติ

แอปส่วนใหญ่มีปลายทางระดับบนสุด 2-3 แห่งที่เข้าถึงได้ผ่าน UI การนำทางหลักของแอป ในหน้าต่างขนาดกะทัดรัด เช่น จอแสดงผลโทรศัพท์มาตรฐาน ปลายทางมักจะแสดงในแถบนำทางที่ด้านล่างของหน้าต่าง ในหน้าต่างที่ขยาย เช่น แอปแบบเต็มหน้าจอในแท็บเล็ต แถบนำทางข้างแอปมักจะเป็นตัวเลือกที่ดีกว่าเนื่องจากตัวควบคุมการนำทางจะเข้าถึงได้ง่ายกว่าขณะถืออุปกรณ์ด้านซ้ายและขวา

NavigationSuiteScaffold ช่วยให้การสลับระหว่าง UI การนำทางง่ายขึ้นโดยแสดง UI การนำทาง Composable ที่เหมาะสมตาม WindowSizeClass ซึ่งรวมถึงการเปลี่ยน UI แบบไดนามิกในระหว่างการเปลี่ยนขนาดหน้าต่างขณะรันไทม์ ลักษณะการทำงานเริ่มต้นคือการแสดงองค์ประกอบ UI อย่างใดอย่างหนึ่งต่อไปนี้

  • แถบนำทางหากความกว้างหรือความสูงมีขนาดกะทัดรัด หรือหากอุปกรณ์อยู่ในท่าตั้งบนโต๊ะ
  • แถบนำทางด้านข้างสำหรับสิ่งอื่นๆ ทั้งหมด
รูปที่ 1 NavigationSuiteScaffold แสดงแถบนำทางในหน้าต่างขนาดกะทัดรัด
รูปที่ 2 NavigationSuiteScaffold แสดงแถบนำทางในหน้าต่างที่ขยาย

เพิ่มทรัพยากร Dependency

NavigationSuiteScaffold เป็นส่วนหนึ่งของไลบรารีชุดการนำทางแบบปรับอัตโนมัติของ Material3 เพิ่มทรัพยากร Dependency สำหรับไลบรารีในไฟล์ build.gradle ของแอปหรือโมดูล

Kotlin

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

ดึงดูด

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

สร้างโครงสร้างพื้นฐาน

NavigationSuiteScaffold มี 2 ส่วนหลักๆ ได้แก่ รายการชุดการนำทางและเนื้อหาสำหรับปลายทางที่เลือก คุณสามารถกำหนดรายการชุดการนำทางใน 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.
}

ภายในแลมบ์ดาเนื้อหาปลายทาง ให้ใช้ค่า currentDestination เพื่อตัดสินใจว่าจะแสดง UI ใด หากคุณใช้ไลบรารีการนำทางในแอป ให้ใช้ไลบรารีดังกล่าวที่นี่เพื่อแสดงปลายทางที่เหมาะสม คำสั่ง when สามารถใช้ได้ดังนี้

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

เปลี่ยนสี

NavigationSuiteScaffold จะสร้าง Surface เหนือพื้นที่ทั้งหมดที่ Scaffold ครอบครอง ซึ่งโดยทั่วไปจะเป็นทั้งหน้าต่าง นอกจากนี้ Scaffold ยังวาด UI การนำทางที่เฉพาะเจาะจง เช่น NavigationBar ทั้งแพลตฟอร์มและ UI การนำทางจะใช้ค่าที่ระบุไว้ในธีมของแอป แต่คุณสามารถลบล้างค่าธีมได้

พารามิเตอร์ containerColor จะระบุสีของพื้นผิว ค่าเริ่มต้นคือสีพื้นหลังของรูปแบบสี พารามิเตอร์ contentColor จะระบุสีของเนื้อหาบนพื้นผิวนั้น ค่าเริ่มต้นคือสี "เปิด" ของสิ่งที่ระบุไว้สำหรับ containerColor เช่น หาก containerColor ใช้สี background contentColor จะใช้สี onBackground ดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการทำงานของระบบสีได้ที่การกำหนดธีม Material Design 3 ใน Compose เมื่อลบล้างค่าเหล่านี้ ให้ใช้ค่าที่กำหนดไว้ในธีมเพื่อให้แอปรองรับโหมดการแสดงผลมืดและสว่าง ดังนี้

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

UI การนำทางจะแสดงอยู่ด้านหน้าพื้นผิว NavigationSuiteScaffold NavigationSuiteDefaults.colors() จะระบุค่าเริ่มต้นสำหรับสี UI แต่คุณสามารถลบล้างค่าเหล่านี้ได้เช่นกัน ตัวอย่างเช่น หากต้องการให้พื้นหลังของแถบนำทางโปร่งใส แต่ต้องการให้ค่าอื่นๆ เป็นค่าเริ่มต้น ให้ลบล้าง 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.isWidthAtLeastBreakpoint(WIDTH_DP_EXPANDED_LOWER_BOUND)) {
        NavigationSuiteType.NavigationDrawer
    } else {
        NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(adaptiveInfo)
    }
}

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

แหล่งข้อมูลเพิ่มเติม