Grid는 2차원 레이아웃을 유연하게 구현할 수 있는 Jetpack Compose API입니다.
이 API를 사용하면 사용 가능한 컨테이너 크기에 맞게 조정되는 다중 열 또는 다중 행 레이아웃으로 항목을 표시할 수 있습니다.
Grid를 사용하는 유연하고 적응형 2차원 레이아웃
그리드는 유사한 컴포저블과 어떻게 다른가요?
Compose는 이미 LazyVerticalGrid과 같은 유사한 구성요소를 제공합니다.
이러한 구성요소는 주로 크고 균일한 데이터 세트를 시각화하기 위한 것입니다(예: 동영상 스트리밍 앱에서 콘텐츠 카탈로그 표시). 이러한 구성요소는 화면이나 복잡한 구성요소의 구조적 레이아웃을 위해 설계되지 않았습니다.
여러 Row 및 Column 컴포저블을 결합하여 2차원 레이아웃을 구현할 수도 있습니다.
하지만 이 접근 방식에는 깊은 계층 구조, 적응성 어려움과 같은 몇 가지 단점이 있습니다.
다음 표에서는 각 API에 적합한 레이아웃을 간략하게 설명합니다.
| 구성요소 | 목적 |
|---|---|
LazyVerticalGrid, LazyStaggeredGrid, LazyHorizontalGrid |
지연 로드가 필요한 크고 균일한 데이터 세트의 시각화 |
Row, Column, FlexBox |
1차원 레이아웃 |
Grid |
2차원 레이아웃 |
용어
Grid의 작동 방식을 이해하려면 다음 용어를 숙지하세요.
그리드 선
그리드는 가로 및 세로로 이어지는 선으로 구성됩니다. 그리드에 행이 3개 있으면 마지막 행 뒤에 있는 행을 포함하여 가로선이 4개 있습니다. 다음 이미지에서 각 점선은 그리드 선을 나타냅니다.
그리드 트랙
그리드 트랙은 두 그리드 선 사이의 공간입니다. 행 트랙은 두 개의 가로선 사이에 있고 열 트랙은 두 개의 세로선 사이에 있습니다. 이러한 트랙의 크기를 정의하려면 그리드를 만들 때 크기를 할당하세요.
바둑판식 셀
그리드 셀은 행 트랙과 열 트랙의 교차점입니다.
그리드 영역
그리드 영역은 여러 그리드 셀로 구성됩니다. 항목이 여러 트랙에 걸치도록 하여 그리드 영역을 정의할 수 있습니다.
그리드 간격
그리드 간격은 그리드 트랙 사이의 거터입니다. UI 요소를 간격에 배치할 수는 없지만 간격에 걸쳐 UI 요소를 배치할 수는 있습니다.
