Full Screen Cover: এটি কী, পূর্ণ-স্ক্রিন উপস্থাপনা এবং UIKit

iOS এ Full Screen Cover কি?

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 কনস্টান্ট প্রদান করে। present কল করার আগে UIViewController এ এই বৈশিষ্ট্য সেট করা নিশ্চিত করে যে কন্ট্রোলার পূর্ণ স্ক্রিনে প্রদর্শিত হবে। কন্ট্রোলার কীবোর্ড আসার সময় আচরণ এবং সিস্টেম ইভেন্ট হ্যান্ডলই পরিচালনা করে।

কনফিগারেশন এবং ডিলিগেট

.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 এবং ডেটা সহ ব্যবহার

মডিফায়ার একটি Bool বা একটি অপশনাল শনাক্তিযোগ্য আইটেমে binding গ্রহণ করে। যখন binding true এ সেট করা হয়, SwiftUI পূর্ণ-স্ক্রিন উইন্ডোর আবির্ভাব অ্যানিমেট করে। ডেটা পাসিংয়ের জন্য onDismiss প্যারামিটার এবং কন্টেন্ট সহ একটি ক্লোজার ব্যবহৃত হয়। \.dismiss এনভায়রনমেন্ট মান মোডাল উইন্ডো ভিতর থেকে বন্দ করার অনুমতি দেয়।

Full Screen Cover বসাম Sheet

SwiftUI এ .fullScreenCover এবং .sheet এর মধ্যে পছন্দ 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 UIKit এ UIModalTransitionStyle এর মাধ্যমে এবং 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 এর সাধারণ ব্যবহারের উদাহরণ। iOS এ AVPlayerViewController ল্যান্ডস্কেপে যাওয়ার সময় স্বচালিতভাবে পূর্ণ-স্ক্রিন মোড ব্যবহার করে। Adobe Lightroom এর মতো ফটো এডিটররা ফটো লাইব্রেরীর উপরে একটি পূর্ণ-স্ক্রিন এডিটর খোলে।

কন্টেন্ট তৈরির উপকরণ

ক্যামেরা, ডকুমেন্ট স্ক্যানার, ভয়স রিকর্ডিং — যে কাজগুলিতে ব্যবহারকারীর সম্পূর্ণ মনোযোগ প্রয়োজন। UIImagePickerController iOS 14 এর আগে ক্যামেরার জন্য Full Screen Cover ব্যবহার করত। iOS 14 থেকে শুরু করে, সিস্টেম পাইকার Page Sheet ব্যবহার করে, কিন্তু ডিভেলপার একটি কাস্টম ক্যামেরার জন্য জরুরি .fullScreen সেট করতে পারে।

কি এড়ালেন

এগুলির জন্য Full Screen Cover ব্যবহার করবেন না: রেজিস্ট্রেশন ফরম (Page Sheet পছন্দের), টেক্সট ইনপুট সঙ্গে স্ক্রিন যেখানে প্যারেন্ট পৃষ্ঠার প্রাসঙ্গিকতা গুরুত্বপূর্ণ, এবং মোডাল উইন্ডোর ভিতরে অনুক্রমিক নেভিগেশন। Material Design সিস্টেম ব্যাক বটন অবরুদ থেকে বাঁচতেও সুপারিশ করে — iOS এ এটি গ্রহণযোগ্য, কিন্তু ব্যবহারকারীর UI উপাদানের মাধ্যমে বন্দ করার একটি পরিষ্কার উপায় থাকা উচিত।