Créer une UI spatiale pour les applications Android existantes basées sur des vues

Appareils XR concernés

Ces conseils vous aideront à créer des expériences pour ces types d'appareils XR.

En savoir plus sur les types d'appareils XR →

Casques XR

Lunettes XR filaires

En savoir plus sur les types d'appareils XR →

L'utilisation du framework Android Jetpack Compose est le meilleur moyen de profiter des dernières avancées en matière de développement d'UI Android et de vérifier que votre application reste conforme aux bonnes pratiques du secteur.

Toutefois, si vous n'avez pas encore migré et que vous travaillez sur la spatialisation d'une application basée sur les vues Android, vous pouvez adopter plusieurs approches.

Essayer la méthode Compose

Jetpack Compose avec le SDK Jetpack XR est le kit d'outils d'interface utilisateur recommandé pour créer une interface utilisateur spatiale sur Android XR.

Réutiliser vos vues existantes dans SpatialPanels

Bien qu'un SpatialPanel fasse partie de la bibliothèque Jetpack Compose pour XR, il accepte également les vues. Lorsque vous utilisez Subspace dans votre MainActivity, placez une vue existante dans un SpatialPanel, comme illustré dans l'exemple suivant.

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

Utiliser les vues Android et les API d'interopérabilité Compose

Consultez les conseils sur l'interopérabilité entre les vues et Compose. Cette documentation explique comment utiliser ces frameworks ensemble et contient des liens vers des exemples de code que vous pouvez utiliser.

Utiliser une ComposeView pour ajouter des panneaux spatiaux et des orbiters à un fragment existant

Utilisez un ComposeView dans votre mise en page XML pour ajouter des composables et créer du contenu XR. Utilisez la liaison de vue ou findViewById pour trouver ComposeView dans la fonction onCreateView().

En savoir plus sur les conseils concernant 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

Utiliser directement la bibliothèque Jetpack SceneCore

Compose pour XR est basé sur Jetpack SceneCore. Si vous spatialisez une application basée sur des vues, vous pouvez continuer à utiliser votre code d'UI existant dans Compose pour XR ou choisir de travailler directement avec Session de Jetpack SceneCore.

Vous pouvez créer des panneaux directement à partir de SceneCore à l'aide de PanelEntity. Définissez la taille du panneau en mètres à l'aide de dimensions ou en pixels à l'aide de pixelDimensions. Vous pouvez choisir de rendre les panneaux déplaçables ou redimensionnables en utilisant les composants correspondants. Pour en savoir plus, consultez Ajouter un comportement commun aux entités.

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