Spacing & Spacer

※ 지극히 개인적인 경험을 토대로 적어둔 것입니다. 틀린 부분에 대한 지적은 언제나 환영합니다.

 

 

SwiftUI에서는 뷰와 뷰 사이에 거리를 줄 때 Spacing 또는 Spacer 을 이용한다

 

 

Spacing

 

일반적으로 VStack, HStack, LazyVGrid, LazyHGrid 등에 사용된다.

우선 기본적인 VStack 을 보자면 아래와 같다.

VStack {
    Text("TEXT-1")
    Text("TEXT-2")
}

위 이미지처럼 텍스트 뷰가 가운데에 나란히 붙어서 생성되었다.

이 때 VStack 내부의 항목간에 똑같은 간격을 주기 위한 것이 Spacing 이다.

VStack(spacing: 16) {
    Text("TEXT-1")
    Text("TEXT-2")
    Text("TEXT-3")
}

 

그렇다면, 항목간의 각각 다른 값의 간격을 주기 위해서는 어떻게 해야할까?

 

 

 

Spacer

 

그때 사용 되는 것이 바로 Spacer이다.

SwiftUI의 Sapcer은 확장 할 수 있는 모든 공간을 자동으로 채워서 간격을 준다.

그래서 단지 Spacer만 추가를 하게 된다면 아래와 같은 결과를 보여준다.

VStack {
    Text("TEXT-1")
    Spacer()
    Text("TEXT-2")
}

Spacer을 추가하자 각각 텍스트 뷰는 화면의 끝과 끝으로 이동되었다.

이로서 텍스트 뷰를 제외한 모든 영역을 자동으로 채우는 것을 확인 할 수 있다.

 

하지만 우리가 원한 것은 각각의 텍스트 뷰 사이의 다른 값의 간격이다. 이런 경우에도 Spacer을 사용하면 된다.

Spacer을 공간을 차지하고 있는 하나의 뷰로 생각하고, 뷰의 frame을 작업하는 것과 동일하게 height 값을 직접 입력해주면 해당 값만큼 공간을 차지하게 되어 간격이 늘어난다.

VStack {
    Text("TEXT-1")
    Spacer()
        .frame(height: 32)
    Text("TEXT-2")
    Spacer()
        .frame(height: 80)
    Text("TEXT-3")
}

 

추가로 Spacer의 경우 Spacer(minLength:) 가 존재하는데 minLength는 말 그대로 최소 길이를 말한다.

예를 들어 minLength의 값이 8이라면 VStack의 항목간의 최대거리는 여전히 화면 전체이며, 최소거리는 8이라는 말이다.

항목이 위 예시들과 같이 적을 경우에는 화면 전체만큼 거리가 늘어나지만, 항목이 하나하나 계속 늘어날 때마다 간격이 줄어들면서 화면 전체를 채울만큼 항목이 많아지면 최소한 8의 간격을 유지하는 것이다.