SwiftUI Preview

  • 이번에는 다양한 디바이스에서 SwiftUI를 Preview 하는 방법에 대해 알아보겠다.
  • Swift 기본 문법을 숙지하고 있다는 가정 하에 작성되었다.

SwiftUI Preview 코드

  • 기본적으로 SwiftUI의 Preview는 각 SwiftUI 파일 하단에 작성되어 있다.
  • Xcode에서 처음 SwiftUI 파일을 생성하면 다음과 같은 코드가 하단에 있을 것이다.
struct ContentViewTwelve_Previews: PreviewProvider {
    static var previews: some View {
        ContentViewTwelve()
    }
}

다양한 기기에서 Preview 하기

  • 설정에 따라 다르겠지만, Preview 하면 기본적으로 보여주는 기기가 각자 있을 것이다.
  • 다른 기기에서 Preview 하기 위해서는 다음과 같이 코드를 변경하면 된다.
ContentView()
    .previewDevice(PreviewDevice(rawValue: "iPhone SE"))

한 번에 여러기기에서 Preview 하기

  • 여러기기의 Preview를 한 화면에 한 번에 보려면,
  • 다음과 같이 여러개의 ContentView를 Group으로 감싸주면 된다.
#if DEBUG
struct ContentViewTwelve_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentViewTen()
            ContentViewEleven()
        }
    }
}
#endif
  • 코드를 실행해보면 다음과 같이 된다.

swiftui-tutorial-preview

Preview Dark Mode

  • 기기의 상태가 Dark Mode 환경일 때를 Preview 할 수도 있다.
  • 다음과 같이 Preview 코드를 작성하면 된다.
#if DEBUG
struct ContentViewTwelve_Previews: PreviewProvider {
   static var previews: some View {
      Group {
         ContentViewFour()
            .environment(\.colorScheme, .light)

         ContentViewFour()
            .environment(\.colorScheme, .dark)
      }
   }
}
#endif

swiftui-tutorial-preview

관련 글