Paneles espaciales

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 →

Un SpatialPanel es un elemento componible de subespacio que te permite mostrar el contenido de tu app. Por ejemplo, puedes mostrar la reproducción de video, imágenes estáticas o cualquier otro contenido en un panel espacial.

Figura 1: Ejemplo de un panel de IU espacial.

Puedes usar SubspaceModifier para cambiar el tamaño, el comportamiento y la posición del panel espacial.

Cómo crear un panel espacial

En el siguiente ejemplo, se muestra cómo crear un panel espacial.

Subspace {
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
            .movable()
            .resizable(),
    ) {
        SpatialPanelContent()
    }
}

@Composable
fun SpatialPanelContent() {
    Box(
        Modifier
            .background(color = Color.Black)
            .height(500.dp)
            .width(500.dp),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "Spatial Panel",
            color = Color.White,
            fontSize = 25.sp
        )
    }
}

Puntos clave sobre el código

  • Debido a que las APIs de SpatialPanel son elementos componibles de subespacio, debes llamarlas dentro de Subspace. Si se los llama fuera de un subespacio, se arroja una excepción.
  • El tamaño de SpatialPanel se estableció con las especificaciones height y width en SubspaceModifier. Si omites estas especificaciones, el tamaño del panel se determinará según las medidas de su contenido.
  • Permite que el usuario mueva un panel agregando un modificador de subespacio movable.
  • Permite que el usuario cambie el tamaño de un panel agregando un modificador de subespacio resizable.
  • Para obtener detalles sobre el tamaño y la posición, consulta nuestra guía de diseño de paneles espaciales. Para obtener más detalles sobre la implementación de códigos, consulta nuestra documentación de referencia.

Cómo funciona el modificador movable

A medida que un usuario aleja un panel, de forma predeterminada, el modificador movable cambia el tamaño del panel de manera similar a como el sistema cambia el tamaño de los paneles en el espacio de inicio. Todo el contenido secundario hereda este comportamiento. Para inhabilitar esta opción, establece el parámetro shouldScaleWithDistance en false.

Agrega varios paneles espaciales a un diseño espacial

Puedes crear varios paneles espaciales y colocarlos dentro de un diseño espacial con SpatialRow, SpatialColumn, SpatialBox y SpatialSpacer.

Figura 2.: Ejemplo de varios paneles espaciales en un diseño espacial.

En el siguiente ejemplo de código, se muestra cómo hacerlo.

Subspace {
    SpatialRow {
        SpatialColumn {
            SpatialPanel(SubspaceModifier.height(250.dp).width(400.dp)) {
                SpatialPanelContent("Top Left")
            }
            SpatialPanel(SubspaceModifier.height(200.dp).width(400.dp)) {
                SpatialPanelContent("Middle Left")
            }
            SpatialPanel(SubspaceModifier.height(250.dp).width(400.dp)) {
                SpatialPanelContent("Bottom Left")
            }
        }
        SpatialColumn {
            SpatialPanel(SubspaceModifier.height(250.dp).width(400.dp)) {
                SpatialPanelContent("Top Right")
            }
            SpatialPanel(SubspaceModifier.height(200.dp).width(400.dp)) {
                SpatialPanelContent("Middle Right")
            }
            SpatialPanel(SubspaceModifier.height(250.dp).width(400.dp)) {
                SpatialPanelContent("Bottom Right")
            }
        }
    }
}

@Composable
fun SpatialPanelContent(text: String) {
    Column(
        Modifier
            .background(color = Color.Black)
            .fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "Panel",
            color = Color.White,
            fontSize = 15.sp
        )
        Text(
            text = text,
            color = Color.White,
            fontSize = 25.sp,
            fontWeight = FontWeight.Bold
        )
    }
}

Puntos clave sobre el código

  • SpatialRow, SpatialColumn, SpatialBox y SpatialSpacer son elementos componibles de subespacio y deben colocarse dentro de un subespacio.
  • Usa SubspaceModifier para personalizar tu diseño.
  • Para los diseños con varios paneles en fila, te recomendamos que establezcas un radio de curva de 825 dp con un SubspaceModifier para que los paneles rodeen al usuario. Para obtener más detalles, consulta nuestra guía de diseño.

Crea paneles y diseños personalizados

Para crear paneles personalizados que no sean compatibles con Compose para XR, puedes trabajar directamente con instancias de PanelEntity y el gráfico de escena con las APIs de SceneCore.