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")
}

ZStack 사용하기

• ZStack은 또 다른 스택 뷰로, 뷰를 겹칠 때 사용하면 되는데요.
• 다음 코드는 어떠한 결과를 만들까요?
• 이미지와 텍스트가 포개지게 됩니다.

ZStack() {
  Image("image-name")
  Text("Hohyeon")
}

View 정렬하기

• 스택 안에 있는 뷰들 간에 일정한 간격을 주기 위해서는 spacing을 사용하면 됩니다.

VStack(spacing: 50) {
  Text("SwiftUI")
  Text("Hohyeon")
}

• Stack 안의 View 사이의 적당한 간격을 주기 위해서는 padding()을 사용하면 되는데요.
• padding에 인자 값을 전달하지 않으면 시스템 기본값으로 자동 적용됩니다.

VStack {
  Text("SwiftUI")
    .background(.yellow)
    .padding()
    .background(.orange)
}

• 그리고 인자 값을 전달하면, 다음과 같이 원하는 위치에 원하는 간격을 줄 수 있습니다.

VStack {
  Text("SwiftUI")
    .background(.yellow)
    .padding(.vertical, 25)
    .background(.orange)
}

• 스택 안에 있는 View를 정렬하기 위해서는 alignment를 다음과 같이 사용하면 됩니다.

VStack(alignment: .leading) {
  Text("SwiftUI")
  Text("Hohyeon Moon")
}

• 기본적으로 SwiftUI의 View는 Safe Area 안에 배치됩니다.
• Safe Area를 넘고 싶다면, .edgesIgnoringSafeArea를 사용하면 됩니다.

Text("Hello World")
  .frame(maxWidth: .infinity, maxHeight: .infinity)
  .background(.yellow)
  .edgesIgnoringSafeArea(.all)

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에서는 View 레이아웃을 어떻게 이용하는지에 대해 알아봤습니다.