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 المنبثق افتراضياً، محرراً الذاكرة. Android يمكنه حفظ Fragment في مكدس العودة مع إمكانية استعادته دون إعادة إنشاء.

عمق المكدس يؤثر على الأداء: كل شاشة في المكدس تستهلك ذاكرة. يُوصى بعدم الاحتفاظ بأكثر من 10 شاشات في المكدس. للتنقل العميق، استخدم PopToRoot أو أعد تشغيل المكدس بشاشة جذر جديدة. Navigation Component في Android يدير حالة المكدس تلقائياً عبر SavedStateHandle.

التنقل Push في iOS: UINavigationController

UINavigationController هو وحدة تحكم حاوية في iOS تدير مكدساً من UIViewControllers. يعرض تلقائياً شريط تنقل بعنوان الشاشة الحالية وزر العودة. الحركة الافتراضية للـ push هي انزلاق من اليمين إلى اليسار، مما يخلق شعوراً بالانغماس في المحتوى للمستخدم.

إدارة المكدس

تتم إضافة الشاشة عبر pushViewController(_:animated:). يتم الإزالة عبر popViewController(animated:). للعودة إلى الشاشة الجذرية، استخدم popToRootViewController(animated:). يدعم UINavigationController أيضاً الإدارة البرمجية للمكدس عبر الخاصية viewControllers — مصفوفة من جميع وحدات التحكم في المكدس.

شريط التنقل والعناوين الكبيرة

يحتوي شريط التنقل على عنوان الشاشة، زر العودة وأزرار إجراء اختيارية. بدءاً من iOS 11، العناوين الكبيرة (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 مقابل Modal Presentation

Push Presentation و Modal Presentation يحلان مهاماً مختلفة في التنقل. Push مصمم لعرض المحتوى التسلسلي، حيث كل شاشة جديدة تعمق السياق. Modal للمهام المركزة التي تتطلب الإكمال. عملياً، من المهم اختيار النمط الصحيح للسيناريو المحدد.

المعايير الرئيسية للاختيار: إذا كان يجب أن يتمكن المستخدم من العودة بحرية دون فقدان السياق — اختر Push. إذا كانت المهمة مؤقتة وتحجب المحتوى الرئيسي (نموذج، تفويض) — استخدم Modal. خلط الأنماط على شاشة واحدة (Push داخل Modal) مقبول لكن يتطلب تسلسلاً هرمياً بصرياً واضحاً.

من الأخطاء الشائعة استخدام Modal لتسلسلات الشاشات التي تعتبر منطقياً جزءاً من التدفق الرئيسي. على سبيل المثال، معالج إنشاء الطلب (الخطوة 1 → الخطوة 2 → الخطوة 3) من الأفضل تنفيذه عبر Push داخل حاوية مشروطة، بدلاً من سلسلة من النوافذ المشروطة. هذا يحافظ على التسلسل الهرمي للتنقل وقابلية توقع العودة.

أمثلة التنفيذ بلغة 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 مع وسائط آمنة النوع وإدارة تلقائية لمكدس العودة. كلا النهجين يدعمان الروابط العميقة والحركات المخصصة والحفاظ على الحالة عند التدوير.