Bottom Navigation: พื้นฐาน BottomNavigationView และ TabView

Bottom Navigation คืออะไร?

Bottom Navigation คือรูปแบบการนำทางที่ส่วนหลักของแอปสามารถเข้าถึงได้ผ่านแผงที่ด้านล่างของหน้าจอ รูปแบบนี้กลายเป็นมาตรฐานการออกแบบมือถือเนื่องจากความสะดวกในการใช้งานด้วยมือเดียว ต่างจากเมนูด้านข้าง (Drawer) Bottom Navigation จะมองเห็นได้ตลอดเวลาและไม่ต้องใช้ท่าทางเพิ่มเติมในการเปิด

Material Design 3 (2026) กำหนด Navigation Bar เป็นคอมโพเนนต์ที่มีสามสถานะ: default (ไอคอน + ฉลาก), labeled (ฉลากขยายใหญ่, หนึ่งแท็บที่ใช้งานอยู่), และ unlabeled (ไอคอนเท่านั้น) Google แนะนำ Navigation Bar สำหรับแอปที่มี 3–5 ส่วนเท่าเทียมกัน สำหรับ 6+ ส่วน — ใช้ Navigation Drawer ใน iOS SwiftUI, TabView จะใช้แผงด้านล่างที่มีสไตล์ระบบโดยอัตโนมัติ

การศึกษาของ UX Movement (2025) แสดงให้เห็นว่า Bottom Navigation ช่วยปรับปรุงเวลาในการทำงานให้สำเร็จขึ้น 27% เมื่อเทียบกับเมนูเลื่อน เนื่องจากผู้ใช้เห็นส่วนต่างๆ ที่มีอยู่ทั้งหมดโดยไม่ต้องดำเนินการเพิ่มเติม จำนวนการแตะผิดพลาดลดลง 34% ด้วยเป้าหมายการสัมผัสขนาดใหญ่ (ขั้นต่ำ 48x48 dp บน Android, 44x44 pt บน iOS)

BottomNavigationView ใน Android (Material 3)

BottomNavigationView ใน Android เป็นคอมโพเนนต์จาก Material 3 Library (com.google.android.material.navigation.NavigationBarView) มันแทนที่ BottomNavigationView แบบเก่าจาก Material 2 และเพิ่มการรองรับสีไดนามิกของ Material You, ตัวบ่งชี้แท็บที่ใช้งานอยู่แบบเคลื่อนไหวได้ และป้ายในตัว คอมโพเนนต์ถูกกำหนดค่าผ่านเมนู XML และเข้ากันได้อย่างสมบูรณ์กับ Navigation Component

// แอคทิฟวิทีกับ BottomNavigationView และ NavHostFragment
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val navView = findViewById<NavigationBarView>(R.id.nav_view)
        val navController = findNavController(R.id.nav_host_fragment)

        // การซิงโครไนซ์การนำทางอัตโนมัติ
        navView.setupWithNavController(navController)

        // การตั้งค่าป้าย
        val badge = navView.getOrCreateBadge(R.id.navigation_messages)
        badge.number = 8
        badge.badgeGravity = BadgeDrawable.TOP_END
    }
}

// เมนู XML สำหรับ Bottom Navigation (res/menu/bottom_nav_menu.xml)
// <?xml version="1.0" encoding="utf-8"?>
// <menu xmlns:android="http://schemas.android.com/apk/res/android">
//   <item android:id="@+id/navigation_home"
//     android:icon="@drawable/ic_home"
//     android:title="หน้าแรก" />
//   <item android:id="@+id/navigation_messages"
//     android:icon="@drawable/ic_chat"
//     android:title="แชท" />
//   <item android:id="@+id/navigation_profile"
//     android:icon="@drawable/ic_person"
//     android:title="โปรไฟล์" />
// </menu>

