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 تغییر داد که برای iPhone .pageSheet را انتخاب می‌کند. با این حال، Full Screen Cover همچنان در دسترس است و برای سناریوهایی که تمرکز کامل مهم است استفاده می‌شود.

برخلاف Page Sheet، Full Screen Cover اجازه تعامل با محتوای والد را نمی‌دهد و آن را زیر پنجره مودال نشان نمی‌دهد. کاربر نمی‌تواند Full Screen Cover را با کشیدن به پایین ببندد — برای بستن نیاز به فراخوانی برنامه‌نویسی dismiss(animated:completion:) یا دکمه بستن در خود صفحه است. این رفتار هنگام طراحی UX مهم است.

مقایسه 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 و closure محتوا استفاده می‌شود. مقدار محیطی \.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 تا iOS 14 از Full Screen Cover برای دوربین استفاده می‌کرد. از iOS 14، انتخاب‌گر سیستم از Page Sheet استفاده می‌کند، اما توسعه‌دهنده می‌تواند برای دوربین سفارشی .fullScreen را اجباری کند.

آنچه باید اجتناب کرد

از Full Screen Cover استفاده نکنید برای: فرم‌های ثبت‌نام (Page Sheet ترجیح داده می‌شود)، صفحه‌های دارای ورودی متن که زمینه صفحه والد مهم است، و ناوبری متوالی در داخل پنجره مودال. Material Design نیز توصیه می‌کند از مسدود کردن دکمه بازگشت سیستم خودداری کنید — در iOS این مجاز است، اما کاربر باید راه واضحی برای بستن از طریق عنصر رابط داشته باشد.