SwiftUI - Spacer

오늘 공부할 주제는 Spacer입니다.

---

Spacer?
먼저 애플 공식문서를 보면, Spacer는 Layout Conatianer에 구조체로 정의되어있습니다.

Spacer는 스택 레이아웃에 포함되어있으면 주 축을 따라 확장되고
스택에 포함되지 않는 경우에는 두 축 모두 확장되는 유연한 공간입니다.
(A flexible space that expands along the major axis of its containing stack layout, or on both axes if not contained in a stack.)

ㅇㅇ?
다시 말해 HStack에 포함되어 있으면 수평으로 확장, VStack에 포함되어 있으면 수직으로 확장되고
스택에 포함되어있지 않으면 수평 수직 모두 확장되는 유연한 공간입니다.

언제 써?
Spacer는 뷰 사이에 간격을 조절하거나 뷰 크기를 확장할 용도로 많이 사용합니다. 

Spacer는 컨텐츠는 없지만 최대한 확장할 수 있는 adaptive(적응형) view를 만듭니다. 
(A spacer creates an adaptive view with no content that expands as much as it can)
대충 유연한 뷰를 만든다 이 말ㅇㅇ

---

Jump To Definition
Spacer 구조체 내부를 살펴보겠습니다.

CGFloat? 타입인 minLength 인스턴스 프로퍼티를 가지고 있습니다.
minLength는 Spacer의 최소 간격을 지정할 때 사용합니다.
초기화할 때 minLnegth를 명시해주지 않으면?
ㅇㅇ 자동으로 nil이 되고 이럴 때는 view들 사이에 시스템 기본 간격이 적용되게 됩니다.

---

비교해보기
HStack안에 Image와 Text가 들어있는 구조를 만들어 보겠습니다.
그리고 파란색 테두리까지 설정해줬습니다.

프리뷰로 보면 아래와 같습니다.

 

HStack 왼쪽 Spacer 생성

위와 동일한 구조에서 Image뷰 전에 Spacer를 추가해줬습니다.
Spacer초기화에 minLength를 따로 설정하지 않았기 때문에 view들 사이에 시스템 기본 간격이 적용되게 됩니다. 
HStack이니까 수평으로 확장된 Spacer가 자리를 차지하게 되겠죠. 
즉 아래 이미지와 같이 HStack 중 왼쪽에 공간이 생기게 됩니다.

 

HStack 중앙 Spacer 생성

이제는 Image 뷰 뒤 Text 뷰 사이에 Spacer를 추가해줬습니다.
Spacer초기화에 minLength를 따로 설정하지 않았기 때문에 view들 사이에 시스템 기본 간격이 적용되게 됩니다. 
중간에 들어가 있으니까 뭔가 중앙에 공간이 생길 것 같아!
ㅇㅇ 아래 이미지와 같이 HStack 중 중앙에 공간이 생기게 됩니다.

 

HStack 오른쪽 Spacer 생성

이제는 Text 뷰 뒤에 Spacer를 추가해줬습니다.
Spacer초기화에 minLength를 따로 설정하지 않았기 때문에 view들 사이에 시스템 기본 간격이 적용되게 됩니다. 
이번에는 어떻게 될까요? 
아래 이미지와 같이 HStack중 오른쪽에 공간이 생기게 됩니다.

 

HStack 왼쪽 오른쪽 Spacer 생성

이번에는 왼쪽 오른쪽 끝에 Spacer를 추가해줬습니다.
Spacer초기화에 minLength를 따로 설정하지 않았기 때문에 view들 사이에 시스템 기본 간격이 적용되게 됩니다. 
아래 이미지와 같이 HStack중 왼쪽 오른쪽에 공간이 생기게 됩니다.

(아무것도 적용 안 한 거랑 비슷하지만? HStack의 넓이 즉 파란 테두리를 주의해서 봐주세요!)

 

HStack 왼쪽 Spacer(minLength: ) 생성

이번에는 HStack 왼쪽에 Spacer(minLength: 300)을 추가해줬습니다.
Spacer초기화 시점에 minLength값도 300으로 설정했습니다. 
minLength는 Spacer의 최소 간격을 지정할 때 사용한다고 했죠?
그럼 Spacer가 300의 자리는 무조건 차지해야 한다는 의미예요! 

Spacer 야 ㅡㅡ 300은 무조건 내 자리다!
그럼 Image와 Text가 남은 공간에서 뷰를 구성하게 되겠죠 (쭈굴)

아래 이미지와 같이 HStack 중 왼쪽에 Spacer가 300이 넘는 공간을 차지하게 됩니다.
자리가 없으니까 Hello, world! 가 한 줄에 있지 못하고 두 줄로 변경되었음을 확인할 수 있습니다.

보니까 Spacer는 301의 넓이를 가지게 되었네요.

---

고정된 크기의 Spacer
위에서 쓴 Spacer들은 알아서 공간을 채워줬잖아요?
그런데 고정된 프레임의 Spacer를 만들 수도 있습니다.

예를 들어
VStack에서 원하는 높이의 Spacer를 만들고 싶다면 .frame(height: )을 사용하면 됩니다.

VStack {
    Text("First Label")
    Spacer()
        .frame(height: 50)
    Text("Second Label")
}

여기서 조금의 유연성을 추가하고 싶다면? 
아래와 같이 .frame(minLength:)를 사용해주면 됩니다.

VStack {
    Text("First Label")
    Spacer(minLength: 50)
    Text("Second Label")
}

.frame(minHegiht: , minLength:) 사용해도 되공

---

ZStack 같은 경우는 뷰를 위아래로 배치하기 때문에 Spacer는 효과가 없게 됩니다.
ZStack에서는 Spacer는 다른 형제 뷰의 최대 크기만큼만 확장되기 때문입니다.
(계층 구조를 확인해보면 이해 감)
ZStack에서 Spacer과 같은 역할을 하는 뷰를 만들고 싶다면 Rectangle을 사용해보세요!

 

resource
https://developer.apple.com/documentation/swiftui/spacer
https://www.hackingwithswift.com/quick-start/swiftui/how-to-force-views-to-one-side-inside-a-stack-using-spacer
https://www.hackingwithswift.com/quick-start/swiftui/how-to-make-a-fixed-size-spacer