Push Presentation ในการพัฒนาโมบายล์: คืออะไร, สแต็กหน้าจอ

Push Presentation คืออะไร?

Push Presentation เป็นกลไกการนำทางซึ่งแต่ละหน้าจอใหม่จะถูกวางไว้ที่ด้านบนของสแต็ก ในขณะที่หน้าจอก่อนหน้ายังคงอยู่ในหน่วยความจำด้านล่าง ผู้ใช้เจาะลึกเข้าไปในเนื้อหาโดยการเปิดหน้าจอรายละเอียดตามลำดับ และปุ่มกลับจะนำพวกเขากลับไปยังขั้นตอนก่อนหน้า

สถาปัตยกรรมของการนำทาง Push นั้นมีพื้นฐานมาจากโครงสร้างข้อมูล LIFO (Last In, First Out) หน้าจอใหม่จะถูกเพิ่มที่ท้ายสแต็กเสมอ และการลบจะเกิดขึ้นจากด้านบนเท่านั้น สิ่งนี้รับประกันพฤติกรรมที่คาดเดาได้: ผู้ใช้จะรู้เสมอว่าปุ่มกลับจะพาพวกเขากลับไปหนึ่งขั้นตอนอย่างแน่นอน สแต็กการนำทาง สามารถมีได้ตั้งแต่ 2 ถึง 10+ หน้าจอขึ้นอยู่กับความซับซ้อนของแอปพลิเคชัน

Push Presentation เป็นรูปแบบหลักในแอปพลิเคชันที่มีเนื้อหาตามลำดับชั้น: ฟีดข่าว แค็ตตาล็อกสินค้า เมนูหลายระดับ และเอกสารประกอบ ตาม Material Design การนำทางแบบสแต็กเหมาะสำหรับสถานการณ์ที่ผู้ใช้สำรวจเนื้อหาจากทั่วไปไปยังเฉพาะเจาะจง และแต่ละหน้าจอถัดไปจะช่วยเพิ่มความเข้าใจในหัวข้อ

สแต็กการนำทาง: หลักการทำงาน

สแต็กการนำทาง คือชุดหน้าจอที่เรียงลำดับซึ่งแต่ละองค์ประกอบจะเก็บสถานะของ ViewController หรือ Fragment ของตน ในระหว่างการดำเนินการ Push หน้าจอใหม่จะถูกเพิ่มลงในสแต็ก ลักษณะที่ปรากฏจะมีอนิเมชัน (เลื่อนจากทางขวาใน iOS เลื่อนจากด้านล่างหรือ Fade ใน Android) และจะทำงาน

ในระหว่างการดำเนินการ Pop (กดปุ่มกลับ) หน้าจอด้านบนจะถูกลบออกจากสแต็ก ถูกทำลายหรือย้ายไปยังหน่วยความจำ และหน้าจอก่อนหน้าจะทำงาน iOS จะทำลาย ViewController ที่ถูก pop โดยค่าเริ่มต้น เพิ่มหน่วยความจำว่าง Android สามารถบันทึก Fragment ในสแต็กย้อนกลับด้วยความสามารถในการกู้คืนโดยไม่ต้องสร้างใหม่

ความลึกของสแต็กส่งผลต่อประสิทธิภาพ: แต่ละหน้าจอในสแต็กใช้หน่วยความจำ ขอแนะนำ อย่าเก็บหน้าจอเกิน 10 หน้าจอในสแต็ก สำหรับการนำทางเชิงลึก ให้ใช้ PopToRoot หรือเริ่มสแต็กใหม่ด้วยหน้าจอรูตใหม่ Navigation Component ใน Android จะจัดการสถานะสแต็กโดยอัตโนมัติผ่าน SavedStateHandle

การนำทาง Push ใน iOS: UINavigationController

UINavigationController คือคอนโทรลเลอร์คอนเทนเนอร์ของ iOS ที่จัดการสแต็กของ UIViewController โดยจะแสดงแถบนำทางโดยอัตโนมัติพร้อมชื่อหน้าจอปัจจุบันและปุ่มกลับ อนิเมชัน push เริ่มต้นคือการเลื่อนจากขวาไปซ้าย สร้างความรู้สึกดื่มด่ำในเนื้อหาสำหรับผู้ใช้

