horizontalSizeClass, dynamicTypeSize

안녕하세요.

 

이번에는 SwiftUI EnvironmentValues 중 horizontalSizeClass 프로퍼티와 dynamicTypeSize 프로퍼티에 대해 알아볼게요.

 

 

---

 

# 1. horizontalSizeClass

끝에 Class라는 이름이 붙긴 했지만, 이 친구는 프로퍼티입니다.

 

 

Environment property wrapper로 아래처럼 선언해서 사용할 수 있구요

 

 

 

 

 

horizontalSizeClass에는 enum 타입인 UserInterfaceSizeClass 값이 설정되며 아래의 값 중 하나를 가집니다.

 

 

 

쉽게 생각해서 compact = 작은 화면, regular = 큰 화면이라고 보면 될 것 같아요ㅎㅎ

 

 

 

"그래서 이 값은 어떻게 결정되는데???"

 

"SwiftUI가 알아서!!!"

 

 

SwiftUI가 여러 기준을 토대로 horizontalSizeClass 값을 결정하는데, 그 기준은 아래와 같습니다.

• 현재 디바이스 타입
• 디바이스의 방향 (가로모드, 세로모드)
• iPad에서 Slide Over 및 Split View 형태
• 등등

 

즉, horizontalSizeClass를 이용해서 화면 크기에 따라서 사용자한테 적절한 UI를 그려줄 수 있는 것이죠.

 

 

 

한 번 직접 해볼까요??

 

compact 크기일 때는 VStack을, regular 크기일 때는 HSatck을 사용하도록 구현해볼게요.

 

 

 

 

 

iPhone 11에서 확인해보면

 

세로모드	가로모드

 

기기 방향에 따라서 VStack 또는 HStack으로 적절하게 출력되는 것을 볼 수 있어요ㅎㅎ 👍

 

 

iPad에서도 확인해볼까요??

 

 

👍 👍 👍

 

사용방법은 되게 간단하죠?? 요걸 잘 활용하는게 중요한 것 같아요ㅎㅎ

 

 

 

번외로, 어떤 상황일 때 compact 또는 regular로 설정되는지 궁금해서 여러 가지 테스트를 해봤는데요

 

제가 직접 눈으로 본 결과는 이랬습니다ㅎㅎ 참고만 해주세요!!

• 모든 iPhone portrait 모드의 horizontalSizeClass는 compact이다.
• 대부분의 iPhone landscape 모드의 horizontalSizeClass는 regular이다.
• 화면이 작은 iPhone landscape 모드의 horizontalSizeClass는 compact이다. (ex. iPhone SE)
• 모든 iPad는 portrait 모드, landscape 모드 상관없이 앱을 전체 화면으로 띄웠을 경우 horizontalSizeClass는 regular이다.
• 모든 iPad는 화면 분할이 되어있을 경우, 분할된 화면 크기에 따라 horizontalSizeClass가 compact 또는 regular로 설정된다.

 

 

 

 

# 2. dynamicTypeSize

이것도 EnvironmentValues 중 하나입니다.

 

 

dynamicTypeSize 프로퍼티는 현재 기기의 Dynamic Type Size 정보를 가지고 있는데,

 

enum 타입인 DynamicTypeSize 값이 설정되며, 아래의 값 중 하나를 가집니다.

 

 

 

Environment property wrapper로 아래처럼 선언해서 사용할 수 있습니다.

 

 

 

요것도 직접 해볼까요??ㅎㅎ

 

xxLarge 사이즈보다 작을 때는 VStack을, 그 이상의 크기를 가지고 있으면 HStack으로 출력하도록 구현해볼게요.

 

 

 

 

Dynamic Type 크기를 변경함에 따라서 VStack 또는 HStack으로 잘 출력되는 것을 볼 수 있습니다. 👍 👍 👍

 

 

---

이번 글은 여기서 마무리.