Android 뷰 기반 앱의 UI 개발

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

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

SpatialPanels 내에서 기존 뷰 재사용

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

setSubspaceContent {
   SpatialPanel(
       view = MyCustomView(this),
       modifier = SubspaceModifier.height(500.dp).width(500.dp).depth(25.dp)
   )
}

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

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

ComposeView를 사용하여 기존 프래그먼트에 공간 패널 및 궤도 도구 추가

XML 레이아웃에서 ComposeView를 사용하여 컴포저블을 추가하고 새 XR 콘텐츠를 만듭니다. [ViewBinding][ViewBinding] 을 사용하여 onCreateView 함수에서 ComposeView를 호출합니다.

ComposeView 안내 자세히 알아보기

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

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

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

PanelEntity를 사용하여 SceneCore에서 직접 패널을 빌드할 수 있습니다. 구성요소를 사용하여 패널을 이동하거나 크기를 조절할 수 있도록 합니다. 자세한 내용은 항목에 일반적인 동작 추가를 참고하세요.

val panelContent = MyCustomView(this)
val panelEntity = xrSession.createPanelEntity(
   panelContent,
   surfaceDimensionsPx = Dimensions(500f,500f,500f),
   dimensions = Dimensions(1f,1f,1f),
   name = "panel entity"
)