Orbitadores

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 Orbiter é um componente espacializado que pode ser anexado a um painel espacial ou componente de layout espacial correspondente, como um SpatialColumn, SpatialRow ou SpatialBox. Um orbiter normalmente contém itens de navegação e ações contextuais relacionados à entidade em que está ancorado. Por exemplo, se você criou um painel espacial para mostrar conteúdo de vídeo, pode adicionar controles de mídia dentro de um orbiter.

Figura 1: Exemplo de um orbitador.

Criar um orbitador

Como mostrado no exemplo a seguir, chame um orbiter dentro do layout 2D em um SpatialPanel para agrupar controles do usuário, como navegação. Isso os extrai do layout 2D e os anexa ao painel espacial de acordo com sua configuração. 

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

@Composable
fun OrbiterExample() {
    Orbiter(
        position = OrbiterPosition.BottomCenter(
            verticalEdgeAlignment = OrbiterPosition.EdgeAlignment.Outside,
            offset = DpVolumeOffset(y = 96.dp)
        ),
    ) {
        Surface(Modifier.clip(CircleShape)) {
            Row(
                Modifier
                    .background(color = Color.Black)
                    .height(100.dp)
                    .width(600.dp),
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    text = "Orbiter",
                    color = Color.White,
                    fontSize = 50.sp
                )
            }
        }
    }
}

Pontos principais sobre o código

  • Como os orbitadores são componentes de interface espacial, o código pode ser reutilizado em layouts 2D ou 3D. Em um layout 2D, o app renderiza apenas o conteúdo dentro do Orbiter e ignora o Orbiter em si.
  • Confira nossas orientações de design para mais informações sobre como usar e projetar orbitadores.

Ancorar orbitadores a painéis e layouts espaciais

É possível fixar um orbiter a um SpatialPanel e a componentes de layout espacial declarados no Compose. Isso envolve declarar um orbitador em um layout espacial de elementos da interface, como SpatialRow, SpatialColumn ou SpatialBox. O orbiter se ancora ao pai mais próximo de onde você o declarou.

O comportamento do orbitador é determinado pelo local em que ele é declarado:

  • Em um layout 2D envolvido em um SpatialPanel (conforme mostrado em um snippet de código anterior), o orbiter se ancora a esse SpatialPanel.
  • Em um Subspace, o orbitador se ancora à entidade pai mais próxima, que é o layout espacial em que o orbitador é declarado.

O exemplo a seguir mostra como fixar um orbiter a uma linha espacial:

Subspace {
    SpatialRow {
        Orbiter(
            position = OrbiterPosition.TopCenter(
                verticalEdgeAlignment = OrbiterPosition.EdgeAlignment.Outside,
                offset = DpVolumeOffset(y = 8.dp)
            ),
            shape = SpatialRoundedCornerShape(size = CornerSize(50))
        ) {
            Text(
                "Hello World!",
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier
                    .background(Color.White)
                    .padding(16.dp)
            )
        }
        SpatialPanel(
            SubspaceModifier
                .height(824.dp)
                .width(1400.dp)
        ) {
            Box(
                modifier = Modifier
                    .background(Color.Red)
            )
        }
        SpatialPanel(
            SubspaceModifier
                .height(824.dp)
                .width(1400.dp)
        ) {
            Box(
                modifier = Modifier
                    .background(Color.Blue)
            )
        }
    }
}

Pontos principais sobre o código

  • Quando você declara um orbitador fora de um layout 2D, ele se ancora à entidade pai mais próxima. Nesse caso, o orbiter se fixa à parte de cima do SpatialRow em que é declarado.
  • Layouts espaciais, como SpatialRow, SpatialColumn e SpatialBox, têm entidades sem conteúdo associadas a eles. Portanto, um orbiter declarado em um layout espacial se fixa a esse layout.