Orbity

Odpowiednie urządzenia z XR

Te wskazówki pomogą Ci tworzyć treści na te typy urządzeń z XR.

Więcej informacji o typach urządzeń XR →

Więcej informacji o typach urządzeń XR →

Orbiter to komponent przestrzenny, który możesz dołączyć do odpowiedniego panelu przestrzennego lub komponentu układu przestrzennego, takiego jak SpatialColumn, SpatialRow lub SpatialBox. Orbiter zwykle zawiera elementy nawigacyjne i czynności kontekstowe związane z elementem, do którego jest zakotwiczony. Jeśli na przykład utworzysz panel przestrzenny do wyświetlania treści wideo, możesz dodać elementy sterujące odtwarzaniem wideo w orbiterze.

Tworzenie orbitera

Jak pokazano w przykładzie poniżej, wywołaj orbiter w układzie 2D w SpatialPanel, aby opakować elementy sterujące użytkownika, takie jak nawigacja. Spowoduje to wyodrębnienie ich z układu 2D i dołączenie do panelu przestrzennego zgodnie z konfiguracją.

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

Najważniejsze informacje o kodzie

• Ponieważ orbitery są komponentami interfejsu przestrzennego, kod można ponownie wykorzystać w układach 2D lub 3D. W układzie 2D aplikacja renderuje tylko treści wewnątrz orbitera i ignoruje sam orbiter.
• Więcej informacji o tym, jak używać i projektować orbitery, znajdziesz w naszych wskazówkach dotyczących projektowania.

Zakotwiczanie orbitera w panelach i układach przestrzennych

Możesz zakotwiczyć element orbiter do komponentu SpatialPanel i komponentów układu przestrzennego zadeklarowanych w Compose. Wymaga to zadeklarowania orbitera w układzie przestrzennym elementów interfejsu, takich jak SpatialRow, SpatialColumn lub SpatialBox. Orbiter jest zakotwiczony w elemencie nadrzędnym, który znajduje się najbliżej miejsca, w którym został zadeklarowany.

Zachowanie orbitera zależy od tego, gdzie go zadeklarujesz:

• W układzie 2D opakowanym w element SpatialPanel (jak pokazano we wcześniejszym fragmencie kodu) orbiter jest zakotwiczony w tym elemencie SpatialPanel.
• W Subspace orbiter jest zakotwiczony w najbliższej encji nadrzędnej, czyli w układzie przestrzennym, w którym jest zadeklarowany.

Poniższy przykład pokazuje, jak zakotwiczyć element orbiter w wierszu przestrzennym:

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

Najważniejsze informacje o kodzie

• Gdy zadeklarujesz orbitera poza układem 2D, zostanie on zakotwiczony do najbliższej encji nadrzędnej. W takim przypadku orbiter jest zakotwiczony u góry elementu SpatialRow, w którym został zadeklarowany.
• Układy przestrzenne, takie jak SpatialRow, SpatialColumn i SpatialBox, mają powiązane encje bez treści. Dlatego orbiter zadeklarowany w układzie przestrzennym jest zakotwiczony w tym układzie.