BottomNavigation: โครงสร้างและการตั้งค่าใน Jetpack Compose

BottomNavigation ใน Jetpack Compose คืออะไร?

BottomNavigation เป็นคอมโพเนนต์ Material Design สำหรับแถบนำทางด้านล่างที่แสดงรายการเมนูสามถึงห้ารายการ ใน Jetpack Compose จะใช้งานผ่านฟังก์ชัน Composable BottomNavigation (Material2) และ NavigationBar (Material3) แถบจะวางอยู่ที่ด้านล่างของหน้าจอและให้การเข้าถึงส่วนหลักของแอปพลิเคชันได้อย่างรวดเร็ว

วัตถุประสงค์หลักของ BottomNavigation คือการจัดระเบียบการนำทางหลักระหว่างปลายทางระดับหน้าจอ แต่ละรายการในแผงแทนหน้าจอแยกต่างหาก (หน้าแรก, ค้นหา, โปรไฟล์) การแตะจะเปลี่ยนเนื้อหาในพื้นที่หลักของหน้าจอ BottomNavigation ไม่ได้ออกแบบมาสำหรับการนำทางแบบซ้อน — สำหรับสิ่งนั้นจะใช้แท็บที่ด้านบน

ตามแนวทางการออกแบบ Material Design (2025) แถบด้านล่างควรมีเฉพาะส่วนที่เข้าถึงได้จากทุกจุดของแอปพลิเคชัน การซ่อนแถบบนหน้าจอย่อย (เช่น เมื่อเปิดหน้ารายละเอียด) เป็นแนวปฏิบัติมาตรฐาน ใน Compose การมองเห็นของ BottomNavigation ถูกควบคุมผ่านสถานะ Scaffold หรือการเรนเดอร์แบบมีเงื่อนไขตามเส้นทางปัจจุบันของ NavController

ใน Material3 แนะนำให้ใช้ NavigationBar แทน BottomNavigation แบบเก่า NavigationBar ประกอบด้วยสีไดนามิก การรองรับ WindowInsets และแอนิเมชันการกดที่ดีขึ้น ตาม Google NavigationBar เป็นคอมโพเนนต์ที่มองไปข้างหน้า ในขณะที่ BottomNavigation จาก M2 ยังคงอยู่เพื่อความเข้ากันได้ย้อนหลังเท่านั้น

องค์ประกอบ NavigationBar: ไอคอน ป้าย และป้ายแจ้งเตือน

แต่ละรายการของ NavigationBar ถูกใช้งานผ่าน Composable NavigationBarItem พารามิเตอร์: icon (ไอคอน), label (ป้ายข้อความ), selected (สถานะการเลือก) และ onClick (การเรียกกลับ) NavigationBarItem ใช้สีที่เลือก (primary) โดยอัตโนมัติและสร้างแอนิเมชันการเปลี่ยนขนาดไอคอนเมื่อเปิดใช้งาน

