Yörüngeciler

Uygun XR cihazlar
Bu kılavuz, bu tür XR cihazları için deneyimler geliştirmenize yardımcı olur.
XR cihaz türleri hakkında bilgi edinin →
XR Kulaklığı
Kablolu XR Gözlükleri
XR cihaz türleri hakkında bilgi edinin →

Orbiter, SpatialColumn, SpatialRow veya SpatialBox gibi ilgili bir uzamsal panele ya da uzamsal düzen bileşenine ekleyebileceğiniz uzamsallaştırılmış bir bileşendir. Yörünge öğesi genellikle sabitlendiği varlıkla ilgili gezinme ve bağlamsal işlem öğeleri içerir. Örneğin, video içeriği görüntülemek için bir uzamsal panel oluşturduysanız yörüngeye video oynatma kontrolleri ekleyebilirsiniz.

Şekil 1.: Yörünge aracı örneği.

Yörünge aracı oluşturma

Aşağıdaki örnekte gösterildiği gibi, gezinme gibi kullanıcı denetimlerini sarmalamak için SpatialPanel içinde 2D düzende bir orbiter çağırın. Bu işlem, bunları 2D düzeninizden çıkarır ve yapılandırmanıza göre uzamsal panele ekler. 

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

Kodla ilgili önemli noktalar

  • Yörünge öğeleri, uzamsal kullanıcı arayüzü bileşenleri olduğundan kod, 2D veya 3D düzenlerde yeniden kullanılabilir. 2D düzende uygulamanız yalnızca orbiter içindeki içeriği oluşturur ve orbiter'ın kendisini yoksayar.
  • Yörünge öğelerinin kullanımı ve tasarımı hakkında daha fazla bilgi için tasarım kılavuzumuzu inceleyin.

Yörünge öğelerini uzamsal panellere ve düzenlere sabitleme

Yörünge öğesini, Compose'da tanımlanan bir SpatialPanel ve uzamsal düzen bileşenlerine sabitleyebilirsiniz. Bu işlem, SpatialRow, SpatialColumn veya SpatialBox gibi kullanıcı arayüzü öğelerinin uzamsal düzeninde bir orbiter tanımlamayı içerir. Yörünge öğesi, tanımlandığı yere en yakın üst öğeye sabitlenir.

Yörünge aracının davranışı, onu nerede tanımladığınıza göre belirlenir:

  • SpatialPanel ile sarmalanmış 2D düzende (önceki kod snippet'inde gösterildiği gibi) yörünge aracı bu SpatialPanel öğesine sabitlenir.
  • Subspace içinde, yörünge aracı en yakın ana varlığa sabitlenir. Bu varlık, yörünge aracının tanımlandığı uzamsal düzendir.

Aşağıdaki örnekte, bir yörünge öğesinin uzamsal satıra nasıl sabitleneceği gösterilmektedir:

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

Kodla ilgili önemli noktalar

  • 2D düzenin dışında bir yörünge öğesi tanımladığınızda, yörünge öğesi en yakın ana varlığına sabitlenir. Bu durumda, yörünge aracı, bildirildiği SpatialRow öğesinin üst kısmına sabitlenir.
  • SpatialRow, SpatialColumn, SpatialBox gibi uzamsal düzenlerin tümünde içeriksiz varlıklar bulunur. Bu nedenle, bir uzamsal düzende tanımlanan yörünge öğesi o düzene sabitlenir.