기존 Android 뷰 기반 앱의 공간 UI 빌드

적용 가능한 XR 기기

이 가이드는 이러한 유형의 XR 기기를 위한 환경을 빌드하는 데 도움이 됩니다.

XR 기기 유형 알아보기 →

XR 헤드셋

유선 XR 글라스

XR 기기 유형 알아보기 →

Android Jetpack Compose 프레임워크를 사용하는 것은 Android UI 개발의 최신 기술을 활용하고 애플리케이션이 업계 권장사항을 준수하는지 확인하는 가장 좋은 방법입니다.

하지만 아직 이전하지 않았고 Android 뷰 기반 앱을 공간화하는 작업을 진행 중이라면 다음과 같은 몇 가지 접근 방식을 사용할 수 있습니다.

Compose 방식 사용해 보기

Jetpack XR SDK를 사용하는 Jetpack Compose는 Android XR에서 공간 UI를 빌드하는 데 권장되는 UI 툴킷입니다.

SpatialPanels 내에서 기존 뷰 재사용

SpatialPanel는 XR용 Jetpack Compose 라이브러리의 일부이지만 뷰도 허용합니다. MainActivity에서 Subspace를 사용하는 경우 다음 예와 같이 기존 뷰를 SpatialPanel에 배치합니다.

setContent {
    Subspace {
        SpatialPanel(
            modifier = SubspaceModifier.height(500.dp).width(500.dp).depth(25.dp)
        ) { MyCustomView(this@ActivityWithSubspaceContent) }
    }
}
Views.kt

Android 뷰 및 Compose 상호 운용성 API 사용

뷰와 Compose 간의 상호 운용성에 관한 가이드를 참고하세요. 이 문서에서는 이러한 프레임워크를 함께 사용하는 방법을 다루며 사용할 수 있는 코드 샘플 링크를 포함합니다.

ComposeView를 사용하여 기존 프래그먼트에 공간 패널과 오비터를 추가합니다.

XML 레이아웃에서 ComposeView를 사용하여 컴포저블을 추가하고 새 XR 콘텐츠를 만듭니다. 뷰 결합 또는 findViewById를 사용하여 onCreateView() 함수에서 ComposeView를 찾습니다.

ComposeView 가이드에 대해 자세히 알아보기

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View {
    val view = inflater.inflate(R.layout.example_fragment, container, false)
    view.findViewById<ComposeView>(R.id.compose_view).apply {
        // Dispose of the Composition when the view's LifecycleOwner
        // is destroyed
        setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
        setContent {
            // In Compose world
            SpatialPanel(SubspaceModifier.height(500.dp).width(500.dp)) {
                Text("Spatial Panel with Orbiter")
            }
        }
    }
    return view
}
Views.kt

Jetpack SceneCore 라이브러리로 직접 작업

XR용 Compose는 Jetpack SceneCore를 기반으로 빌드됩니다. 뷰 기반 앱을 공간화하는 경우 Compose for XR 내에서 기존 UI 코드를 계속 사용하거나 Jetpack SceneCore의 Session를 직접 사용할 수 있습니다.

PanelEntity를 사용하여 SceneCore에서 직접 패널을 빌드할 수 있습니다. dimensions를 사용하여 패널 크기를 미터 단위로 설정하거나 pixelDimensions를 사용하여 픽셀 단위로 설정합니다. 해당 구성요소를 사용하여 패널을 이동하거나 크기를 조절할 수 있습니다. 자세한 내용은 항목에 일반적인 동작 추가를 참조하세요.

val panelContent = MyCustomView(this)
val panelEntity = PanelEntity.create(
    session = xrSession,
    view = panelContent,
    pixelDimensions = IntSize2d(500, 500),
    name = "panel entity"
)
Views.kt