@Composable
fun BottomNavBar() {
    val items = listOf(
        Screen.Home,
        Screen.Search,
        Screen.Profile
    )
    var selectedItem by remember { mutableIntStateOf(0) }
    NavigationBar {
        items.forEachIndexed { index, item ->
            NavigationBarItem(
                icon = { Icon(item.icon, contentDescription = item.label) },
                label = { Text(item.label) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
            )
        }
    }
}

ไอคอนสำหรับ NavigationBarItem ควรเป็น แบบเติม (Filled) สำหรับสถานะที่เลือกและ แบบโครงร่าง (Outlined) สำหรับสถานะที่ไม่ได้เลือก Material Icons มีทั้งสองชุด: Icons.Filled.Home และ Icons.Outlined.Home โดยค่าเริ่มต้น NavigationBarItem จะแสดงแบบเติมสำหรับสถานะที่เลือก หากต้องการแสดงผลต่างกัน ให้ส่งไอคอนแบบมีเงื่อนไข: if (selected) Filled.X else Outlined.X

ความยาวของป้ายข้อความไม่ควรเกิน 12 ตัวอักษร (ละติน) หรือ 8 ตัวอักษร (ซีริลลิก) ป้ายยาวจะถูกตัดด้วยจุดไข่ปลา สำหรับป้าย ให้ใช้ maxLines = 1 และ ellipsis = TextTruncation.Ellipsis หากต้องแสดงป้ายเสมอ ให้ลบพารามิเตอร์ alwaysShowLabel = true (ค่าเริ่มต้นคือ true)

การเชื่อมต่อ BottomNavigation กับ NavHost

การอัปเดต selectedItem โดยตรงไม่ได้เรียกการนำทาง — การเปลี่ยนหน้าจอจำเป็นต้องรวมเข้ากับ NavController รูปแบบทั่วไป: onClick ใน NavigationBarItem เรียก navController.navigate(route) และ selectedItem ถูกกำหนดจากเส้นทางปัจจุบันของ NavController

NavController เก็บสแต็กย้อนกลับปัจจุบัน เพื่อตรวจสอบว่ารายการแผงใดถูกเลือก ให้เปรียบเทียบเส้นทางปัจจุบัน (navController.currentBackStackEntryAsState().value?.destination?.route) กับเส้นทางของรายการ หากเส้นทางตรงกัน รายการนั้นจะถือว่าถูกเลือก ซึ่งจะกำจัดการซ้ำซ้อนของสถานะ

@Composable
fun MainScreen(navController: NavController) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route
    Scaffold(
        bottomBar = {
            NavigationBar {
                items.forEach { item ->
                    NavigationBarItem(
                        icon = { Icon(item.icon, contentDescription = item.label) },
                        label = { Text(item.label) },
                        selected = currentRoute == item.route,
                        onClick = {
                            navController.navigate(item.route) {
                                popUpTo(navController.graph.findStartDestination().id) {
                                    saveState = true
                                }
                                launchSingleTop = true
                                restoreState = true
                            }
                        }
                    )
                }
            }
        }
    ) { /* content */ }
}

การตั้งค่าหลักใน navigate(): popUpTo(startDestination) ป้องกันการสะสมของสแต็กย้อนกลับเมื่อเปลี่ยนแท็บ launchSingleTop ป้องกันการซ้ำซ้อนของเส้นทางในสแต็ก และ restoreState กู้คืนสถานะของแท็บที่เยี่ยมชมก่อนหน้านี้ หากไม่มีพารามิเตอร์เหล่านี้ แต่ละคลิกจะสร้างรายการใหม่ในสแต็ก ซึ่งนำไปสู่พฤติกรรมที่ไม่ถูกต้องของปุ่มย้อนกลับ

NavigationBar ใน Material3: สีไดนามิกและการปรับตัว

Material3 (M3) มี NavigationBar และ NavigationBarItem แทน BottomNavigation จาก Material2 ข้อดีหลักของ M3: สีไดนามิก ความสูงที่ปรับเปลี่ยนได้ แอนิเมชันริปเปิลเต็มความกว้าง และการรองรับ WindowInsets สำหรับระบบนำทาง

สีไดนามิกเลือกสี NavigationBar โดยอัตโนมัติตามวอลเปเปอร์ของอุปกรณ์ (Android 12+) รายการที่ใช้งานจะถูกระบายสีด้วย primary รายการที่ไม่ใช้งานด้วย onSurfaceVariant โดยค่าเริ่มต้น NavigationBar จะยกขึ้นเหนือระบบนำทางผ่าน Modifier.navigationBarsPadding() สำหรับการควบคุมด้วยตนเอง ให้ใช้พารามิเตอร์ windowInsets

NavigationBar ใน M3 จะสร้างแอนิเมชันความกว้างของรายการที่ใช้งานโดยอัตโนมัติ — ไอคอนเลื่อนไปทางซ้ายและป้ายขยายออก แอนิเมชันใช้เวลา 300 ms และใช้ easing มาตรฐานของ Compose หากไม่ต้องการพฤติกรรมนี้ ให้แสดงป้ายเสมอผ่าน alwaysShowLabel = true ใน NavigationBarItem

การปรับแต่งสี NavigationBar

เพื่อแทนที่สี ให้ส่ง NavigationBarColors ในพารามิเตอร์ colors โดยค่าเริ่มต้นจะใช้ NavigationBarDefaults.colors() แต่สามารถตั้งค่าที่กำหนดเองได้: containerColor (พื้นหลังแถบ), contentColor (สีไอคอน), indicatorColor (พื้นหลังรายการที่ใช้งาน) แตกต่างจาก M2 ที่ตั้งสีผ่าน BottomNavigationDefaults M3 ใช้อินเทอร์เฟซ NavColors แบบรวม

