SwiftUI : HStack, VStack, ZStack

 VStack 

: A view that arranges its children in a vertical line.

: y축을 기준으로 Top to Bottom으로 정렬하는 View 

 

---

위에 있는 그림의 코드이다. 

Vstack의 alignment를 .center로, spacing을 0으로 두었다!

 

 

이렇게 하면

Vstack 내부의 View들(여기서는 Rectangle)의 정렬 기준(alignment)과

해당 View들의 사이의 spacing 값이 조절된다

 

            Text("VStack")
            VStack(alignment: .center, spacing: 0){
                Rectangle()
                    .fill(Color.green)
                    .frame(width: 100, height: 30 )
                Rectangle()
                    .fill(Color.orange)
                    .frame(width: 50, height: 30 )
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 30, height: 30 )
            }

 

---

 

이렇게 alignment를 .trailing, spacing을 20으로 변경하면

다른 정렬과 spacing을 가진 결과가 View에 그려진다.

            VStack(alignment: .trailing, spacing: 20)

 

---

 

만약에 따로 aligment, spacing을 정의하지 않으면,

기본값인 aligment: .center, spacing : nil 이 적용된다.

(spacing : nil != spacing : 0 -> spacing 값이 0이 아니고 spacing : 8과 같음 ! 8만큼 띄어져서 나옴 !)

            VStack{
                Rectangle()
                    .fill(Color.green)
                    .frame(width: 100, height: 30 )
                Rectangle()
                    .fill(Color.orange)
                    .frame(width: 50, height: 30 )
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 30, height: 30 )
            }
            .padding()

---

 

이렇게 VStack에서는 alignment로 trailing, leading, center를 적용할 수 있다.

 

---

 HStack 

: A view that arranges its children in a horizontal line.

: x축을 기준으로 leading to Trailing으로 정렬하는 View

---

HStack은 앞서 알아본 VStack과 큰 차이가 없다 !

이거는 x축 기준 정렬이라서 alignment 기준이 다른 정도?

            HStack(alignment: .bottom, spacing: 20){
                Rectangle()
                    .fill(Color.green)
                    .frame(width: 30, height: 100 )
                Rectangle()
                    .fill(Color.orange)
                    .frame(width: 30, height: 50 )
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 30, height: 30 )
            }

---

근데 이 위에 있는 이 두녀석이 뭔지 궁금했다 !

 

 

기본 코드는 위와 같고 HStack의 alignment : ######## 부분을 변경했다.

            HStack(alignment: #######){
                Color.red
                    .frame(width: 50, height: 10)
                Text("안녕하세요 ")
                    .font(.headline)
                    .foregroundColor(Color.white)
                    .background(Color.orange)
                Color.yellow
                    .frame(width: 50, height: 50)
                Text("꿈꾸는 리버리입니다")
                    .font(.footnote)
                    .foregroundColor(Color.white)
                    .background(Color.green)
                Color.blue
                    .frame(width: 50, height: 100)
                Text("오늘도 화이팅구리 ~").font(.caption)
                    .foregroundColor(Color.white)
                    .background(Color.pink)
                Color.purple
                    .frame(width: 50, height: 200)
            }
            .padding()

 

.bottom

모든 사각형들이 아래에 똭 붙어 있다.

 

 .lastTextBaseline 

젤 아래 텍스트("요", "니다", "구리~")의 끝 부분에 맞춰서 정렬됨 ! -> bottom과 다른 것을 확인할 수 있음

 

Bottom과 lastTextBaseline 둘의 차이는 요 예시에서 더 잘 확인할 수 있다.

 

위가 .bottom, 아래가 .lastTextBaseline

            HStack(alignment: .bottom){
                Text("hi, ")
                Text("I ")
                    .font(.caption)
                Text("am ")
                    .font(.title2)
                Text("River")
                    .font(.largeTitle)
            }
            .padding()
            
            HStack(alignment: .lastTextBaseline){
                Text("hi, ")
                Text("I ")
                    .font(.caption)
                Text("am ")
                    .font(.title2)
                Text("River")
                    .font(.largeTitle)
            }
            .padding()

 

 .firstTextBaseline 

첫 줄 텍스트의 하단에 정렬을 맞춰서 정렬된다.

 

---

 ZStack 

: A view that overlays its children, aligning them in both axes.

: z축을 기준으로 스크린 안에서 스크린 밖으로(?) 정렬하는 View

 

Hstack과 VStack과 비슷하게 쓰이며 정렬 기준은 다음으로 설정할 수 있다.

---

위 예시 그림의 코드인데,

처음의 초록 Rectangle위로

그 다음 orange Rectangle이,

그리고 그 다음에 red Rectangle이 위로 쌓인다.

            ZStack(alignment: .topLeading){
                Rectangle()
                    .fill(Color.green)
                    .frame(width: 100, height: 30 )
                Rectangle()
                    .fill(Color.orange)
                    .frame(width: 80, height: 20 )
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 60, height: 10 )
            }

 

---

VStack 대신에 background와 overlay를 사용하기도 한다.

간단한 VStack의 경우에는 background나 overlay를 쓰는 것이 일반적이기는 하지만 개인의 입맛에 따라 적용하면 된다고 한다.

 background 

해당 내용을 보면 VStack과 비슷하면서도 다른 background의 특징을 알 수 있다.

              Rectangle()
                .fill(Color.red)
                .frame(width: 60, height: 10 )
                .background(alignment: .topLeading){
                    Rectangle()
                        .fill(Color.orange)
                        .frame(width: 80, height: 20 )
                        .background(alignment: .topLeading){
                            Rectangle()
                                .fill(Color.green)
                                .frame(width: 100, height: 30 )
                        }
                }

 

 overlay 

해당 내용을 보면 VStack과 비슷하면서도 다른 overlay의 특징을 알 수 있다.

background와 parameter에 들어가는 내용이 같은 것을 확인할 수 있다.

                  Rectangle()
                    .fill(Color.green)
                    .frame(width: 100, height: 30 )
                    .overlay(alignment: .topLeading){
                        Rectangle()
                            .fill(Color.orange)
                            .frame(width: 80, height: 20 )
                            .overlay(alignment: .topLeading){
                                Rectangle()
                                    .fill(Color.red)
                                    .frame(width: 60, height: 10 )
                            }
                    }

 

---

우왕 ~ 같구나 ~ 하면서 끝낼려고 했는데,,

 뚜뚱... 

? 왜지 ? 한참을 고민했는데 

나는 background의 문제로 결론을 내렸다.

 

코드를 다시 살펴보면

red Rectangle 뒷 배경에

orange Rectangle을 넣고

그 뒷 배경에 green Rectangle을 넣었다.

                 Rectangle()
                    .fill(Color.red)
                    .frame(width: 60, height: 10 )
                    .background(alignment: .topLeading){
                        Rectangle()
                            .fill(Color.orange)
                            .frame(width: 80, height: 20 )
                            .background(alignment: .topLeading){
                                Rectangle()
                                    .fill(Color.green)
                                    .frame(width: 100, height: 30 )
                            }
                    }

 

 

나는 이것을 하나의 요소에 덧붙여서 요소를 만들어가는 게 아니라 첫 요소에 뒷 그림을 그려나가는 느낌..?으로 이해를 했다.

 

아래 그림으로 실험을 해봤더니, 예상했던 대로

background에서의 첫번째 요소(Rectangle)은 해당 요소(red Rectangle) 영역만을 의미했고,

overlay는 첫번째 요소(Rectangle)가 전체 요소 (red, orange, green Rectangle)영역을 의미했다.