Membangun UI spasial untuk aplikasi berbasis View Android yang sudah ada

Perangkat XR yang kompatibel

Panduan ini membantu Anda membangun pengalaman untuk jenis perangkat XR ini.

Mempelajari jenis perangkat XR →

Mempelajari jenis perangkat XR →

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

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

Mencoba cara Compose

Jetpack Compose yang menggunakan Jetpack XR SDK adalah toolkit UI yang direkomendasikan untuk membangun UI spasial di Android XR.

arrow_forward

Menggunakan kembali View yang ada dalam SpatialPanel

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

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

Menggunakan API interoperabilitas View Android dan Compose

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 ComposeView di tata letak XML Anda untuk menambahkan Composable dan membuat konten XR baru. Gunakan View binding atau findViewById untuk menemukan ComposeView dalam fungsi onCreateView().

Baca selengkapnya tentang panduan 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

Bekerja langsung dengan library Jetpack SceneCore

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

Anda dapat membuat panel langsung dari SceneCore menggunakan PanelEntity. Tetapkan ukuran panel dalam meter menggunakan dimensions, atau dalam piksel menggunakan pixelDimensions. Anda dapat memilih untuk membuat panel dapat dipindahkan atau diubah ukurannya dengan menggunakan komponen yang sesuai. Untuk mengetahui informasi selengkapnya, lihat Menambahkan perilaku umum ke entity.

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