How to preview your layout at different Dynamic Type sizes

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-preview-your-layout-at-different-dynamic-type-sizes]

 

How to preview your layout at different Dynamic Type sizes

 

앱을 만들때 레이아웃이 모든 Dynamic Type의 범위에서 잘 동작하는지 확인하는 것이 중요합니다. SwiftUI가 기본적으로 지원하기 때문에, 부분적이며, 많은 사람들이 많은 정보를 원하기 때문에, 더 작은 폰트 크기를 사용하지만, 대부분 접근성(accessibility)이 필요한 많은 사람들이 그것을 의존하기 때문입니다.

 

다행히도, SwiftUI의 모든 구성요소는 기본적으로 Dynamic Type 크기에 적합하고, 미리보기에서 .sizeCategory environment 값을 사용해서 다양한 크기의 디자인을 쉽게 미리보기 할 수 있습니다. 

 

예를들어, 특히 작은 텍스트가 어떻게 보이는지 알려면, 다음과 같이 컨텐츠 뷰를 미리보기 하기 위해서 .environment(.sizeCategory, .extraSmall)을 추가합니다.

#if DEBUG
struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
      Group {
         ContentView()
            .environment(\.sizeCategory, .extraSmall)
      }
   }
}
#endif

 

또한 미리보기의 그룹으로 다시 보내서, 모드 다른 크기의 카테고리로 사용할 수 있습니다. 이를 통해 다양한 폰트 크기에서 동일한 디자인을 나란히 볼 수 있습니다.

 

따라서, 다음 코드는 매우 작은 크기, 표준 크기, 가능한 최대 크기의 디자인을 보여줍니다.

#if DEBUG
struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
      Group {
         ContentView()
            .environment(\.sizeCategory, .extraSmall)

         ContentView()

         ContentView()
            .environment(\.sizeCategory, .accessibilityExtraExtraExtraLarge)   
      }
   }
}
#endif

 

3개의 디자인 모두 훌륭하다면 계속 진행해도 좋습니다.

 

팁 : 미리보기가 확대되는 경우에, 스크롤하거나 다른 미리보기를 축소해야 합니다.