Cómo compilar una IU espacial para apps existentes basadas en Views de Android

Dispositivos de realidad extendida correspondientes

Esta guía te ayuda a crear experiencias para estos tipos de dispositivos de realidad extendida.

Más información sobre los tipos de dispositivos de realidad extendida →

Visores de realidad extendida

Lentes de realidad extendida con cable

Más información sobre los tipos de dispositivos de realidad extendida →

Usar el framework de Android Jetpack Compose es la mejor manera de aprovechar los avances más recientes en el desarrollo de la IU de Android y verificar que tu aplicación se mantenga al día con las prácticas recomendadas de la industria.

Sin embargo, si no migraste y estás trabajando para espacializar una app basada en Views de Android, puedes adoptar algunos enfoques.

Prueba hacerlo con Compose

Jetpack Compose con el SDK de Jetpack XR es el kit de herramientas de IU recomendado para compilar IU espaciales en Android XR.

Cómo reutilizar tus vistas existentes en SpatialPanels

Si bien un SpatialPanel forma parte de la biblioteca de Jetpack Compose para XR, también acepta vistas. Cuando uses Subspace en tu MainActivity, coloca una vista existente en un SpatialPanel, como se muestra en el siguiente ejemplo.

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

Usa las APIs de interoperabilidad de Compose y las vistas de Android

Consulta la guía sobre la interoperabilidad entre Views y Compose. En esta documentación, se explica cómo usar estos frameworks juntos y se incluyen vínculos a muestras de código que puedes usar.

Usa una ComposeView para agregar paneles espaciales y orbitadores a un fragmento existente

Usa un ComposeView en tu diseño XML para agregar elementos componibles y crear contenido de RE nuevo. Usa la vinculación de vistas o findViewById para encontrar el ComposeView en la función onCreateView().

Obtén más información sobre la orientación de 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

Trabaja directamente con la biblioteca de SceneCore de Jetpack

Compose para RE se basa en Jetpack SceneCore. Si estás espacializando una app basada en Views, puedes seguir usando tu código de IU existente en Compose para XR o, en su lugar, trabajar directamente con Session de Jetpack SceneCore.

Puedes compilar paneles directamente desde SceneCore con PanelEntity. Establece el tamaño del panel en metros con dimensions o en píxeles con pixelDimensions. Puedes elegir que los paneles se puedan mover o cambiar de tamaño con los componentes correspondientes. Para obtener más información, consulta Agrega un comportamiento común a las entidades.

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