View: Vstack, Hstack, Zstack

View의 body property는 뷰의 구성요소들이 어떻게 레이아웃되어야하는지 계층구조를 짓는 역할을 한다. 이 레이아웃은 주로 VStack, HStack, ZStack을 구성할 때 사용된다. 이들이 구성하는 뷰들을 child view라고 나타낸다.

 

VStack

VStack은 vertical하게 뷰를 감싸는 wrapper 역할을 한다. 예를 들어서 두개의 Text 뷰들을 횡단으로 정렬하고 싶으면, VStack을 사용하는 것이다.

VStack {
  Text("Learning to code!")
  Text("I'm happy")
}

만약에 여기서 VStack을 사용하지 않고 두 개의 Text뷰 중 하나를 그냥 뒤에 위치시킨다면 첫번째 Text뷰만 보일것이다. 뷰 모디파이어에는 두가지 카테고리가 있다. 하나는 (1)VStack에 영향을 끼치고, 다른 하나는 (2)그 child view에 영향을 끼친다.

(1)의 경우는 padding(), border()이 있다. 

(2)의 경우는 font(), foregroundColor() 가 있다.

 VStack {
     Text("Learning to code!")
     Text("I'm happy")
 }
 .font(.title)

만약에 여기서 Text뷰들에 각각 다른 font() 모디파이어를 가진다면, 그 모디파이어가 우선순위를 가진다.

 VStack {
     Text("Learning to code!")
         .font(Font.custom("Helvetica", size: 16))
     Text("I'm happy")
 }
 .font(.title)

뷰 모디파이어를 추가하는것 말고도, VStack에 선언을 해서 child view의 정렬이나 간격을 줄 수 있다.

 VStack(alignment: .leading, spacing: 10) {
     Text("Learning to code!")
     Text("I'm happy")
 }

여기서 .leading이란 왼->오로 읽히는 왼쪽 정렬과 같다. 기본값으로 차일드 뷰는 가운데정렬이다.

오른쪽 정렬은 .trailing을 쓰면 된다.

 

HStack

HStack은 VStack과 비슷하게 나란히 정렬하는것이다. 하지만 위처럼 .leading, .trailing을 쓰면 안맞다. HStack 정렬 옵션으로는 .top, .bottom, .center, .firstTextBaseline, .lastTextBaseline이 있다.

항목이 나란하게 정렬되길 원하면,(padding, font와 상관없이) .firstTextBaseline, .lastTextBaseline를 사용한다.

 

ZStack

ZStack은 하나의 뷰에 또 다른 뷰를 레이어처럼 쌓을 때 사용된다. 뷰에 레이어 계층이 있어서 어떤 뷰가 먼저 올라와야하는지 순서가 있다거나 이렇게 overlapping 뷰들을 만들고 싶을 때 유용하다. ZStack에서 두 번째로 정의된 것이 제일 위로 나타난다! (즉, 아래로 갈수록 우선순위가 높아져 레이어의 위쪽에 나타난다)

ZStack {
    VStack {}
        .frame(width: 200, height: 200)
        .background(Color.blue)
    VStack {}
        .frame(width: 100, height: 100)
        .background(Color.yellow)
}

 

ZStack 뷰모디파이어에서는 foregroundColor(), border(), font()에 주의해야한다. 이들은 자식 뷰에 적용이 된다. 따라서 위 코드의 ZStack 제일 하단에 .font(.title) // .foregroundColor(.green) // .border(Color.black) 을 추가하게 되면 아래와 같이 나타날 것이다.

ZStack(alignment: Alignment(horizontal: .leading, vertical: .bottom)) {
    VStack {}
        .frame(width: 200, height: 200)
        .background(Color.blue)
    VStack {}
        .frame(width: 100, height: 100)
        .background(Color.yellow)
}
.font(.title)
.foregroundColor(.green)
.border(Color.black)

 

 

Button

SwiftUI의 Button 뷰는 View 프로토콜을 따른다.  아래와 같은 syntax를 사용한다.

Button(action: {
    // some action here
    }, label: {
    // some View here
})

})

Color

Color 뷰도 View 프로토콜을 따른다. Color.blue는 View 프로토콜인 Color를 반환한다. 

ZStack {
    Color.blue
    Text("I'm blue!")
        .font(.title)
        .foregroundColor(.white)
}

그리고 이것은 모든 영역을 차지하는데(화면의 대부분). 우리가 현재 ZStack을 사용하고 있으므로 Text뷰가 Color 뷰 위에 있다는 것을 볼 수 있다. 위아래에 보이는 영역을 'safe areas'라고 한다. 이것으로 해당 요소가 status bar, navigation bar, tab bar에 깔리지 않는지 확인할 수 있다.

Spacer

Spacer는 View의 종류인데 컨테이너가 할 수 있는 정도에 따라 수평 또는 수직적으로 공간을 차지하도록 하는 역할을 한다. 

VStack {
    Spacer()
    Text("I'm blue!")
        .font(.title)
        .foregroundColor(.blue)
}

이렇게 하면 얘가 가질 수 있는 vertical space의 최대한을 차지한다. 그래서 Text 뷰를 할 수 있는 최대 한도까지 아래로 내린 식으ㅡ로 나타나는 것이다. 

HStack {
    Spacer()
        .frame(width: 100)
    Text("I'm blue!")
        .font(.title)
        .foregroundColor(.blue)
}

이런 식으로 Spacer에 제한을 둘 수 있다.