Android 뷰 기반 앱의 공간 UI 개발

해당 XR 기기
이 안내는 이러한 유형의 XR 기기용 환경을 구축하는 데 도움이 됩니다.
XR 기기 유형 알아보기 →
XR 헤드셋
유선 XR 안경
XR 기기 유형 알아보기 →

Android Jetpack Compose 프레임워크를 사용하면 Android UI 개발의 최신 발전을 활용하고 애플리케이션이 업계 권장사항을 준수하는지 확인할 수 있습니다.

하지만 아직 이전하지 않았고 Android 뷰 기반 앱을 공간화하려는 경우 몇 가지 접근 방식을 사용할 수 있습니다.

SpatialPanel 내에서 기존 뷰 재사용

SpatialPanels는 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