그리드 표 레이아웃

별 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를 사용하는 비교 테이블

추가 리소스