그리드 표 레이아웃

별표 평점 4 아이콘

이 레시피에서는 Grid API가 기존의 중첩 구조에 비해 코드 가독성을 어떻게 개선하는지 보여줍니다. 자동 크기 트랙을 구성하면 텍스트 컴포저블의 고유 크기에 따라 셀 너비와 높이에 동적으로 적응하는 그리드를 만들 수 있습니다.

이 레시피에서는 Grid API를 사용하여 테이블을 빌드합니다.

표 1. FlexBox 및 Grid API의 기능 비교
레이아웃 지연 로드 소프트 래핑 동적 레이아웃 업데이트
FlexBox 1일 아니요 예 예
Grid 2D 아니요 아니요 예

권장사항

Grid 컴포저블을 사용하여 표의 가독성과 유지보수성을 개선합니다. Grid를 사용하면 너비를 수동으로 동기화하지 않고도 모든 행에서 열 크기와 정렬을 정밀하게 제어할 수 있습니다.

재료

  • Grid: 항목을 2차원 그리드에 배치하는 컴포저블 레이아웃입니다. 레이아웃 구성은 config 람다 매개변수 내에 지정되고 UI 콘텐츠 항목은 content 람다 매개변수 내에 선언됩니다.
  • GridTrackSize.Auto: 콘텐츠 고유 크기(예: column(GridTrackSize.Auto) 및 row(GridTrackSize.Auto))를 기반으로 그리드 구성 내에서 자동 트랙 크기 조정을 지정합니다.
  • gap(): GridConfigurationScope 내에서 행 및 열 간격을 구성합니다(예: gap(row = 8.dp, column = 16.dp)).

단계

모든 항목에 대해 자동 열 정렬 및 트랙 크기 조정을 사용하는 단일 Grid 레이아웃을 사용하여 다중 열 비교 표를 빌드합니다.

1. 그리드 행 및 열을 세어 트랙 크기 결정

먼저 열과 행을 세어 트랙의 크기를 결정합니다.

  • 열: 비교하는 속성 수에 항목 이름 열을 더한 값입니다.
  • 행: 비교할 항목 수에 헤더 행 하나를 더한 값입니다.

4가지 속성에 걸쳐 두 구성요소 (FlexBox 및 Grid)를 비교하는 이 레시피에는 5개의 열과 3개의 행이 필요합니다.

2. 그리드를 사용하여 비교 표 구현

Grid를 사용하여 테이블 항목을 배치하는 TableInGrid 컴포저블을 만듭니다. config 람다 내에서 column 및 row 함수를 호출하여 트랙 크기를 정의하고 gap()를 사용하여 셀 간격을 설정합니다. 텍스트에는 고유 크기가 있으므로 GridTrackSize.Auto는 콘텐츠에 맞게 열과 행의 크기를 자동으로 조정합니다.

content 람다 내에 테이블 헤더와 데이터를 배치합니다. Grid는 모든 셀의 배치와 정렬을 자동으로 처리합니다.

@Composable
fun TableInGrid(
    modifier: Modifier = Modifier,
) {
    Grid(
        config = {
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            gap(row = 8.dp, column = 16.dp)
        },
        modifier = modifier,
    ) {
        // Table Header
        Text(text = "", fontWeight = FontWeight.Bold)
        Text(text = "Layout", fontWeight = FontWeight.Bold)
        Text(text = "Lazy loading", fontWeight = FontWeight.Bold)
        Text(text = "Soft wrap", fontWeight = FontWeight.Bold)
        Text(text = "Dynamic layout update", fontWeight = FontWeight.Bold)

        // FlexBox Row
        Text(text = "FlexBox", fontWeight = FontWeight.Bold)
        Text(text = "1D")
        Text(text = "No")
        Text(text = "Yes")
        Text(text = "Yes")

        // Grid Row
        Text(text = "Grid", fontWeight = FontWeight.Bold)
        Text(text = "2D")
        Text(text = "No")
        Text(text = "No")
        Text(text = "Yes")
    }
}

결과

이제 자동 열 정렬 및 셀 간격을 사용하여 깔끔한 2차원 비교 표를 만들었습니다.

그림 1. Grid를 사용한 비교 표

추가 리소스