หากโปรเจกต์ใช้ BottomNavigation จาก M2 (androidx.compose.material) Google แนะนำให้ย้ายไปใช้ NavigationBar จาก M3 การย้ายรวมถึงการเปลี่ยน imports การอัปเดตพารามิเตอร์ และการเพิ่ม @OptIn(ExperimentalMaterial3Api::class) BottomNavigation จาก M2 ถือว่าล้าสมัยและไม่ได้รับคุณสมบัติใหม่

การจัดการสถานะแท็บที่เลือก

สถานะของ NavigationBar เก็บดัชนีของรายการที่เลือกอยู่ในปัจจุบัน ในกรณีง่าย ๆ จะใช้ remember { mutableIntStateOf(0) } อย่างไรก็ตาม สำหรับแอปพลิเคชันในระดับโปรดักชัน ดัชนีควรซิงโครไนซ์กับกราฟนำทาง ไม่ใช่สถานะ UI ในเครื่อง

วิธีการหลักในการจัดการสถานะ: แบบ NavController (แนะนำ) และ แบบ ViewModel ในกรณีแรก selectedItem คำนวณจากเส้นทางปัจจุบันของ NavController ในกรณีที่สอง ViewModel เก็บหน้าจอปัจจุบัน และ NavigationBarItem อ่าน StateFlow จาก ViewModel แบบ NavController ง่ายกว่า แบบ ViewModel ให้การควบคุมมากกว่าสำหรับตรรกะที่ซับซ้อน (การยืนยันตัวตน การทดสอบ A/B)

เมื่อใช้ saveState และ restoreState NavController จะบันทึกและกู้คืนสถานะของ LazyColumn และคอมโพเนนต์อื่น ๆ ภายในแต่ละแท็บโดยอัตโนมัติ ซึ่งช่วยลดความจำเป็นในการใช้ ViewModel เพื่อเก็บตำแหน่งการเลื่อน อย่างไรก็ตาม การบันทึกใช้ไม่ได้กับช่องป้อนข้อมูล — จำเป็นต้องใช้ SavedStateHandle หรือ ViewModel

ป้ายแจ้งเตือนและตัวนับบนรายการ

Badge เป็นตัวบ่งชี้การแจ้งเตือนขนาดกะทัดรัดที่แสดงบนไอคอน NavigationBarItem ใน Material3 ป้ายแจ้งเตือนถูกใช้งานผ่าน BadgedBox ซึ่งห่อหุ้มไอคอนและวางป้ายไว้ที่มุมบนขวา ป้ายสามารถประกอบด้วยตัวเลข (จำนวนการแจ้งเตือน) หรือจุด (ตัวบ่งชี้การมีอยู่แบบง่าย)

@Composable
fun HomeItem(unreadCount: Int) {
    NavigationBarItem(
        icon = {
            BadgedBox(badge = {
                if (unreadCount > 0) {
                    Badge { Text(unreadCount.toString()) }
                }
            }) {
                Icon(Icons.Filled.Home, contentDescription = "หน้าแรก")
            }
        },
        label = { Text("Home") },
        selected = false,
        onClick = { }
    )
}

BadgedBox จะวาง Badge โดยอัตโนมัติที่มุมบนขวาขององค์ประกอบย่อย หากจำนวนเกิน 99 Badge จะแสดง "99+" เพื่อซ่อนป้ายเมื่อค่าเป็นศูนย์ ให้ใช้ if (count > 0) Badge จาก Material3 มีค่าเริ่มต้นเป็นสี error (แดง) พร้อมข้อความสีขาว ปรับแต่งผ่าน BadgeDefaults.colors(containerColor, contentColor)

ใน Material2 ไม่มีป้ายแจ้งเตือน — ต้องวาดด้วยตนเองผ่าน Canvas หรือใช้ไลบรารีของบุคคลที่สาม Material3 แก้ปัญหานี้ด้วยคอมโพเนนต์พื้นเมือง ตาม Android Developers (2025) BadgedBox ถูกใช้ใน 40% ของแอปที่มี NavigationBar โดย 60% ใช้แสดงข้อความที่ยังไม่ได้อ่าน