SwiftUI) Grid, GridRow 알아보기

SwiftUI에서 레이아웃을 구성할 때 주로 HStack, VStack을 많이 사용해왔다

사실 Grid라는 개념을 최근에 알게 되어서 공부해봤는데 쉽지 않았다..! 

그래도 공식문서를 보면서 공부하니 많은 도움이 되었고 어떤 기능들이 있는지 좀 더 확실하게 알게 되었다!

 

우선 Grid

Grid란 쉽게 말해 다른 뷰들을 2차원 배치로 정렬하는 컨테이너 뷰이다. 

우선 간단한 Grid 예제를 보자

이것만 봤을 때는 HStack, VStack으로 구현하는 느낌이 들었다. 

Grid는 VStack?, GridRow는 HStack?

 

여기까지는 공식문서에서도 비슷하게 소개한다. 

A grid and its rows behave something like a collection of HStack instances wrapped in a VStack. 

(VStack으로 둘러싸인 HStack의 모음과 비슷한 동작)

the grid handles row and column creation as a single operation, which applies alignment and spacing to cells, rather than first to rows and then to a column of unrelated rows

여기서 다른 점은 행과 열 작성을 생성을 단일 작업으로 처리해, 셀에 정렬 및 간격을 적용한 다음 관련이 없는 행의 열에 적용한다..?

 

우선 공식문서에서 알려주는 코드를 약간 바꿔 Grid의 특징을 좀 더 알아보자

 

        Grid(alignment: .center) {
            GridRow {
                Text("Rowwwwwwwwwwwwww")
                ForEach(0..<2) { _ in Color.red }

                Text("HELLOOOOOOOOOOOOOOO")
            }
            GridRow {
                ForEach(0..<4) { _ in Color.green }
            }
            GridRow {
                Text("Row 3")
                ForEach(0..<4) { _ in Color.blue }
            }
        }
        .frame(height: 500)
        .background(Color.purple)
    }

만들어진 Grid를 보면 한 열에 있는 셀의 너비를 열의 가장 넓의 셀과 일치하도록 만든다.

또한 나머지 열은 그 수평 공간을 동일하게 공유한다. 

마찬가지로 높이는 한 행에서 가장 높은 셀은 전체 행의 높이를 정한다. 그리고 그 높이를 공유한다. 

여기서 Text값은 원래 Text자체의 높이만 가지지만 옆에 컬러셀들이 높이를 결정해 사용할 수 있는 전체 높이를 가지게 된다. 

(그림은 별로지만) 너비와 높이의 기준을 표시해봤다.

 

Grid의 선언부는 다음과 같다.

alignment는 셀에 할당된 공간 내에서 child view를 정렬하기 위한 파라미터이다. 

horizontalSpacing은 셀 사이의 수평거리를 결정하는 파라미터이다. (기본적으로는 nil이기 때문에 적합한 기본 거리를 만들어준다.)

verticalSpacing은 셀 사이의 수직거리를 결정하는 파라미터이다. (기본적으로는 nil이기 때문에 적합한 기본 거리를 만들어준다.)

활용해보면 이렇다.

 

여러 파라미터가 더 많지만 공부하면서 배워보도록 하고 이제 GridRow로 넘어가보겠다.

반응형

GridRow란 2차원 그리드 컨테이너의 수평 행이다. 

선언을 보면 간단해보인다. 

alignment는 행에 대한 수직 정렬 방법이고 default는 .center이다. 

 

이제 마지막으로 실습 코드이다. 

        Grid(alignment: .trailing) {
            GridRow(alignment: .top) { // Use top vertical alignment.
                Text("Top")
                Color.red.frame(width: 1, height: 50)
                Color.blue.frame(width: 50, height: 1)
            }
            GridRow { // Use the default (center) alignment.
                Text("Center")
                Color.red.frame(width: 1, height: 50)
                Color.blue.frame(width: 50, height: 1)
            }
            GridRow(alignment: .bottom) { // Use bottom vertical alignment.
                Text("Bottom")
                Color.red.frame(width: 1, height: 50)
                Color.blue.frame(width: 50, height: 1)
            }
        }

 

이렇게 Grid와 GridRow에 대해서 공식문서를 통해 공부를 해봤다. 

사실 처음에 봤을 떄는 정말 이해가 안되고 어려웠지만 

Grid는 VStack, GridRow는 HStack과 어느정도 비슷한 점을 공유한다고 생각하니 이해가 쉬웠다. 

 

처음 Grid와 GridRow에 대해 공부하고자 한다면 Stack과 비슷한 특징을 가지고 있다는 점과

높이와 너비가 어떻게 정해지는지를 우선 공부해보면 더 이해가 쉽고 빠를 것 같다.