궤도

적용 가능한 XR 기기
이 가이드는 이러한 유형의 XR 기기를 위한 환경을 빌드하는 데 도움이 됩니다.
XR 기기 유형 알아보기 →
XR 헤드셋
유선 XR 글라스
XR 기기 유형 알아보기 →

Orbiter는 공간화된 구성요소로, SpatialColumn, SpatialRow, SpatialBox와 같은 해당 공간 패널 또는 공간 레이아웃 구성요소에 연결할 수 있습니다. 오비터에는 일반적으로 고정된 항목과 관련된 탐색 및 상황별 작업 항목이 포함됩니다. 예를 들어 동영상 콘텐츠를 표시하는 공간 패널을 만든 경우 오비터 내에 동영상 재생 컨트롤을 추가할 수 있습니다.

그림 1.: 궤도선 예시

궤도선 만들기

다음 예와 같이 SpatialPanel의 2D 레이아웃 내에서 오비터를 호출하여 탐색과 같은 사용자 컨트롤을 래핑합니다. 이렇게 하면 2D 레이아웃에서 추출되어 구성에 따라 공간 패널에 연결됩니다. 

Subspace {
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
            .resizable()
            .movable(),
    ) {
        SpatialPanelContent()
        OrbiterExample()
    }
}

@Composable
fun OrbiterExample() {
    Orbiter(
        position = OrbiterPosition.BottomCenter(
            verticalEdgeAlignment = OrbiterPosition.EdgeAlignment.Outside,
            offset = DpVolumeOffset(y = 96.dp)
        ),
    ) {
        Surface(Modifier.clip(CircleShape)) {
            Row(
                Modifier
                    .background(color = Color.Black)
                    .height(100.dp)
                    .width(600.dp),
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    text = "Orbiter",
                    color = Color.White,
                    fontSize = 50.sp
                )
            }
        }
    }
}

코드에 관한 핵심 사항

  • 오비터는 공간 UI 구성요소이므로 코드를 2D 또는 3D 레이아웃에서 재사용할 수 있습니다. 2D 레이아웃에서 앱은 오비터 내부의 콘텐츠만 렌더링하고 오비터 자체는 무시합니다.
  • 오비터를 사용하고 디자인하는 방법에 관한 자세한 내용은 디자인 안내를 참고하세요.

공간 패널 및 레이아웃에 오비터 고정

Compose에 선언된 SpatialPanel 및 공간 레이아웃 구성요소에 오비터를 고정할 수 있습니다. 여기에는 SpatialRow, SpatialColumn, SpatialBox와 같은 UI 요소의 공간 레이아웃에서 오비터를 선언하는 작업이 포함됩니다. 궤도 요소는 선언된 위치에서 가장 가까운 상위 요소에 고정됩니다.

궤도선의 동작은 선언 위치에 따라 결정됩니다.

  • SpatialPanel로 래핑된 2D 레이아웃(이전 코드 스니펫에 표시됨)에서 오비터는 해당 SpatialPanel에 고정됩니다.
  • Subspace에서 Orbiter는 가장 가까운 상위 항목에 고정됩니다. 이 항목은 Orbiter가 선언된 공간 레이아웃입니다.

다음 예는 오비터를 공간 행에 고정하는 방법을 보여줍니다.

Subspace {
    SpatialRow {
        Orbiter(
            position = OrbiterPosition.TopCenter(
                verticalEdgeAlignment = OrbiterPosition.EdgeAlignment.Outside,
                offset = DpVolumeOffset(y = 8.dp)
            ),
            shape = SpatialRoundedCornerShape(size = CornerSize(50))
        ) {
            Text(
                "Hello World!",
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier
                    .background(Color.White)
                    .padding(16.dp)
            )
        }
        SpatialPanel(
            SubspaceModifier
                .height(824.dp)
                .width(1400.dp)
        ) {
            Box(
                modifier = Modifier
                    .background(Color.Red)
            )
        }
        SpatialPanel(
            SubspaceModifier
                .height(824.dp)
                .width(1400.dp)
        ) {
            Box(
                modifier = Modifier
                    .background(Color.Blue)
            )
        }
    }
}

코드에 관한 핵심 사항

  • 2D 레이아웃 외부에서 Orbiter를 선언하면 Orbiter는 가장 가까운 상위 항목에 고정됩니다. 이 경우 orbiter는 선언된 SpatialRow의 상단에 고정됩니다.
  • SpatialRow, SpatialColumn, SpatialBox와 같은 공간 레이아웃에는 모두 콘텐츠가 없는 항목이 연결되어 있습니다. 따라서 공간 레이아웃에 선언된 오비터는 해당 레이아웃에 고정됩니다.