SwiftUI View 레이아웃

  • 이번에는 SwiftUI에서 View 레이아웃을 어떻게 사용하는지에 대해 알아보겠습니다.

HStack VStack 사용하기

  • 두 개 이상의 View를 하나로 감싸기 위해서는 다음과 같이 HStack 혹은 VStack을 감싸면 됩니다.
  • HStack은 Horizontal Stack, VStack은 Vertical Stack으로 각각 가로와 세로 스택입니다.
HStack {
  Text("SwiftUI")
  Text("Hohyeon")
}

VStack {
  Text("SwiftUI")
  Text("Hohyeon")
}
swiftui-tutorial-viewswiftui-tutorial-view

ZStack 사용하기

  • ZStack은 또 다른 스택 뷰로, 뷰를 겹칠 때 사용하면 되는데요.
  • 다음 코드는 어떠한 결과를 만들까요?
  • 이미지와 텍스트가 포개지게 됩니다.
ZStack() {
  Image("image-name")
  Text("Hohyeon")
}
swiftui-tutorial-view

View 정렬하기

  • 스택 안에 있는 뷰들 간에 일정한 간격을 주기 위해서는 spacing을 사용하면 됩니다.
VStack(spacing: 50) {
  Text("SwiftUI")
  Text("Hohyeon")
}
swiftui-tutorial-view
  • Stack 안의 View 사이의 적당한 간격을 주기 위해서는 padding()을 사용하면 되는데요.
  • padding에 인자 값을 전달하지 않으면 시스템 기본값으로 자동 적용됩니다.
VStack {
  Text("SwiftUI")
    .background(.yellow)
    .padding()
    .background(.orange)
}
swiftui-tutorial-view
  • 그리고 인자 값을 전달하면, 다음과 같이 원하는 위치에 원하는 간격을 줄 수 있습니다.
VStack {
  Text("SwiftUI")
    .background(.yellow)
    .padding(.vertical, 25)
    .background(.orange)
}
swiftui-tutorial-view
  • 스택 안에 있는 View를 정렬하기 위해서는 alignment를 다음과 같이 사용하면 됩니다.
VStack(alignment: .leading) {
  Text("SwiftUI")
  Text("Hohyeon Moon")
}
swiftui-tutorial-view
  • 기본적으로 SwiftUI의 View는 Safe Area 안에 배치됩니다.
  • Safe Area를 넘고 싶다면, .edgesIgnoringSafeArea를 사용하면 됩니다.
Text("Hello World")
  .frame(maxWidth: .infinity, maxHeight: .infinity)
  .background(.yellow)
  .edgesIgnoringSafeArea(.all)
swiftui-tutorial-view

Lazy 레이아웃

  • Lazy 키워드가 붙는 레이아웃은 필요한 아이템만큼만 로딩하는 레이아웃인데요.
  • 대표적으로, LazyHStack과 LazyVStack이 있습니다.
  • 즉, 화면에 표시되어 있거나 표시 될 아이템만 로딩해서 앱의 퍼포먼스를 더 좋게해주는 것입니다.
ScrollView(.horizontal) {
  LazyHStack(alignment: .center, spacing: 10) {
    ForEach(1...100, id: \.self) {
      Text("Column \($0)")
        .padding()
        .background(.yellow)
        .cornerRadius(15)
        .padding(5)
    }
  }
}
swiftui-tutorial-view

마무리

  • 이렇게 해서 SwiftUI에서는 View 레이아웃을 어떻게 이용하는지에 대해 알아봤습니다.