Material 3 NavigationBarView รองรับสามโหมด labelVisibilityMode: LABEL_VISIBILITY_AUTO (ค่าเริ่มต้น — ฉลากแสดงสำหรับแท็บที่ใช้งานอยู่), LABEL_VISIBILITY_LABELED (ฉลากสำหรับทั้งหมด), LABEL_VISIBILITY_UNLABELED (ไอคอนเท่านั้น) ตัวบ่งชี้แท็บที่ใช้งานอยู่แบบเคลื่อนไหวได้ถูกกำหนดค่าผ่าน itemActiveIndicatorStyle พร้อมเอฟเฟกต์ระลอกคลื่นแบบกำหนดเอง

TabView ใน SwiftUI สำหรับ iOS

TabView คือคอนเทนเนอร์ในตัวของ SwiftUI สำหรับสร้างการนำทางด้านล่าง แต่ละแท็บถูกกำหนดโดยใช้ตัวปรับแต่ง .tabItem พร้อมไอคอนและข้อความ TabView จะสร้าง UITabBarController โดยอัตโนมัติภายใต้ฝาครอบและรองรับคุณสมบัติแผงพื้นฐานทั้งหมด: ป้าย, สีป้าย, แอนิเมชันการสลับ และการปรับตัวตาม Dynamic Type

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Label("หน้าแรก", systemImage: "house.fill")
                }
                .badge(3)

            SearchView()
                .tabItem {
                    Label("ค้นหา", systemImage: "magnifyingglass")
                }

            NotificationsView()
                .tabItem {
                    Label("การแจ้งเตือน", systemImage: "bell.fill")
                }
                .badge("12")

            ProfileView()
                .tabItem {
                    Label("โปรไฟล์", systemImage: "person.circle.fill")
                }
        }
    }
}

TabView รองรับตัวปรับแต่ง .badge (iOS 15+) ซึ่งรับ Int (ป้ายตัวเลข) หรือ String (ป้ายข้อความ) สีของป้ายสามารถเปลี่ยนได้ผ่าน .badgeProminence(.increased) — ทำให้ป้ายสว่างขึ้น แอนิเมชันการสลับแท็บถูกกำหนดค่าผ่าน .tabViewStyle(.automatic) หรือสไตล์ที่กำหนดเอง สำหรับการควบคุมการสลับโดยโปรแกรม จะใช้ @State พร้อม selection

การรวมการนำทางด้านล่างและแบบสแต็ก

Bottom Navigation ไม่ค่อยได้ใช้เพียงลำพัง — แต่ละแท็บมักจะมีตัวนำทางแบบสแต็ก (NavigationView/NavigationStack ใน SwiftUI, NavHostFragment ใน Android) การรวมกันนี้ทำให้ผู้ใช้ทั้งเข้าถึงส่วนต่างๆ ได้อย่างรวดเร็ว (Tab) และการนำทางเชิงลึกภายในแต่ละส่วน (Stack) นี่คือสถาปัตยกรรมมาตรฐานสำหรับแอประดับโปรดักชัน

struct AppTabView: View {
    var body: some View {
        TabView {
            NavigationStack {
                HomeView()
            }
            .tabItem {
                Label("หน้าแรก", systemImage: "house")
            }

            NavigationStack {
                SearchView()
            }
            .tabItem {
                Label("ค้นหา", systemImage: "magnifyingglass")
            }
        }
    }
}

// ภายใน HomeView — การนำทางแบบสแต็ก
struct HomeView: View {
    var body: some View {
        List(items) { item in
            NavigationLink("\(item.title)", value: item)
        }
        .navigationDestination(for: Item.self) { item in
            ItemDetailView(item: item)
        }
    }
}

ใน Android การรวมกันแบบเดียวกันถูกimplement ผ่าน NavHostFragment สำหรับแต่ละแท็บ Navigation Component จะทำให้การสร้างสแต็กย้อนกลับเป็นอัตโนมัติสำหรับแต่ละแท็บ: เมื่อสลับแท็บ สถานะของสแต็กจะถูกเก็บรักษาไว้ และเมื่อกลับมา — จะถูกกู้คืน ซึ่งให้ UX ที่ไร้รอยต่อ เช่นเดียวกับในแอประบบของ Google (Play Market, YouTube)

