Full Screen Cover: ما هو، العرض بملء الشاشة و UIKit

ما هو Full Screen Cover في iOS؟

Full Screen Cover هو نمط عرض مشرفي في iOS حيث يشغل واقع التحكم المقدم كامل شاشة الجهاز. يتم إخفاء المحتوى الأصلي بالكامل، مما يخلق تأثيرًا غامرًا ويركز المستخدم على المهمة الحالية.

قبل iOS 13، كان Full Screen Cover هو النمط الوحيد للعرض المشرفي على iPhone. جميع استدعاءات present(_:animated:completion:) كانت تستخدم .fullScreen افتراضيًا. بدءًا من iOS 13، غيرت Apple النمط الافتراضي إلى .automatic، الذي يختار .pageSheet لـ iPhone. ولكن Full Screen Cover يظل متاحًا ويستخدم في السيناريوهات حيث يهم التركيز الكامل.

بالخلاف من Page Sheet، لا يسمح Full Screen Cover بالتفاعل مع المحتوى الأصلي ولا يعرضه تحت النافذة المشرفية. لا يمكن للمستخدم إغلاق Full Screen Cover بالتمرير لأسفل — يتطلب الإغلاق استدعاء برمجيًا لـ dismiss(animated:completion:) أو زر إغلاق على الشاشة نفسها. من المهم مراعاة هذا السلوك عند تصميم تجربة المستخدم.

Full Screen Cover مقابل Page Sheet: مقارنة الأنماط

Page Sheet هو النمط الرئيسي الثاني للعرض المشرفي، المقدم في iOS 13. يتم عرض Page Sheet كبطاقة مع هامش علوي، تحتها تظهر الشاشة الأصلية. يمكن للمستخدم إغلاق Page Sheet بالتمرير لأسفل. Full Screen Cover، على النقيض من ذلك، يخفي المحتوى الأصلي ولا يدعم إغلاق التمرير.

يعتمد اختيار Full Screen Cover أو Page Sheet على المحتوى والسياق. يوصى باستخدام Full Screen Cover للمحتوى الذي يتطلب اهتمامًا كاملًا: فيديو بشاشة كاملة، معاينة الصور، مسح المستندات. Page Sheet مناسب للمهام حيث يهم سياق الشاشة الأصلية: نماذج التحرير، اختيار الخيارات، عرض التفاصيل.

التنفيذ في UIKit: UIModalPresentationStyle

UIKit يوفر الثابتة UIModalPresentationStyle.fullScreen لتكوين نمط العرض المشرفي. يضمن تعيين هذه الخاصية في UIViewController قبل استدعاء present ظهور واقع التحكم بملء الشاشة. كما يدير واقع التحكم السلوك عند ظهور لوحة المفاتيح ويتعامل مع أحداث النظام.

التكوين والمفوض

بعد تعيين نمط .fullScreen، يوصى بتكوين presentationController?.delegate لمعالجة أحداث الإغلاق. يسمح المفوض UIAdaptivePresentationControllerDelegate باعتراض محاولات الإغلاق ومنع فقدان البيانات. على عكس Page Sheet، في Full Screen Cover يعمل المفوض فقط عند استدعاء dismiss برمجيًا.

معالجة التدوير ولوحة المفاتيح

يتعامل Full Screen Cover بشكل صحيح مع تدوير الشاشة وظهور لوحة المفاتيح. عند التدوير، يتكيف واقع التحكم المشرفي تلقائيًا مع الاتجاه الجديد. UIKeyboardWillShowNotification يسمح بتحريك المحتوى لأعلى عند ظهور لوحة المفاتيح، مما يحافظ على ظهور حقول النص. على عكس Page Sheet، لا يغير Full Screen Cover حجمه عند ظهور لوحة المفاتيح.

let playerVC = VideoPlayerViewController()
playerVC.modalPresentationStyle = .fullScreen
playerVC.modalTransitionStyle = .crossDissolve
present(playerVC, animated: true) {
    playerVC.startPlayback()
}

// إغلاق
dismiss(animated: true) {
    print("تم إغلاق المشغل")
}

SwiftUI: معدل .fullScreenCover

SwiftUI يوفر المعدل .fullScreenCover لإنشاء نوافذ مشرفية بملء الشاشة بصورة تصريحية. على عكس .sheet (Page Sheet)، يقوم .fullScreenCover بإنشاء نمط .fullScreen بسلوك مماثل: تغطية كاملة للمحتوى وعدم إغلاق بالتمرير.

الاستخدام مع binding والبيانات

يقبل المعدل binding لـ Bool أو كائن قابل للتحديد اختياري. عند تعيين binding إلى true، يقوم SwiftUI بتحريك ظهور النافذة بملء الشاشة. لنقل البيانات يتم استخدام واسطة onDismiss وإغلاق بمحتوى. تسمح قيمة البيئة \.dismiss بإغلاق النافذة المشرفية من الداخل.

