[Swift/SwiftUI] UIKit에서 Preview 사용하기

자질구레한 수정사항
매번 빌드하지 말고
이제는 Preview로 확인하자!! 🥳

 

 

안녕하세요. 오딘(Odin)입니다.

 

여러분!! 앱을 개발하다보면 기능이 점점 많아져 빌드시간이 오래 걸리게 되죠

근데 기획, 색상, 디자인, 폰트 등
UI적인 문제가 발생하여 수정 요청이 들어오게 되면...

😱😱😱

 

여러분들도 느껴보셨을 거예요.

진짜 자질구레한 것들 수정하고 검사받는데 은근 시간이 많이 소요된다는 거...

 

그래서 이러한 문제점을 해결해보고자

SwiftUI에서 제공하는 Canvus를 UIKit에 적용해서 해결해보려고 합니다!!

 

그러면 우리 같이 해결해볼까요???

(UIKit 화면을 SwiftUI에 적용하는 것 X)

 

 

 

 

---

 

 

 

UIKit을 preview로 띄우기

 

Device Type 설정

enum Preview_DeviceType: String, CaseIterable {
    case iPhone_8 = "iPhone 8"
    case iPhone_8_Plus = "iPhone 8 Plus"
    case iPhone_13_mini = "iPhone 13 mini"
    case iPhone_13 = "iPhone 13"
    case iPhone_13_Pro = "iPhone 13 Pro"
    case iPhone_13_Pro_Max = "iPhone 13 Pro Max"
    case iPhone_SE_2nd_generation = "iPhone SE (2nd generation)"
}

 

 

ViewController에 UIViewControllerRepresentable 채택

#if canImport(SwiftUI) && DEBUG

import SwiftUI

extension UIViewController {
    private struct Preview: UIViewControllerRepresentable {
        let viewController: UIViewController
        
        // makeUIViewController(context:): UIViewController를 생성하고 초기화
        func makeUIViewController(context: Context) -> UIViewController {
            return viewController
        }
        
        // updateUIViewController(_:context:): ViewController 업데이트가 필요할 때 호출되는 메소드 (ViewController에 필요한 데이터를 갱신)
        func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
        }
    }
    
    public var preview: some View {
        return Preview(viewController: self)
    }
    
    func showPreview(_ deviceType: Preview_DeviceType) -> some View {
        preview
            .previewDevice(PreviewDevice(rawValue: deviceType.rawValue))
            .previewDisplayName(deviceType.rawValue)
    }
}
#endif

 

 

 

Preview로 보고 싶은 VIewController 작성

#if canImport(SwiftUI) && DEBUG
import SwiftUI

@available(iOS 13.0, *)
struct ViewController_Preview: PreviewProvider {
    
    static var previews: some View {
        // 이렇게 하는 이유
        // DeviceType이 Identifiable 프로토콜 조건에 맞지 않는다
        ForEach(Preview_DeviceType.allCases, id: \.self) { deviceType in
            CustomViewController().showPreview(deviceType)
        }
    }
}
#endif

 

 

 

---

주의사항!!

Device 종류를 추가하였으나 Canvus에 적용이 안되는 경우!!

 

 

 

다음 화면에서 볼수 있듯이

해당 Device종류가 추가가 안 돼 있어서
발생하는 문제!!

 

해결 완료!