Painéis espaciais

Dispositivos XR relevantes
Estas orientações ajudam você a criar experiências para esses tipos de dispositivos XR.
Saiba mais sobre esses dispositivos →
Headsets XR
Óculos XR com fio
Saiba mais sobre esses dispositivos →

Um SpatialPanel é um combinável de subespaço que permite mostrar o conteúdo do app. Por exemplo, você pode mostrar a reprodução de vídeo, imagens estáticas ou qualquer outro conteúdo em um painel espacial.

Figura 1: Exemplo de um painel de interface espacial.

Use SubspaceModifier para mudar o tamanho, o comportamento e o posicionamento do painel espacial.

Criar um painel espacial

O exemplo a seguir mostra como criar um painel 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
        )
    }
}

Pontos principais sobre o código

  • Como as APIs SpatialPanel são de composição de subespaço, é necessário chamá-las em Subspace. Chamar esses métodos fora de um subespaço gera uma exceção.
  • O tamanho do SpatialPanel foi definido usando as especificações height e width no SubspaceModifier. Se você omitir essas especificações, o tamanho do painel será determinado pelas medidas do conteúdo.
  • Permita que o usuário mova um painel adicionando um modificador de subespaço movable.
  • Permita que o usuário redimensione um painel adicionando um modificador de subespaço resizable.
  • Consulte nossas orientações de design de painéis espaciais para saber mais sobre dimensionamento e posicionamento. Consulte nossa documentação de referência para mais detalhes sobre a implementação de código.

Como o modificador movable funciona

Quando um usuário afasta um painel, por padrão, o modificador movable dimensiona o painel de maneira semelhante à forma como os painéis são redimensionados pelo sistema no espaço inicial. Todo o conteúdo infantil herda esse comportamento. Para desativar esse recurso, defina o parâmetro shouldScaleWithDistance como false.

Adicionar vários painéis espaciais a um layout espacial

É possível criar vários painéis espaciais e colocá-los em um layout espacial usando SpatialRow, SpatialColumn, SpatialBox e SpatialSpacer.

Figura 2: Exemplo de vários painéis espaciais em um layout espacial.

O exemplo de código a seguir mostra como fazer isso.

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
        )
    }
}

Pontos principais sobre o código

  • SpatialRow, SpatialColumn, SpatialBox e SpatialSpacer são todos elementos de composição de subespaço e precisam ser colocados em um subespaço.
  • Use SubspaceModifier para personalizar o layout.
  • Para layouts com vários painéis em uma linha, recomendamos definir um raio de curva de 825 dp usando um SubspaceModifier para que os painéis fiquem ao redor do usuário. Consulte nossas orientações de design para mais detalhes.

Criar painéis e layouts personalizados

Para criar painéis personalizados que não são compatíveis com o Compose para XR, trabalhe diretamente com instâncias de PanelEntity e o gráfico de cena usando as APIs SceneCore.