Material 3: สีไดนามิกและแอนิเมชัน

Material 3 (Material You) นำการเปลี่ยนแปลงสำคัญมาสู่ Bottom Navigation — สีไดนามิกที่สร้างจากวอลเปเปอร์ของผู้ใช้ ระบบจะแยกสีที่โดดเด่นจากวอลเปเปอร์และสร้างจานสี 5 โทนสีหลัก NavigationBarView จะใช้สีเหล่านี้โดยอัตโนมัติ: แท็บที่ใช้งานอยู่ได้รับสีหลัก แท็บที่ไม่ใช้งาน — รูปแบบ onSurface

แอนิเมชันของตัวบ่งชี้แท็บที่ใช้งานอยู่กลายเป็นลื่นไหล: เมื่อสลับ ตัวบ่งชี้จะเคลื่อนไหวไปยังแท็บใหม่ด้วยการประมาณค่าระหว่างกลาง เอฟเฟกต์ระลอกคลื่นเมื่อสัมผัสใช้สีรอง Bottom Navigation ใน Material 3 ยังรองรับแอนิเมชันที่กำหนดเองผ่าน itemActiveIndicatorStyle — นักพัฒนาสามารถกำหนดรูปร่าง (วงรี, สี่เหลี่ยมผืนผ้า), ระยะขอบ และสีของตัวบ่งชี้

<!-- สไตล์ตัวบ่งชี้ที่ใช้งานอยู่ของ NavigationBarView -->
<style name="Widget.MyApp.NavigationBarView.ActiveIndicator"
    parent="Widget.Material3.NavigationBarView.ActiveIndicator">
    <item name="android:height">32dp</item>
    <item name="android:width">64dp</item>
    <item name="android:marginHorizontal">8dp</item>
    <item name="shapeAppearance">
        @style/ShapeAppearance.Material3.Corner.Full
    </item>
    <item name="color">@color/primary_container</item>
</style>

คำแนะนำ UX สำหรับ Bottom Navigation

เมื่อออกแบบ Bottom Navigation ควรพิจารณางานวิจัยด้านการใช้งาน NN Group (2026): แผงด้านล่างควรสูงอย่างน้อย 56 dp เป้าหมายการสัมผัส — อย่างน้อย 48 dp ข้อความฉลาก — สูงสุด 12 ตัวอักษร (ละติน) หรือ 8 ตัวอักษร (ซีริลลิก) แท็บที่ใช้งานอยู่ควรแตกต่างไม่เพียงแต่สี แต่ยังรวมถึงสถานะของไอคอน (แบบเติมเต็ม vs โครงร่าง)

Material Design 3 แนะนำรูปแบบต่อไปนี้: 4 แท็บ — เหมาะสมที่สุดสำหรับการสแกนอย่างง่าย; ไอคอน "+" ตรงกลาง (FloatingActionButton) — สำหรับการกระทำหลัก; ป้าย — สำหรับตัวนับการกระทำของผู้ใช้เท่านั้น หลีกเลี่ยง: การใช้ Bottom Navigation กับ 2 แท็บ (ใช้ Tab Layout แทน), การเปลี่ยนลำดับแท็บแบบไดนามิก, การซ่อนแผงบนหน้าจอที่ซ้อนกัน

• ความสูง — ขั้นต่ำ 56 dp เพื่อการเอื้อมถึงที่สบายของนิ้วหัวแม่มือ
• ความคมชัด — แท็บที่ใช้งานอยู่ควรแยกแยะได้ (สี + การเติมไอคอน)
• ฉลาก — สั้น, 1-2 คำ, ไม่มีการตัดทอน (ไม่เกิน 12 ตัวอักษร)
• ลำดับ — คงที่, จากสำคัญที่สุดไปน้อยที่สุด
• ตัวนับ — สำหรับการแจ้งเตือนผู้ใช้เท่านั้น ไม่ใช่สำหรับการตลาด