Orbiter

Perangkat XR yang kompatibel
Panduan ini membantu Anda membangun pengalaman untuk jenis perangkat XR ini.
Mempelajari jenis perangkat XR →
Headset XR
Kacamata XR Berkabel
Mempelajari jenis perangkat XR →

Orbiter adalah komponen spasial yang dapat Anda lampirkan ke panel spasial atau komponen tata letak spasial yang sesuai seperti SpatialColumn, SpatialRow, atau SpatialBox. Orbiter biasanya berisi item tindakan kontekstual dan navigasi yang terkait dengan entitas tempatnya ditambatkan. Misalnya, jika Anda telah membuat panel spasial untuk menampilkan konten video, Anda dapat menambahkan kontrol pemutaran video di dalam orbiter.

Gambar 1.: Contoh pengorbit.

Membuat pengorbit

Seperti yang ditunjukkan dalam contoh berikut, panggil orbiter di dalam tata letak 2D dalam SpatialPanel untuk menggabungkan kontrol pengguna seperti navigasi. Tindakan ini akan mengekstraknya dari tata letak 2D dan melampirkannya ke panel spasial sesuai dengan konfigurasi Anda. 

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

Poin penting tentang kode

  • Karena orbiter adalah komponen UI spasial, kode dapat digunakan kembali dalam tata letak 2D atau 3D. Dalam tata letak 2D, aplikasi Anda hanya merender konten di dalam orbiter dan mengabaikan orbiter itu sendiri.
  • Lihat panduan desain kami untuk mengetahui informasi selengkapnya tentang cara menggunakan dan mendesain orbiter.

Menambatkan orbiter ke panel dan tata letak spasial

Anda dapat menambatkan orbiter ke SpatialPanel dan komponen tata letak spasial yang dideklarasikan di Compose. Hal ini melibatkan pendeklarasian orbiter dalam tata letak spasial elemen UI seperti SpatialRow, SpatialColumn, atau SpatialBox. Orbiter akan ditambatkan ke induk yang paling dekat dengan tempat Anda mendeklarasikannya.

Perilaku pengorbit ditentukan oleh tempat Anda mendeklarasikannya:

  • Dalam tata letak 2D yang digabungkan dalam SpatialPanel (seperti yang ditunjukkan dalam cuplikan kode sebelumnya), orbiter akan ditambatkan ke SpatialPanel tersebut.
  • Dalam Subspace, orbiter dikaitkan ke parent entity terdekat, yang merupakan tata letak spasial tempat orbiter dideklarasikan.

Contoh berikut menunjukkan cara menambatkan orbiter ke baris spasial:

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

Poin penting tentang kode

  • Saat Anda mendeklarasikan orbiter di luar tata letak 2D, orbiter akan dikaitkan ke parent entity terdekatnya. Dalam hal ini, orbiter ditambatkan ke bagian atas SpatialRow tempatnya dideklarasikan.
  • Tata letak spasial seperti SpatialRow, SpatialColumn, SpatialBox semuanya memiliki entity tanpa konten yang terkait dengannya. Oleh karena itu, orbiter yang dideklarasikan dalam tata letak spasial akan ditambatkan ke tata letak tersebut.