การจัดการสแต็ก

การเพิ่มหน้าจอทำได้ผ่าน pushViewController(_:animated:) การลบทำได้ผ่าน popViewController(animated:) ในการกลับไปยังหน้าจอรูต ให้ใช้ popToRootViewController(animated:) UINavigationController ยังรองรับการจัดการสแต็กแบบโปรแกรมผ่านคุณสมบัติ viewControllers — อาร์เรย์ของคอนโทรลเลอร์ทั้งหมดในสแต็ก

แถบนำทางและ Large Titles

แถบนำทางประกอบด้วยชื่อหน้าจอ ปุ่มกลับ และปุ่มดำเนินการเพิ่มเติม เริ่มจาก iOS 11, Large Titles (prefersLargeTitles) อนุญาตให้แสดงชื่อด้วยแบบอักษรที่ขยายใหญ่ขึ้นซึ่งจะย่อขนาดแบบมีอนิเมชันเมื่อเลื่อน สิ่งนี้ช่วยปรับปรุงลำดับชั้นการนำทางและแจ้งให้ผู้ใช้ทราบเกี่ยวกับส่วนปัจจุบัน

let detailVC = DetailViewController()
detailVC.title = "Item Details"
navigationController?.pushViewController(detailVC, animated: true)

// กลับไปยังหน้าจอก่อนหน้า
navigationController?.popViewController(animated: true)

// กลับไปยังรูท
navigationController?.popToRootViewController(animated: true)

การนำทาง Push ใน Android: Navigation Component

Navigation Component คือไลบรารี Android Jetpack สำหรับการนำทางแบบประกาศ โดยให้ NavController ซึ่งจัดการแฟรกเมนต์หรือหน้าจอ Compose ผ่านกราฟการนำทาง (nav_graph) Push ใน Android คล้ายกับ iOS: แต่ละ Fragment ใหม่จะถูกเพิ่มลงในสแต็กย้อนกลับ และปุ่มกลับจะกลับไปยังหน้าก่อนหน้า

NavHost และ NavGraph

NavHost คือคอนเทนเนอร์ที่แสดงปลายทางปัจจุบันจาก NavGraph NavGraph คือไฟล์ XML ที่อธิบายหน้าจอแอปพลิเคชันทั้งหมดและการเชื่อมต่อระหว่างหน้าจอเหล่านั้น การเปลี่ยนภาพถูกกำหนดผ่าน actions โดยระบุปลายทางและอาร์กิวเมนต์เพิ่มเติม Navigation Component จะจัดการปุ่มกลับของระบบ อนิเมชัน และการเก็บรักษาสถานะโดยอัตโนมัติ

อาร์กิวเมนต์และ Safe Args

สำหรับการส่งข้อมูลระหว่างหน้าจอ Navigation Component รองรับ Safe Args — การสร้างโค้ดของคลาสอาร์กิวเมนต์ที่ปลอดภัยต่อชนิด แทนที่จะวางข้อมูลลงใน Bundle ด้วยตนเอง นักพัฒนาจะประกาศอาร์กิวเมนต์ใน NavGraph และรับผ่านคลาส Directions และ Args ที่สร้างขึ้น Safe Args ขจัดข้อผิดพลาดเกี่ยวกับชนิดไม่ตรงกันและทำให้การปรับโครงสร้างง่ายขึ้น

// คำจำกัดความ NavGraph ใน XML
<!-- res/navigation/nav_graph.xml -->
@navigation {
    NavHost(startDestination = "list") {
        composable("list") { ListScreen() }
        composable(
            "detail/{itemId}",
            arguments = listOf(navArgument("itemId") { type = NavType.IntType })
        ) { DetailScreen(it.arguments()?.getInt("itemId") ?: 0) }
    }
}

// นำทางโดยโปรแกรม
navController.navigate("detail/42")

BottomNavigation กับสแต็ก Push

