컨테이너 속성 설정

그리드 컨테이너 구성을 정의하여 다양한 화면 크기와 콘텐츠 유형에 반응하는 유연한 레이아웃을 만들 수 있습니다. 이 페이지에서는 다음 작업을 실행하는 방법을 설명합니다.

그리드 정의: 행과 열의 기본 구조를 설정합니다.
그리드에 항목 배치: 항목이 그리드 셀에 배치되는 방식과 흐름 방향을 변경하는 방법을 이해합니다.
트랙 크기 관리: 고정, 분수, 유연한 크기 조정, 내장 크기 조정을 사용하여 트랙 크기를 설정합니다.
간격 설정: 행과 열 사이의 "거터"를 관리합니다.

그리드 정의

그리드는 열과 행으로 구성됩니다. Grid 컴포저블에는 GridConfigurationScope 내에서 열과 행을 정의하는 람다를 허용하는 config 매개변수 가 있습니다. 다음 예에서는 각각 Dp에 지정된 고정 크기가 있는 3개의 행과 2개의 열이 있는 그리드를 정의합니다.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}DefineGrid.kt

그리드에 항목 배치

Grid 는 content 람다의 UI 요소를 가져와 그리드 셀에 배치합니다. 그리드는 행과 열을 명시적으로 정의했는지 여부와 관계없이 항목을 배치합니다. 기본적으로 Grid는 행의 사용 가능한 그리드 셀에 UI 요소를 배치하려고 시도합니다. 이렇게 할 수 없는 경우 다음 행의 사용 가능한 그리드 셀에 배치합니다. 빈 셀이 없으면 Grid는 새 행을 만듭니다.

다음 예에서 그리드에는 6개의 그리드 셀이 있으며 각 셀에 카드를 배치합니다 (그림 1). 각 그리드 셀은 160dp x 90dp이므로 총 그리드 크기는 320dp x 270dp입니다.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}DefineGrid.kt

3개의 행과 2개의 열이 있는 그리드에 6개의 카드가 배치되어 있습니다. — **그림 1**. 3개의 행과 2개의 열이 있는 그리드에 6개의 카드가 배치됩니다.

이 기본 동작을 열별로 채우기로 변경하려면 flow 속성을 GridFlow.Column으로 설정합니다.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}GridItem.kt

흐름 함수는 항목을 배치하는 방향을 변경합니다. — **그림 2**. `GridFlow.Row` (왼쪽) 및 `GridFlow.Column` (오른쪽)

트랙 크기 관리

행과 열을 통칭하여 그리드 트랙이라고 합니다. 다음 방법 중 하나를 사용하여 그리드 트랙의 크기를 지정할 수 있습니다.

고정 (Dp): 특정 크기를 할당합니다 (예: column(180.dp)).
분수 (Float): 0.0f에서 1.0f까지 사용 가능한 총 공간의 비율을 할당합니다 (예: 50%의 경우 row(0.5f)).
유연한 크기 조정 (Fr): 고정 및 분수 트랙이 계산된 후 나머지 공간을 비례적으로 분배합니다. 예를 들어 두 행이 1.fr 및 3.fr로 설정된 경우 후자는 나머지 높이의 75% 를 받습니다.
내장: 트랙 내부의 콘텐츠를 기반으로 트랙 크기를 조정합니다. 자세한 내용은 그리드 트랙 크기 내장 확인을 참고하세요.

다음 예에서는 다양한 트랙 크기 조정 옵션을 사용하여 행 높이를 정의합니다.

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")GridTrackSize.kt

**그림 3**. `Grid`의 4가지 기본 트랙 크기 조정 옵션을 사용하여 정의된 행 높이

그리드 트랙 크기 내장 확인

레이아웃이 콘텐츠에 맞게 조정되도록 하려면 고정 컨테이너에 강제로 넣는 대신 내장 크기 조정을 Grid 사용할 수 있습니다. 그리드 트랙 크기는 다음 값으로 결정됩니다.

GridTrackSize.MaxContent: 콘텐츠의 최대 내장 크기를 사용합니다(예: 너비는 줄바꿈이 없는 텍스트 블록의 텍스트 전체 길이에 따라 결정됨).
GridTrackSize.MinContent: 콘텐츠의 최소 내장 크기를 사용합니다(예: 너비는 텍스트 블록에서 가장 긴 단일 단어로 결정됨).
GridTrackSize.Auto: 사용 가능한 공간에 따라 조정되는 트랙에 유연한 크기를 사용합니다. 기본적으로 MaxContent와 같이 동작하지만 상위 컨테이너에 맞게 콘텐츠를 축소하고 줄바꿈합니다.

다음 예에서는 두 텍스트를 나란히 배치합니다. 첫 번째 텍스트의 열 크기는 텍스트를 표시하는 데 필요한 최소 너비에 따라 결정되고 두 번째 열 너비는 텍스트의 필요한 최대 너비에 따라 달라집니다.

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
}GridTrackSize.kt

열에 지정된 내장 크기입니다. — **그림 4**. 열에 지정된 내장 크기

행과 열 사이의 간격 설정

그리드 트랙의 크기가 조정되면, 그리드 간격을 수정하여 트랙 간의 간격을 세부 조정할 수 있습니다. columnGap 함수로 열 간격을 지정하고 rowGap으로 행 간격을 지정할 수 있습니다. 다음 예에서는 각 행 사이에 16dp 간격이 있고 각 열 사이에 8dp 간격이 있습니다 (그림 5).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}GridGap.kt

편의 함수 gap `gap`을 사용하여 동일한 열 및 행 크기의 간격을 정의하고 단일 함수를 사용하여 열 및 간격 크기를 별도로 정의할 수도 있습니다. 다음 코드는 그리드에 8dp 간격을 추가합니다.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}GridGap.kt

시작하기

상품 속성 설정

컨테이너 속성 설정 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.