Sviluppare l'interfaccia utente per le app basate su View per Android

Prova il modo di comporre

Jetpack Compose con l'SDK Jetpack XR è il toolkit UI consigliato per Android XR.

Sviluppa con l'SDK Jetpack XR →

L'utilizzo del framework Android Jetpack Compose è il modo migliore per sfruttare i più recenti progressi nello sviluppo dell'interfaccia utente di Android e per verificare che la tua applicazione rimanga aggiornata con le best practice del settore.

Tuttavia, se non hai eseguito la migrazione e stai lavorando per spazializzare un'app basata su Android Views, puoi adottare diversi approcci.

Riutilizzare le visualizzazioni esistenti in SpatialPanels

Sebbene i SpatialPanel facciano parte della libreria Jetpack Compose for XR, accettano anche le View. Quando utilizzi Subspace in MainActivity, inserisci una visualizzazione esistente in un SpatialPanel come mostrato nell'esempio seguente.

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

Utilizzare le API di interoperabilità di Android Views e Compose

Consulta le indicazioni sull'interoperabilità tra Visualizzazioni e Crea. Questa documentazione illustra l'utilizzo congiunto di questi framework e contiene link a esempi di codice che puoi utilizzare.

Utilizzare un ComposeView per aggiungere pannelli spaziali e orbiter a un fragment esistente

Utilizza un ComposeView nel layout XML per aggiungere i composable e creare nuovi contenuti XR. Utilizza View binding o findViewById per trovare ComposeView nella funzione onCreateView().

Scopri di più sulle linee guida per 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

Lavorare direttamente con la libreria Jetpack SceneCore

Compose for XR si basa su Jetpack SceneCore. Se stai spazializzando un'app basata su Views, puoi continuare a utilizzare il codice UI esistente all'interno di Compose for XR o scegliere di lavorare direttamente con Session di Jetpack SceneCore.

Puoi creare i pannelli direttamente da SceneCore utilizzando PanelEntity. Imposta le dimensioni del pannello in metri utilizzando dimensions o in pixel utilizzando pixelDimensions. Puoi scegliere di rendere i pannelli mobili o ridimensionabili utilizzando i componenti corrispondenti. Per saperne di più, consulta Aggiungere un comportamento comune alle entità.

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