Orbites

Appareils XR concernés

Ces conseils vous aideront à créer des expériences pour ces types d'appareils XR.

En savoir plus sur les types d'appareils XR →

En savoir plus sur les types d'appareils XR →

Un Orbiter est un composant spatialisé que vous pouvez associer à un panneau spatial ou à un composant de mise en page spatiale correspondant, comme un SpatialColumn, un SpatialRow ou un SpatialBox. Un orbiteur contient généralement des éléments de navigation et d'action contextuelle liés à l'entité à laquelle il est ancré. Par exemple, si vous avez créé un panneau spatial pour afficher du contenu vidéo, vous pouvez ajouter des commandes de lecture vidéo dans un orbiteur.

Créer un orbiteur

Comme illustré dans l'exemple suivant, appelez un orbiteur dans la mise en page 2D d'un SpatialPanel pour encapsuler les commandes utilisateur telles que la navigation. Cela les extrait de votre mise en page 2D et les associe au panneau spatial en fonction de votre configuration.

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

@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
                )
            }
        }
    }
}
Orbiter.kt

Points clés concernant le code

• Comme les orbiters sont des composants d'UI spatiaux, le code peut être réutilisé dans des mises en page 2D ou 3D. Dans une mise en page 2D, votre application n'affiche que le contenu à l'intérieur de l'orbiteur et ignore l'orbiteur lui-même.
• Pour en savoir plus sur l'utilisation et la conception des orbiteurs, consultez nos conseils de conception.

Ancrer des orbiteurs à des panneaux et des mises en page spatiaux

Vous pouvez ancrer un orbiteur à un SpatialPanel et à des composants de mise en page spatiale déclarés dans Compose. Pour ce faire, vous devez déclarer un orbiteur dans une mise en page spatiale d'éléments d'interface utilisateur tels que SpatialRow, SpatialColumn ou SpatialBox. L'orbiteur s'ancre au parent le plus proche de l'endroit où vous l'avez déclaré.

Le comportement de l'orbiteur est déterminé par l'endroit où vous le déclarez :

• Dans une mise en page 2D encapsulée dans un SpatialPanel (comme illustré dans un extrait de code précédent), l'orbiteur s'ancre à ce SpatialPanel.
• Dans un Subspace, l'orbiteur s'ancre à l'entité parente la plus proche, qui est la mise en page spatiale dans laquelle l'orbiteur est déclaré.

L'exemple suivant montre comment ancrer un orbiteur à une ligne spatiale :

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)
            )
        }
    }
}
Orbiter.kt

Points clés concernant le code

• Lorsque vous déclarez un orbiteur en dehors d'une mise en page 2D, il s'ancre à l'entité parente la plus proche. Dans ce cas, l'orbiteur s'ancre en haut du SpatialRow dans lequel il est déclaré.
• Les mises en page spatiales telles que SpatialRow, SpatialColumn et SpatialBox sont toutes associées à des entités sans contenu. Par conséquent, un orbiteur déclaré dans une mise en page spatiale s'ancre à cette mise en page.