SwiftUI) GridItem 알아보기

SwftUI Grid에 대해서 공부하면서 제일 어려웠던 GridItem이다..

 

GridItem이란?

LazyGrid의 행과 열에 대한 설명이다..?

 

무슨 말이냐면 저번 글에서 LazyGrid에 대해서 공부할 때, 

LazyHGrid 선언부

LazyHGrid의 선언부를 보면 rows는 [GridItem]으로 타입이 나타나 있다. 

결과적으로 LazyGrid의 각 열 혹은 행의 크기를 정하고 배치하는 역할(레이아웃 속성을 지정)을 하는 애로 보면 될 것 같다. 

 

 

GridItem의 선언부를 보면 다음과 같다. 

• size: gridItem의 크기
• spacing: item 사이의 간격
• alignment: 그리드 항목에 사용할 정렬 방법

이렇게 보면 너무 간단하게 나와있어서 좀 더 들어가보겠다. 

 

GridItem.Size에 들어갈 수 있는 Cases는 이렇게 3가지로 나타나 있다. 

글로만 보면 이해가 쉽지 않기 떄문에 이따 밑에서 예시를 들어가며 설명을 이어가곘다. 

 

LazyVGrid와 LazyHGrid는 간단히 행과 열의 차이이기 때문에 LazyVGrid를 예시로 만들어보자

 

반응형

 

.fixed()

fixed()는 item의 사이즈를 고정시켜 나타낸다. 

이 예시 코드를 통해 알 수 있는 것들은 다음과 같다. 

LazyVGrid경우! (LazyHGrid일 경우는 반대로 생각하면 된다)

1. 열의 갯수를 지정해 줄 수 있다. 

2. 열마다 .fixed() 를 통해 너비를 고정시켜줄 수 있다. 

3. 사각형 안에 숫자로 그려지는 순서를 알 수 있다.(한 행을 다 채우고 다음 행을 그림)

4. 행의 높이는 행에서 가장 높은 item에 의해 결정된다.(frame으로 높이를 지정해 줄수도 있다.)

이 사각형들의 높이는 index * 10을 한 결과이다. 

이미지를 보면 행에서 가장 높이가 큰 것들은 맨 오른쪽(세번째 열)이다. 

제일 큰 height를 기준으로 높이가 설정되는 것을 알 수 있다.  

 

 

.flexible()

flexible은 단어의 의미를 먼저 생각해보면 쉽게 유추해볼 수 있다. 

유연하게 GridItem의 크기를 맞춰준다는 의미이다. (일단 minimum과 maximum은 생각해보지 말자)

 

오른쪽 이미지를 보면 파란색은 .flexible이고 빨간색은 .fixed로 지정했다. 

2번쨰 열의 너비는 50, 3번째 열의 너비는 100으로 고정을 시킨 후

나머지 크기가 .flexible을 선언한 첫번째 열의 너비가 되는 것이다. 

 

이제 이렇게 봐서 이해가 됐다면 minimum과 maximum의 의미가 유추될 수 있을 것이다.

(최솟값과 최댓값 사이로 맞춰 너비를 지정한다.)

.flexible은 아이패드, 아이폰 등 크기가 다른 디바이스에 레이아웃을 맞춰줄 떄, 매우 유용하게 사용할 수 있다. 

flexible의 최소 최대 초기값은 다음과 같으니 참고하자.

 

마지막으로 제일 이해가 쉽지 않았던 adaptive이다. 

.adaptive(minimum: maximum: ) 

단어 뜻으로 보면 적응하는..? 음 아직 잘 모르곘다. 

일단 만들어보겠다. 

여기서 우선 flexible과 다른 점을 발견할 수 있었다. 

flexible과 다르게 minimum 파라미터에 값을 반드시 넣어주어야 한다. 

(우선 코드와 실행화면을 보고 이해해보자)

결과를 보면 지금까지 .fixed와 .flexed랑은 결과가 많이 다르다

하나의 열을 만드는 것이 아닌 최소값을 토대로 최대한 많은 열을 만들어낸다. 

 

공식문서에도 제공된 범위와 간격을 사용하여 최대한 많은 항목이 들어가는 것이 적합한지 정한다고 한다. 

 

이렇게 오늘 GridItem에 대해서 공부해봤다. 

개인적으로 flexible이 가장 많이 쓰일 것 같고, .adaptive는 어떤 식으로 사용해볼 수 있을지 감이 잘 안잡힌다. 

Grid에 대해서 완벽하게 다 공부하지는 않았지만 최근에 궁금했던 점들을 계속해서 정리하고 공부해서 이제는 이해가 되는 것 같다 ㅎㅎ

 

이제 프로젝트에 적용해보면서 더욱 사용 빈도를 높여나가야겠다.

 

 

 

 

 

 

Apple Developer Documentation

https://developer.apple.com/documentation/swiftui/griditem

Apple Developer Documentation

유투브 설명 중 가장 도움이 많이 되었던 것 같다. 

https://www.youtube.com/watch?v=vHvb7LH8VuE