Full Screen Cover: nó là gì, trình bày toàn màn hình và UIKit

Full Screen Cover trong iOS là gì?

Full Screen Cover là một kiểu trình bày modal trong iOS, nơi bộ điều khiển được trình bày chiếm toàn bộ màn hình thiết bị. Nội dung cha bị ẩn hoàn toàn, tạo hiệu ứng nhập vai và tập trung người dùng vào tác vụ hiện tại.

Trước iOS 13, Full Screen Cover là kiểu trình bày modal duy nhất trên iPhone. Tất cả các lời gọi present(_:animated:completion:) đều sử dụng .fullScreen theo mặc định. Bắt đầu từ iOS 13, Apple đã thay đổi kiểu mặc định thành .automatic, kiểu này chọn .pageSheet cho iPhone. Tuy nhiên, Full Screen Cover vẫn khả dụng và được sử dụng cho các tình huống cần sự tập trung hoàn toàn.

Khác với Page Sheet, Full Screen Cover không cho phép tương tác với nội dung cha và không hiển thị nó bên dưới cửa sổ modal. Người dùng không thể đóng Full Screen Cover bằng cách vuốt xuống — việc đóng yêu cầu gọi lệnh dismiss(animated:completion:) hoặc một nút đóng trên chính màn hình. Hành vi này cần được xem xét khi thiết kế UX.

Full Screen Cover so với Page Sheet: so sánh kiểu

Page Sheet là kiểu trình bày modal chính thứ hai, được giới thiệu trong iOS 13. Page Sheet hiển thị dưới dạng thẻ với lề trên, bên dưới có thể nhìn thấy màn hình cha. Người dùng có thể đóng Page Sheet bằng cách vuốt xuống. Ngược lại, Full Screen Cover ẩn nội dung cha và không hỗ trợ đóng bằng cách vuốt.

Việc lựa chọn giữa Full Screen Cover và Page Sheet phụ thuộc vào nội dung và ngữ cảnh. Nên sử dụng Full Screen Cover cho nội dung cần sự chú ý hoàn toàn: video toàn màn hình, xem trước ảnh, quét tài liệu. Page Sheet dành cho các tác vụ mà ngữ cảnh của màn hình cha rất quan trọng: biểu mẫu chỉnh sửa, chọn tùy chọn, xem chi tiết.

Triển khai trong UIKit: UIModalPresentationStyle

UIKit cung cấp hằng UIModalPresentationStyle.fullScreen để cấu hình kiểu trình bày modal. Đặt thuộc tính này trên UIViewController trước khi gọi present đảm bảo bộ điều khiển hiển thị toàn màn hình. Bộ điều khiển cũng quản lý hành vi khi bàn phím xuất hiện và xử lý các sự kiện hệ thống.

Cấu hình và ủy quyền

Sau khi đặt kiểu .fullScreen, nên cấu hình presentationController?.delegate để xử lý các sự kiện đóng. Ủy quyền UIAdaptivePresentationControllerDelegate cho phép chặn các nỗ lực đóng và ngăn mất dữ liệu. Khác với Page Sheet, đối với Full Screen Cover, ủy quyền chỉ được kích hoạt khi gọi dismiss theo chương trình.

Xử lý xoay và bàn phím

Full Screen Cover xử lý chính xác việc xoay màn hình và xuất hiện bàn phím. Khi xoay, bộ điều khiển modal tự động thích ứng với hướng mới. UIKeyboardWillShowNotification cho phép dịch chuyển nội dung lên trên khi bàn phím xuất hiện, giữ cho các trường văn bản hiện rõ. Khác với Page Sheet, Full Screen Cover không thay đổi kích thước khi bàn phím xuất hiện.

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

// Đóng
dismiss(animated: true) {
    print("Trình phát đã đóng")
}

SwiftUI: bộ sửa đổi .fullScreenCover

SwiftUI cung cấp bộ sửa đổi .fullScreenCover để tạo cửa sổ modal toàn màn hình một cách khai báo. Khác với .sheet (Page Sheet), .fullScreenCover tạo kiểu .fullScreen với hành vi tương tự: che phủ hoàn toàn nội dung và không có đóng bằng vuốt.

Sử dụng với binding và dữ liệu