Full Screen Cover مقابل Sheet

الاختيار بين .fullScreenCover و .sheet في SwiftUI مماثل لـ UIKit: .fullScreenCover للمحتوى الغامر، .sheet للبطاقات. SwiftUI يختار تلقائيًا سلوك الإغلاق الصحيح: .sheet يمكن إغلاقه بالتمرير، .fullScreenCover فقط برمجيًا. يمكن الجمع بين المعدلات في تسلسل واحد لـ View.

struct CameraView: View {
    @State private var showCamera = false

    var body: some View {
        Button("فتح الكاميرا") {
            showCamera = true
        }
        .fullScreenCover(isPresented: $showCamera) {
            CameraPreviewView()
                .ignoresSafeArea()
        }
    }
}

struct CameraPreviewView: View {
    @Environment(\.dismiss) private var dismiss

    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()
            VStack {
                Spacer()
                Button("التقاط") { dismiss() }
                    .foregroundColor(.white)
            }
        }
    }
}

الحركات والانتقالات المخصصة

Full Screen Cover يدعم الحركات المخصصة من خلال UIModalTransitionStyle في UIKit والانتقالات المخصصة في SwiftUI. تشمل الأنماط القياسية: .coverVertical (من الأسفل للأعلى)، .crossDissolve (ظهور تدريجي)، .flipHorizontal (قلب) و .partialCurl (تأثير الصفحة).

UIKit: UIViewControllerAnimatedTransitioning

للحصول على حركة مخصصة بالكامل، قم بتنفيذ بروتوكول UIViewControllerAnimatedTransitioning. يسمح بتحديد مدة الحركة والانتقال نفسه من خلال طريقة animateTransition(using:). يتم تعيين واقع التحكم للحركة من خلال UINavigationControllerDelegate أو UIViewControllerTransitioningDelegate.

SwiftUI: Matched Geometry Effect

في SwiftUI، تتم إنشاء الانتقالات المخصصة لـ .fullScreenCover من خلال matchedGeometryEffect. يقوم هذا المعدل بتحريك انتقال عنصر من View الأصل إلى النافذة بملء الشاشة. على سبيل المثال، عند النقر على صورة مصغرة، تتوسع بسلاسة لتملء الشاشة، مما يخلق تأثير استمرارية. يعمل matchedGeometryEffect مع id و namespace اللذين يربطان العنصر في الموقعين الأصلي والوجهة.

struct PhotoViewer: View {
    @State private var selectedPhoto: String?
    @Namespace private var animation

    var body: some View {
        HStack {
            ForEach(["photo1", "photo2"], id: \.self) { photo in
                Image(photo)
                    .matchedGeometryEffect(id: photo, in: animation)
                    .onTapGesture { selectedPhoto = photo }
            }
        }
        .fullScreenCover(item: $selectedPhoto) { photo in
            Image(photo)
                .matchedGeometryEffect(id: photo, in: animation)
                .ignoresSafeArea()
        }
    }
}

متى يجب استخدام Full Screen Cover؟

Full Screen Cover يوصى به للسيناريوهات حيث يجب أن يشغل المحتوى الشاشة بأكملها دون إزعاج من واجهة الأصل. تحدد Apple HIG ثلاث فئات رئيسية: المحتوى الوسائطي، أدوات إنشاء المحتوى وواجهات النظام المؤقتة.

الوسائط والترفيه

مشغلات الفيديو، عرض الصور، قراءة PDF والقصص المصورة هي أمثلة نموذجية لاستخدام Full Screen Cover. AVPlayerViewController في iOS يستخدم وضع ملء الشاشة تلقائيًا عند الانتقال إلى الوضع الأفقي. تقوم محررات الصور مثل Adobe Lightroom بفتح محرر بملء الشاشة فوق مكتبة الصور.

أدوات إنشاء المحتوى

الكاميرا، ماسح المستندات، تسجيل الصوت — مهام تتطلب اهتمام المستخدم الكامل. UIImagePickerController كان يستخدم Full Screen Cover للكاميرا قبل iOS 14. بدءًا من iOS 14، يستخدم منتقي النظام Page Sheet، ولكن يمكن للمطور فرض .fullScreen لكاميرا مخصصة.

ما يجب تجنبه

لا تستخدم Full Screen Cover لـ: نماذج التسجيل (يفضل Page Sheet)، شاشات إدخال النص حيث يهم سياق الصفحة الأصلية، والتنقل التسلسلي داخل النافذة المشرفية. Material Design يوصي أيضًا بتجنب حجب زر الرجوع في النظام — هذا مقبول في iOS، ولكن يجب أن يكون للمستخدم طريقة واضحة للإغلاق من خلال عنصر واجهة المستخدم.