How to create different layouts using size classes

 

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

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-different-layouts-using-size-classes]

 

How to create different layouts using size classes

 

SwiftUI는 기본적으로 environment에서 사용할 수 있는 size classes를 지원합니다. 이를 사용하기 위해, 우선 다음과 같이, @Environment 객체를 만들어 그 값을 저장할 것입니다.

@Environment(\.horizontalSizeClass) var horizontalSizeClass

 

그리고나서 필요할때마다 프로퍼티의 값을 확인하며, 다음과 같이 .compact 또는 .regular size class를 찾습니다.

if horizontalSizeClass == .compact {
    return Text("Compact")
} else {
    return Text("Regular")
}

 

모든것을 종합해서, 다음과 같은 뷰를 만들 수 있습니다.

struct ContentView: View {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass: UserInterfaceSizeClass?

    var body: some View {
        if horizontalSizeClass == .compact {
            return Text("Compact")
        } else {
            return Text("Regular")
        }
    }
}

 

Size classes는 컨텐츠에 VStack 또는 HStack을 사용해서 사용가능한 공간을 지능적으로 적용하도록 사용자 인터페이스를 만드는 멋진 방법입니다. 예를들어, 공간이 충분하는 경우에 수평으로 배치하지만, 공간이 제한될때 수직으로 배치합니다.