SwiftUI Preview

SwiftUI: PreviewProvider

• PreviewProvider는 Xcode안에서 뷰의 프리뷰를 만드는 프로토콜 타입 입니다.
• associated type인 Previews를 View 타입으로 가지고 있다.
• 여기서 View타입은 SwiftUI view이다.

UIViewControllerRepresentable

• UIViewController를 SwiftUI로 변경하는데 사용 되는 다리의 역할을 하는 프로토콜.

Adopt this protocol in one of your app's custom instances, and use its methods to create, update, and tear down your view controller. The creation and update processes parallel the behavior of SwiftUI views

Preview For UIViewController

• UIViewController를 SwiftUI로 보여주기 위한 UIViewControllerRepresentable를 따르는 struct을 구현
• UIViewController를 받아 some View로 보여주는 showPreview 함수 구현

#if canImport(SwiftUI) && DEBUG
extension UIViewController {
    private struct Preview: UIViewControllerRepresentable {
        let viewController: UIViewController

        func makeUIViewController(context: Context) -> some UIViewController {
            return viewController
        }

        func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {

        }
    }

    func showPreview(_ deviceType: DeviceType = .iPhone14Pro) -> some View {
        Preview(viewController: self).previewDevice(PreviewDevice(rawValue: deviceType.name()))
    }
}
#end if

사용

#if canImport(SwiftUI) && DEBUG
import SwiftUI

struct FeedViewControllerPreview: PreviewProvider {
    static var previews: some View {
        FeedViewController(feedViewModel: FeedViewModel(feedTabCoordinator: FeedTabCoordinator(tabBarController: UITabBarController())))
            .showPreview()
    }
}
#endif

Preview For UIView

• UIViewRepresentable를 따르는 UIViewPreview struct 구현

#if canImport(SwiftUI) && DEBUG
import SwiftUI

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

    init(_ builder: @escaping () -> View) {
        view = builder()
    }

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

    func updateUIView(_ uiView: UIViewType, context: Context) {
        view.setContentHuggingPriority(.defaultHigh, for: .horizontal)
        view.setContentHuggingPriority(.defaultHigh, for: .vertical)
    }
}
#endif

사용

#if canImport(SwiftUI) && DEBUG
import SwiftUI

struct LikeInfoViewPreview: PreviewProvider {
    static var previews: some View {
        UIViewPreview {
            LikeInfoView()
        }
        .frame(width: UIScreen.main.bounds.width, height: 80)
        .previewLayout(.sizeThatFits)
    }
}

#endif

Preview in Xcode 15 using Macro

• Xcode 15이상에서는 macro 기능이 추가 되어 기존 UIKit으로 만든 뷰들도 쉽게 SwiftUI Preview로 구성을 볼 수 있게 되었다.
• 키워드
  • #Preview

  #Preview {
  		let button = UIButton(type: .system)
      button.setTitle("UIKit", for: .normal)
      
      return button
  }
  

  참고

  Xcode Previews with UIKit and AppKit in Xcode 15 | Sarunw