Mengembangkan UI untuk Aplikasi Berbasis View Android

Mencoba cara Compose
Jetpack Compose yang menggunakan Jetpack XR SDK adalah toolkit UI yang direkomendasikan untuk Android XR.

Menggunakan framework Android Jetpack Compose adalah cara terbaik untuk memanfaatkan kemajuan terbaru dalam pengembangan UI Android dan memastikan aplikasi Anda tetap mengikuti praktik terbaik industri.

Namun, jika Anda belum bermigrasi, dan sedang berupaya melakukan spasialisasi aplikasi berbasis Tampilan Android, ada beberapa pendekatan yang dapat Anda lakukan.

Menggunakan kembali View yang ada dalam SpatialPanels

Meskipun SpatialPanel adalah bagian dari library Jetpack Compose untuk XR, SpatialPanel juga menerima View. Saat menggunakan setSubspaceContent di MainActivity, tempatkan tampilan yang ada ke dalam SpatialPanel seperti yang ditunjukkan dalam contoh berikut.

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

Menggunakan API interoperabilitas View dan Compose Android

Lihat panduan tentang interoperabilitas antara View dan Compose. Dokumentasi ini membahas penggunaan framework ini secara bersamaan dan berisi link ke contoh kode yang dapat Anda gunakan.

Menggunakan ComposeView untuk menambahkan panel spasial dan orbiter ke fragmen yang ada

Gunakan ComposeViewdi tata letak XML untuk menambahkan Composable dan membuat konten XR baru. Gunakan [ViewBinding][ViewBinding] untuk memanggil ComposeView dalam fungsi onCreateView.

Baca panduan ComposeView lebih lanjut.

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
   }
}

Bekerja langsung dengan library Jetpack SceneCore

Compose untuk XR dibuat berdasarkan Jetpack SceneCore. Jika Anda melakukan spatialisasi aplikasi berbasis View, Anda dapat terus menggunakan kode UI yang ada dalam Compose untuk XR atau memilih untuk bekerja secara langsung dengan Session Jetpack SceneCore.

Anda dapat mem-build panel langsung dari SceneCore menggunakan PanelEntity. Buat panel dapat dipindahkan atau diubah ukurannya dengan menggunakan komponen. Untuk mengetahui informasi selengkapnya, lihat Menambahkan perilaku umum ke entitas.

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