Orbiter

Dispositivi XR applicabili
Queste indicazioni ti aiutano a creare esperienze per questi tipi di dispositivi XR.
Scopri di più sui tipi di dispositivi XR →
Visori XR
Occhiali XR con cavo
Scopri di più sui tipi di dispositivi XR →

Un Orbiter è un componente spazializzato che puoi collegare a un componente del pannello spaziale o del layout spaziale corrispondente, ad esempio SpatialColumn, SpatialRow o SpatialBox. Un orbiter in genere contiene elementi di navigazione e azioni contestuali correlati all'entità a cui è ancorato. Ad esempio, se hai creato un pannello spaziale per visualizzare contenuti video, puoi aggiungere controlli di riproduzione video all'interno di un orbiter.

Figura 1: Esempio di orbiter.

Crea un orbiter

Come mostrato nell'esempio seguente, chiama un orbiter all'interno del layout 2D in un SpatialPanel per aggregare i controlli utente come la navigazione. In questo modo, vengono estratti dal layout 2D e collegati al pannello spaziale in base alla tua configurazione. 

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

Punti chiave sul codice

  • Poiché gli orbiter sono componenti UI spaziali, il codice può essere riutilizzato in layout 2D o 3D. In un layout 2D, l'app esegue il rendering solo dei contenuti all'interno dell'orbiter e ignora l'orbiter stesso.
  • Consulta le nostre indicazioni per la progettazione per saperne di più su come utilizzare e progettare gli orbiter.

Ancorare gli orbiter a layout e pannelli spaziali

Puoi ancorare un orbiter a un SpatialPanel e ai componenti di layout spaziale dichiarati in Compose. Ciò comporta la dichiarazione di un orbiter in un layout spaziale di elementi UI come SpatialRow, SpatialColumn o SpatialBox. L'orbiter si ancora all'elemento principale più vicino a dove lo hai dichiarato.

Il comportamento dell'orbiter è determinato da dove lo dichiari:

  • In un layout 2D inserito in un SpatialPanel (come mostrato in uno snippet di codice precedente), l'orbiter si ancora a quel SpatialPanel.
  • In un Subspace, l'orbiter si ancora all'entità principale più vicina, ovvero il layout spaziale in cui è dichiarato l'orbiter.

L'esempio seguente mostra come ancorare un orbiter a una riga spaziale:

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

Punti chiave sul codice

  • Quando dichiari un orbiter al di fuori di un layout 2D, l'orbiter si ancora all'entità principale più vicina. In questo caso, l'orbiter si ancora alla parte superiore del SpatialRow in cui è dichiarato.
  • I layout spaziali come SpatialRow, SpatialColumn, SpatialBox hanno tutti entità senza contenuti associate. Pertanto, un orbiter dichiarato in un layout spaziale si ancora a quel layout.