Sử dụng Xem trước trực tiếp trong UIKit

Jan 16 2023
Nâng cao khả năng phát triển UIKit với Live Preview: Hướng dẫn từng bước
Kể từ khi triển khai Live Preview trong Xcode, tôi nhận thấy đây là một phương pháp thuận tiện và hiệu quả cao để kiểm tra và gỡ lỗi mã SwiftUI của tôi. Khả năng xem trước hoạt ảnh của tôi trong thời gian thực đã giảm đáng kể thời gian phát triển, khiến nó trở thành một công cụ lý tưởng cho công việc của tôi với SwiftUI.

Kể từ khi triển khai Live Preview trong Xcode, tôi nhận thấy đây là một phương pháp thuận tiện và hiệu quả cao để kiểm tra và gỡ lỗi mã SwiftUI của tôi. Khả năng xem trước hoạt ảnh của tôi trong thời gian thực đã giảm đáng kể thời gian phát triển, khiến nó trở thành một công cụ lý tưởng cho công việc của tôi với SwiftUI. Tôi không còn dựa vào trình mô phỏng hoặc thiết bị vật lý để kiểm tra mã của mình nữa vì Live Preview mang đến trải nghiệm liền mạch và trực quan.

UIKit là một công cụ mạnh mẽ để tạo giao diện người dùng phong phú và tương tác. Có thể khó lặp lại nhanh thiết kế và bố cục của chế độ xem của bạn nếu không xây dựng và chạy ứng dụng trên trình giả lập hoặc thiết bị. Đó là nơi Xem trước trực tiếp xuất hiện.

Để sử dụng Xem trước trực tiếp với UIKit, chúng tôi phải bọc UIViewControllers và UIViews của mình vào chế độ xem SwiftUI. Điều này có thể đạt được bằng cách sử dụng các giao thức UIViewControllerRepresentableUIViewRepresentable.

UIViewControllerRepresentableUIViewRepresentablelà các giao thức trong khung SwiftUI cho phép bạn đại diện UIViewControllerhoặc UIView, tương ứng, trong môi trường SwiftUI. Các giao thức này xác định các phương thức và thuộc tính cần thiết để tạo và quản lý một UIViewControllerhoặc UIViewphiên bản trong môi trường SwiftUI.

Thiết lập Trình bao bọc

Chúng tôi sẽ tạo một tệp mới và đặt tên cho nó là LivePreview. Chúng tôi sẽ nhập khung SwiftUI và xác định hai cấu trúc có tên UIViewControllerPreviewUIViewPreviewtrong tệp này. Mỗi phù hợp với UIViewControllerRepresentableUIViewRepresentabletương ứng

UIViewControllerPreviewUIViewPreviewlà các cấu trúc chung nhận tham số loại ViewControllerViewtuân theo giao thức UIViewControllerUIViewtương ứng.

struct UIViewControllerPreview<ViewController: UIViewController>: UIViewControllerRepresentable
struct UIViewPreview<View: UIView>: UIViewRepresentable

Chữ ký của UIViewControllerRepftimeable giống như bên dưới:

protocol UIViewControllerRepresentable : View where Self.Body == Never

  • makeUIViewController(context:) -> UIViewController: Phương thức này được sử dụng để tạo phiên bản UIViewController sẽ được sử dụng trong bản xem trước.
  • updateUIViewController(_:context:): Phương thức này được sử dụng để cập nhật phiên bản UIViewController khi hệ thống phân cấp chế độ xem SwiftUI thay đổi.

Chữ ký của UIViewControllerRepftimeable giống như bên dưới:

protocol UIViewRepresentable : View where Self.Body == Never

  • makeUIView(context:) -> UIView: Phương thức này được sử dụng để tạo UIViewphiên bản sẽ được sử dụng trong bản xem trước.
  • updateUIView(_:context:): Phương thức này được sử dụng để cập nhật phiên bản UIViewkhi cấu trúc phân cấp chế độ xem SwiftUI thay đổi.

Thực hiện

Chúng tôi sẽ thiết lập chức năng bắt buộc trong cấu trúc của chúng tôi mà tôi đã đề cập trước đây như bên dưới.

struct UIViewControllerPreview<ViewController: UIViewController>: UIViewControllerRepresentable {
    let viewController: ViewController

    init(_ viewController: ViewController) {
        self.viewController = viewController
    }

    func makeUIViewController(context: Context) -> ViewController {
        viewController
    }

    func updateUIViewController(_ uiViewController: ViewController, context: Context) { }
}

struct UIViewPreview<View: UIView>: UIViewRepresentable {
    let view: View

    init(_ view: View) {
        self.view = view
    }

    func makeUIView(context: Context) -> UIView {
        return view
    }

    func updateUIView(_ view: UIView, context: Context) {
        view.setContentHuggingPriority(.defaultHigh, for: .horizontal)
        view.setContentHuggingPriority(.defaultHigh, for: .vertical)
    }
}

struct ViewController_Preview: PreviewProvider {
    static var previews: some View {
        UIViewControllerPreview(ViewController())
    }
}

Khi điều này được thiết lập, chúng ta có thể mở chế độ Canvas bằng cách nhấp vào Command + Option + Return. Điều này sẽ mở Canvas trong cửa sổ trình chỉnh sửa trợ lý, cho phép chúng tôi xem bản xem trước trực tiếp của ViewController của chúng tôi.

Khi chúng tôi thực hiện các thay đổi đối với ViewController của mình, chẳng hạn như cập nhật màu nền của chế độ xem, như trong gif ở trên mà tôi đã chia sẻ, chúng tôi có thể thấy những thay đổi đó được phản ánh theo thời gian thực trong bản xem trước trực tiếp.

Tóm lại, bằng cách gói UIKit của chúng tôi UIViewControllertrong một cấu trúc phù hợp với UIViewControllerRepresentablegiao thức, chúng tôi có thể mở rộng Xem trước trực tiếp thành UIViewController, cho phép quy trình làm việc hiệu quả hơn khi thiết kế và lặp lại trên giao diện người dùng của chúng tôi.

Nếu bạn thích đọc bài viết này và thấy nó hữu ích, vui lòng xem xét cho nó một vài cái vỗ tay và theo dõi tôi để có thêm nội dung như thế này trong tương lai ❤️

© Copyright 2021 - 2023 | vngogo.com | All Rights Reserved