Orbiter

XR‑Geräte, für die der Leitfaden gilt

Dieser Leitfaden hilft Ihnen dabei, Erlebnisse für die folgenden Arten von XR-Geräten zu entwickeln.

Informationen zu XR-Gerätetypen →

Informationen zu XR-Gerätetypen →

Ein Orbiter ist eine räumliche Komponente, die Sie an eine entsprechende räumliche Bereichs- oder Layoutkomponente wie SpatialColumn, SpatialRow oder SpatialBox anhängen können. Ein Orbiter enthält in der Regel Navigations- und Kontextaktionselemente, die sich auf die Entität beziehen, an der er verankert ist. Wenn Sie beispielsweise ein räumliches Steuerfeld zum Anzeigen von Videoinhalten erstellt haben, können Sie in einem Orbiter Steuerelemente für die Videowiedergabe hinzufügen.

Orbiter erstellen

Rufen Sie wie im folgenden Beispiel gezeigt einen Orbiter im 2D-Layout in einem SpatialPanel auf, um Nutzersteuerelemente wie die Navigation zu umschließen. Dadurch werden sie aus dem 2D-Layout extrahiert und gemäß Ihrer Konfiguration an den räumlichen Bereich angehängt.

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

Wichtige Punkte zum Code

• Da Orbiter räumliche UI-Komponenten sind, kann der Code in 2D- oder 3D-Layouts wiederverwendet werden. In einem 2D-Layout rendert Ihre App nur den Inhalt innerhalb des Orbiters und ignoriert den Orbiter selbst.
• Weitere Informationen zur Verwendung und zum Design von Orbitern findest du in unseren Designrichtlinien.

Orbiters an räumlichen Bereichen und Layouts verankern

Sie können einen Orbiter an einer SpatialPanel und an räumlichen Layoutkomponenten verankern, die in Compose deklariert sind. Dazu wird ein Orbiter in einem räumlichen Layout von UI-Elementen wie SpatialRow, SpatialColumn oder SpatialBox deklariert. Der Orbiter wird an dem übergeordneten Element verankert, das dem Ort, an dem Sie ihn deklariert haben, am nächsten ist.

Das Verhalten des Orbiters wird dadurch bestimmt, wo Sie ihn deklarieren:

• In einem 2D-Layout, das in ein SpatialPanel-Element eingebunden ist (wie im vorherigen Code-Snippet gezeigt), wird der Orbiter an diesem SpatialPanel-Element verankert.
• In einem Subspace wird der Orbiter an der nächstgelegenen übergeordneten Entität verankert, also dem räumlichen Layout, in dem der Orbiter deklariert ist.

Das folgende Beispiel zeigt, wie ein Orbiter an einer räumlichen Zeile verankert wird:

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

Wichtige Punkte zum Code

• Wenn Sie einen Orbiter außerhalb eines 2D-Layouts deklarieren, wird er an der nächstgelegenen übergeordneten Entität verankert. In diesem Fall wird der Orbiter am oberen Rand des SpatialRow verankert, in dem er deklariert ist.
• Räumliche Layouts wie SpatialRow, SpatialColumn und SpatialBox sind alle mit Entitäten ohne Inhalt verknüpft. Daher wird ein in einem räumlichen Layout deklarierter Orbiter an diesem Layout verankert.