SwiftUI 튜토리얼 3편 — 스택다루기

SwiftUI 튜토리얼 전체리스트

지난 2편에 이어 이번에는 스택에 대해 다루어보겠습니다. 이번화는 내용이 다소 짧고 다소 고리타분할 수 있습니다.😔😔 이미 스택에 대해 개념이 잡혀있으시다면 이번 편은 넘어가셔도 무방합니다. 이전과 동일하게 SwiftUI 프로젝트를 생성한 후 ContentView.swift 파일을 편집해보겠습니다.

스택은 3가지로 나눌 수 있습니다. 수직(Vertical)으로 View를 쌓는 VStack , 수평(Horizontal)으로 View를 쌓는 HStack 마지막으로 동일한 수평과 수직 값을 갖지만 View를 겹쳐서 쌓아 올리는 ZStack이 있습니다.

VStack과 HStack

위와 같이 코드를 작성하고 실행해보면 정중앙에 뷰 하나만 덩그러니 있게 됩니다. 텍스트를 더 추가해보고 배경 색상도 적용해보겠습니다.

결과화면

이제 중앙에 3개의 텍스트가 모여있게 됩니다. HStack에는 배경 값을 주었는데 크기가 딱 TextView크기만큼 배경색이 바뀌어있습니다. HStack은 자식들의 크기만큼 늘어나게 되며 기본값으로 정중앙에 위치하게 됩니다. 이번에는 HStack을 VStack으로 이름만 바꾸어보겠습니다.

HStack을 VStack으로 바꾸어도 유사하게 적용됩니다. 만약 텍스트의 크기를 다르게 적용한다면

중앙으로 텍스트가 정렬되게됩니다.

alignment와 spacing옵션 적용하기

VStack(alignment: .leading, spacing: 20)

Alignment와 Spacing값을 이용하여 정렬 방향과 간격을 설정할 수 있습니다. 하지만 만약 뷰를 맨 위와 맨 끝에 정렬하게 하려면 어떻게 해야 할까요?

Spacer

결과화면

Spacer를 선언하면 별도의 옵션을 주지 않는 이상 가능한 모든 영역을 차지하게 되고 부모 뷰인 VStack 역시 Spacer로 인해 가능한 모든 영역만큼 크기가 늘어납니다.

Spacer를 각 텍스트뷰 사이에 주게 되면 최상단, 중앙, 최하단에 각각 텍스트가 위치하게 됩니다. 만약 맨위와 중앙사이에는 Spacer를 2개 중앙과 하단에는 1개만 선언하면 Spacer의 개수에 비례하여 다른 가중치는 받게됩니다.

Spacer().frame(height:5)

별도의 frame값을 주게되면 선언한 width 혹은 height값만큼만 공간을 차지합니다.

ZStack

Zstack은 뷰를 겹쳐서 표현할때 사용하게됩니다. 먼저 ZStack에 노란색을 추가하겠습니다.

색상을 추가해도 SafeArea까지는 적용이 되지않는데 이때 edgesIgnoringSafeArea 옵션을 사용하여 전체로 적용해볼 수 있습니다.

Color.yellow.edgesIgnoringSafeArea(.all)

결과화면

다음으로 색상을 더 추가해보겠습니다.

결과화면

ZStack에서는 색상을 추가하면 할수록 계속해서 View가 위로 쌓이게됩니다. 그라디언트값과 UIColor값도 추가해보겠습니다.

마지막으로 지금까지 배운내용을 종합해서 시계모양으로 뷰를 배치하는 예제를 해보겠습니다. 설명을 하기도 애매할만큼 코드가 직관적입니다;;

결과화면

다음편엔 List와 Navigation에 대해 다루어보겠습니다.

SwiftUI 튜토리얼 4편 — List와 Navigation