Full Screen Cover: คืออะไร การนำเสนอแบบเต็มหน้าจอ และ UIKit

Full Screen Cover ใน iOS คืออะไร?

Full Screen Cover คือรูปแบบการนำเสนอแบบ modal ใน iOS ที่ตัวควบคุมที่ถูกนำเสนอจะครอบครุมหน้าจอแบบเต็มอุปกรณ์ เนื้อหาส่วนแม่แบบจะถูกซ่อนโดยสิ้นเชิง สร้างผลกระทับแบบสร้างสรรค์และโฟกัสผู้ใช้ไปที่งานปัจจุบัน

ก่อน iOS 13, Full Screen Cover เป็นรูปแบบการนำเสนอแบบ modal เดียวใน iPhone การเรียกทั้งหมดๆ ถึง present(_:animated:completion:) ใช้ .fullScreen เป็นค่าเริ่มต้น เริ่มตั้งแต่ iOS 13, Apple ได้เปลี่ยนรูปแบบเริ่มต้นเป็น .automatic ซึ่งสำหรับ iPhone จะเลือก .pageSheet อย่างไรก็ตาม Full Screen Cover ยังคงใช้งานได้ และใช้สำหรับสถานการณ์ที่ต้องการโฟกัสอย่างเต็มที่

แตกต่างจาก Page Sheet, Full Screen Cover ไม่อนุญาตให้โต้ตอบกับเนื้อหาส่วนแม่แบบและไม่แสดงมันภายใต้หน้าต่าง modal ผู้ใช้ไม่สามารถปิด Full Screen Cover ด้วยการปัดลงได้ — การปิดต้องใช้การเรียกโปรแกรม dismiss(animated:completion:) หรือปุ่มปิดบนหน้าจอเอง พฤติกรรมนี้เป็นสิ่งสำคัญที่ต้องพิจารณาเมื่อออกแบบ UX

Full Screen Cover vs Page Sheet: เปรียบเทียบรูปแบบ

Page Sheet คือรูปแบบการนำเสนอแบบ modal หลักที่สอง ซึ่งเปิดตัวใน iOS 13 Page Sheet แสดงผลเป็นการ์ดที่มีรอบส่วนบน โดยมีหน้าจอแม่แบบมองเห็นได้ด้านล่าง ผู้ใช้สามารถปิด Page Sheet โดยการปัดลง ในทางกลับกัน Full Screen Cover จะซ่อนเนื้อหาส่วนแม่แบบและไม่รองรับการปิดด้วยการปัด

การเลือกระหว่าง Full Screen Cover และ Page Sheet ขึ้นอยู่กับเนื้อหาและบริบท แนะนำให้ใช้ Full Screen Cover สำหรับเนื้อหาที่ต้องการความสนใจอย่างเต็มที่ เช่น วิดีโอเต็มหน้าจอ การดูตัวอย่างภาพล่วงหน้า การสแกนเอกสาร Page Sheet สำหรับงานที่บริบทของหน้าจอส่วนแม่แบบมีความสำคัํ เช่น แบบฟอร์มแก้ไข การเลือกตัวเลือก มุมมองรายละเอียด

การนำไปใช้ใน UIKit: UIModalPresentationStyle

UIKit มอบค่าคง UIModalPresentationStyle.fullScreen สำหรับการกำหนดค่ารูปแบบการนำเสนอแบบ modal การตั้งค่าคุณสมบัตินี้บน UIViewController ก่อนเรียก present จะรับประกันว่าตัวควบคุมจะแสดงผลเต็มหน้าจอ ตัวควบคุมยังจัดการพฤติกรรมเมื่อแป้นพิมพ์ปรากฏและจัดการกับกิจกรรมของระบบ

การกำหนดค่าและตัวแทน

หลังจากตั้งค่ารูปแบบ .fullScreen แล้ว แนะนำให้กำหนดค่า presentationController?.delegate เพื่อจัดการกับกิจกรรมการปิด ตัวแทน UIAdaptivePresentationControllerDelegate ช่วยให้สามารถสกัดการพยายามปิดและป้องกันการสูญเสียข้อมูล แตกต่างจาก Page Sheet สำหรับ Full Screen Cover ตัวแทนจะทำงานเฉพาะเมื่อมีการเรียก dismiss โดยโปรแกรม

การจัดการหมุนและแป้นพิมพ์

Full Screen Cover จัดการหมุนหน้าจอและการปรากฏของแป้นพิมพ์ได้อย่างถูกต้อง เมื่อหมุน ตัวควบคุมแบบ modal จะปรับตัวโดยอัตโนมัติตามทิศทางใหม่ 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 สำหรับการสร้างหน้าต่าง modal แบบเต็มหน้าจอแบบประกาศ แตกต่างจาก .sheet (Page Sheet), .fullScreenCover จะสร้างรูปแบบ .fullScreen ที่มีพฤติกรรมคล้ายกัน: คลุมเนื้อหาอย่างสมบูรณ์และไม่มีการปิดด้วยการปัด

การใช้งานกับ binding และข้อมูล

ตัวแก้ไขรับ binding ไปยัง Bool หรือรายการที่สามารถระบุตัวตนได้แบบเลือกได้ เมื่อตั้ง binding เป็น true, SwiftUI จะสร้างแอนิเมชันการปรากฏของหน้าต่างเต็มหน้าจอ สำหรับการส่งข้อมูลใช้พารามิเตอร์ onDismiss และ closure ที่มีเนื้อหา ค่าสภาพแวดล้อม \.dismiss ช่วยให้ปิดหน้าต่าง modal จากภายใน

Full Screen Cover vs 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 เหมาะกว่า), หน้าจอที่มีการป้อนข้อความที่บริบทของหน้าแม่แบบมีความสำคัํ และการนำทางแบบลำดับภายในหน้าต่าง modal Material Design แนะนำให้หลีกเลี่ยงการบล็อกปุ่มกลับของระบบ — เรื่องนี้ยอมรับได้ใน iOS แต่ผู้ใช้ต้องมีวิธีที่ชัดเจนในการปิดผ่านองค์ประกอบ UI