Bộ sửa đổi chấp nhận một binding đến Bool hoặc một mục có thể nhận dạng tùy chọn. Khi binding được đặt thành true, SwiftUI tạo hiệu ứng cho sự xuất hiện của cửa sổ toàn màn hình. Để truyền dữ liệu, sử dụng tham số onDismiss và một closure với nội dung. Giá trị môi trường \.dismiss cho phép đóng cửa sổ modal từ bên trong.

Full Screen Cover so với Sheet

Việc lựa chọn giữa .fullScreenCover và .sheet trong SwiftUI tương tự như UIKit: .fullScreenCover cho nội dung nhập vai, .sheet cho thẻ. SwiftUI tự động chọn hành vi đóng chính xác: .sheet có thể đóng bằng vuốt, .fullScreenCover chỉ bằng lệnh. Các bộ sửa đổi có thể được kết hợp trong cùng một hệ phân cấp View.

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

    var body: some View {
        Button("Mở máy ảnh") {
            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("Chụp") { dismiss() }
                    .foregroundColor(.white)
            }
        }
    }
}

Hoạt cảnh và chuyển tiếp tùy chỉnh

Full Screen Cover hỗ trợ các hoạt cảnh tùy chỉnh thông qua UIModalTransitionStyle trong UIKit và các chuyển tiếp tùy chỉnh trong SwiftUI. Các kiểu tiêu chuẩn bao gồm: .coverVertical (từ dưới lên), .crossDissolve (xuất hiện dần), .flipHorizontal (lật) và .partialCurl (hiệu ứng trang).

UIKit: UIViewControllerAnimatedTransitioning

Để có hoạt cảnh hoàn toàn tùy chỉnh, hãy triển khai giao thức UIViewControllerAnimatedTransitioning. Giao thức này cho phép xác định thời lượng hoạt cảnh và chuyển tiếp thông qua phương thức animateTransition(using:). Bộ điều khiển hoạt cảnh được chỉ định thông qua UINavigationControllerDelegate hoặc UIViewControllerTransitioningDelegate.

SwiftUI: Matched Geometry Effect

Trong SwiftUI, các chuyển tiếp tùy chỉnh cho .fullScreenCover được tạo bằng matchedGeometryEffect. Bộ sửa đổi này tạo hiệu ứng di chuyển một phần tử từ View cha đến cửa sổ toàn màn hình. Ví dụ, khi chạm vào hình thu nhỏ, nó sẽ mở rộng mượt mà ra toàn màn hình, tạo hiệu ứng liên tục. MatchedGeometryEffect hoạt động với id và namespace liên kết phần tử ở vị trí nguồn và đích.

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()
        }
    }
}

Khi nào sử dụng Full Screen Cover?

Full Screen Cover được khuyến nghị cho các tình huống mà nội dung cần chiếm toàn bộ màn hình mà không bị phân tâm bởi giao diện cha. Apple HIG xác định ba loại chính: nội dung đa phương tiện, công cụ tạo nội dung và giao diện hệ thống tạm thời.

Phương tiện và giải trí

Trình phát video, xem ảnh, đọc PDF và truyện tranh là những ví dụ điển hình của Full Screen Cover. AVPlayerViewController trong iOS tự động sử dụng chế độ toàn màn hình khi chuyển sang ngang. Các trình chỉnh sửa ảnh như Adobe Lightroom mở trình chỉnh sửa toàn màn hình phía trên thư viện ảnh.

Công cụ tạo nội dung

Máy ảnh, máy quét tài liệu, ghi âm — những tác vụ đòi hỏi sự chú ý hoàn toàn của người dùng. UIImagePickerController đã sử dụng Full Screen Cover cho máy ảnh trước iOS 14. Bắt đầu từ iOS 14, bộ chọn hệ thống sử dụng Page Sheet, nhưng nhà phát triển có thể buộc .fullScreen cho máy ảnh tùy chỉnh.

Những điều cần tránh

Không sử dụng Full Screen Cover cho: biểu mẫu đăng ký (nên dùng Page Sheet), màn hình nhập văn bản nơi ngữ cảnh trang cha quan trọng, và điều hướng tuần tự bên trong cửa sổ modal. Material Design cũng khuyến nghị tránh chặn nút quay lại của hệ thống — điều này được chấp nhận trong iOS, nhưng người dùng phải có cách rõ ràng để đóng thông qua một phần tử UI.