การรวม Bottom Navigation และการนำทาง Push เป็นรูปแบบที่พบบ่อยในแอปพลิเคชันมือถือ แต่ละแท็บ Bottom Navigation มีสแต็กหน้าจอของตัวเอง Navigation Component รองรับสิ่งนี้ผ่าน NavHost ต่อแท็บ หรือ NavHost เดียวที่มีกราฟแยกสำหรับแต่ละแท็บ การสลับแท็บจะไม่รีเซ็ตสถานะของสแต็ก push

Push Presentation vs Modal Presentation

Push Presentation และ Modal Presentation แก้ปัญหาการนำทางที่แตกต่างกัน Push ออกแบบมาสำหรับการดูเนื้อหาตามลำดับ ซึ่งแต่ละหน้าจอใหม่จะเพิ่มบริบทให้ลึกซึ้งยิ่งขึ้น Modal สำหรับงานที่ต้องโฟกัสซึ่งต้องทำให้เสร็จ ในทางปฏิบัติ สิ่งสำคัญคือต้องเลือกรูปแบบที่ถูกต้องสำหรับสถานการณ์เฉพาะ

เกณฑ์การเลือกหลัก: หากผู้ใช้ควรสามารถกลับไปมาได้อย่างอิสระโดยไม่สูญเสียบริบท — เลือก Push หากงานเป็นแบบชั่วคราวและบล็อกเนื้อหาหลัก (ฟอร์ม การอนุญาต) — ให้ใช้ Modal การผสม รูปแบบบนหน้าจอเดียว (Push ภายใน Modal) เป็นที่ยอมรับได้แต่ต้องมีลำดับชั้นภาพที่ชัดเจน

ข้อผิดพลาดคือการใช้ Modal สำหรับลำดับหน้าจอที่เป็นส่วนหนึ่งของโฟลว์หลักโดยทางตรรกะ ตัวอย่างเช่น ตัวช่วยสร้างคำสั่งซื้อ (ขั้นตอนที่ 1 → ขั้นตอนที่ 2 → ขั้นตอนที่ 3) ควรนำไปใช้ผ่าน Push ภายในคอนเทนเนอร์ modal มากกว่าผ่านห่วงโซ่ของหน้าต่าง modal สิ่งนี้รักษาลำดับชั้นการนำทางและความสามารถในการคาดเดาการกลับมา

ตัวอย่างการนำไปใช้ใน Swift และ Kotlin

มาดูการนำทางการนำทาง Push ที่สมบูรณ์บนทั้งสองแพลตฟอร์ม ตัวอย่าง Swift แสดง UINavigationController พร้อมการจัดการสแต็กแบบโปรแกรมและการจัดการลิงก์ลึก ตัวอย่าง Kotlin แสดง Navigation Component พร้อม NavHost อาร์กิวเมนต์ และอนิเมชัน

class ListViewController: UIViewController {
    func showDetail(_ itemId: Int) {
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        let detailVC = storyboard.instantiateViewController(
            withIdentifier: "DetailViewController"
        ) as! DetailViewController
        detailVC.itemId = itemId
        navigationController?.pushViewController(detailVC, animated: true)
    }
}

class DetailViewController: UIViewController {
    var itemId: Int = 0

    override func viewDidLoad() {
        super.viewDidLoad()
        title = "Item #\(itemId)"
    }
}

@Composable
fun PushNavigationApp() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "list") {
        composable("list") {
            ListScreen(
                onItemClick = { id -> navController.navigate("detail/$id") }
            )
        }
        composable(
            "detail/{itemId}",
            arguments = listOf(navArgument("itemId") { type = NavType.IntType })
        ) { backStackEntry ->
            val itemId = backStackEntry.arguments()?.getInt("itemId") ?: 0
            DetailScreen(itemId = itemId, onBack = { navController.popBackStack() })
        }
    }
}

ตัวอย่างแสดงการนำทาง Push พื้นฐาน: รายการ → รายละเอียด iOS ใช้สตอรีบอร์ดและ UINavigationController พร้อมการส่งข้อมูลด้วยตนเอง Android ใช้ NavHost พร้อมอาร์กิวเมนต์ที่ปลอดภัยต่อชนิดและการจัดการสแต็กย้อนกลับอัตโนมัติ ทั้งสองวิธีรองรับลิงก์ลึก อนิเมชันแบบกำหนดเอง และการเก็บรักษาสถานะเมื่อหมุน