그리드가 있는 UI 요소 오버레이

Jetpack Compose Grid API는 구조적인 2차원 화면 레이아웃을 위해 설계되었습니다. 대규모 데이터 세트에 최적화된 지연 그리드와 달리 Grid를 사용하면 트랙 (행 및 열), 간격, 그리드 영역을 사용하여 고정 또는 반응형 레이아웃 구조를 정의할 수 있습니다. 그리드 컨테이너 내에서 위치 지정 및 확장을 명시적으로 제어할 수 있는 Modifier.gridItem을 사용하여 이 구조에 항목을 배치합니다.

UI에 동일한 그리드 영역 또는 중첩 영역(예: 배지 오버레이, 상태 표시기, 계층화된 카드)에 여러 항목이 필요한 경우 좌표 모호성으로 인해 레이아웃 동작을 예측할 수 없게 될 수 있습니다. 복잡한 Box 중첩 또는 수동 좌표 오프셋에 의존하지 않고 중첩된 구성요소의 깊이를 관리하는 것은 읽기 쉬운 깔끔한 레이아웃 코드를 유지하는 데 필수적입니다.

권장사항

• 선언 순서: Grid는 Grid 블록 내 선언 순서에 따라 표준 zIndex 순서를 따릅니다. Grid 콘텐츠 블록에서 나중에 선언된 항목은 먼저 선언된 항목 위에 렌더링됩니다.
• 명시적 z-index 제어: 중첩된 요소의 기본 그리기 순서를 명시적으로 제어하거나 재정의해야 하는 경우 Modifier.zIndex를 사용합니다.
• 명명된 영역과 항목 오버레이: Grid 및 명명된 영역을 사용하여 레이아웃 구조를 정의하되, 이러한 오버레이가 그리드 셀에 논리적으로 연결되어 있는 경우 복잡한 오버레이 로직을 특정 gridItem 내에 유지합니다.
• 오버레이를 위한 의도적인 범위: 오버레이할 때 rowSpan 및 columnSpan 매개변수가 중첩된 요소에 대해 의도적인지 확인하여 기본 콘텐츠가 얼마나 가려지는지 제어합니다.

재료

• Grid: 구조적인 2차원 레이아웃 컨테이너
• GridConfigurationScope.area: 그리드 트랙에서 명명된 영역과 오버레이 영역을 정의하는 데 사용되는 범위 함수
• Modifier.gridItem: 그리드 트랙에서 또는 명명된 그리드 영역으로 컴포저블을 배치하고 확장하는 데 사용되는 수정자
• Modifier.zIndex: 그리기 및 레이어 고도 순서를 명시적으로 제어하는 데 사용되는 수정자

단계

그리드 레이아웃과 명명된 영역을 구성하고, 대상 그리드 좌표 내에 기본 레이어 콘텐츠를 배치하고, 공유 그리드 셀 또는 중첩 영역에 오버레이 요소를 배치합니다.

1. 그리드 구성 정의

행 및 열 트랙과 셀에 걸쳐 오버레이 영역을 정의하는 명명된 영역을 지정하는 Grid 컴포저블 구성을 만듭니다.

enum class Areas { BASE, OVERLAY }

val gridConfig: GridConfigurationScope.() -> Unit = {
    repeat(3) {
        column(GridTrackSize.Fixed(100.dp))
    }
    row(GridTrackSize.Fixed(100.dp))

    area(areaId = Areas.BASE, row = 1, column = 1, columnSpan = 2)
    // Define a named area spanning multiple columns that overlaps other cells
    area(areaId = Areas.OVERLAY, row = 1, column = 2, columnSpan = 2)
}
GridByExamples.kt

2. 기본 콘텐츠 배치 및 오버레이 선언

Modifier.gridItem을 사용하여 그리드 셀에 기본 컴포저블을 배치합니다. Grid 는 구성 순서에 따라 표준 zIndex 순서를 따르므로 Grid 블록 내에서 나중에 선언된 항목이 이전 항목 위에 그려집니다. 동일한 셀 또는 중첩 영역에 오버레이를 배치할 때는 기본 요소 뒤에 오버레이 컴포저블을 선언하거나 명명된 영역을 참조합니다. 이 기본 그리기 순서를 명시적으로 제어하거나 재정의해야 하는 경우 Modifier.zIndex 를 사용할 수 있습니다.

Grid(
    config = gridConfig,
) {
    // Base Layer
    TextCard("BASE", Modifier.gridItem(areaId = Areas.BASE))
    // Overlay Layer
    TextCard(
        "OVERLAY",
        Modifier.gridItem(areaId = Areas.OVERLAY),
        color = Color(0xDD4B608D)
    )
}
GridByExamples.kt

결과

UI 요소가 2D 그리드 구조 내에서 예측 가능하게 오버레이됩니다. 표준 선언 순서를 사용하면 복잡한 중첩 컨테이너를 피하면서 깔끔하고 반응형 레이아웃 코드를 유지할 수 있습니다.