Орбитальные аппараты

Поддерживаемые XR-устройства
Это руководство поможет вам создавать продукты для таких XR-устройств.
Подробнее о типах устройств XR…
XR-шлемы
Проводные XR-очки
Подробнее о типах устройств XR…

Orbiter – это пространственный компонент, который можно прикрепить к соответствующей пространственной панели или компоненту пространственного макета, например SpatialColumn, SpatialRow или SpatialBox. Обычно он содержит элементы навигации и контекстных действий, связанных с объектом, к которому он прикреплен. Например, если вы создали пространственную панель для показа видеоконтента, то можете добавить элементы управления воспроизведением видео в орбитер.

Рисунок 1. Пример орбитального аппарата.

Создать орбитальный аппарат

Как показано в примере ниже, вызовите Orbiter внутри макета 2D в SpatialPanel, чтобы обернуть элементы управления, например навигацию. Это позволит извлечь их из 2D-макета и прикрепить к пространственной панели в соответствии с вашей конфигурацией. 

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

Важные сведения о коде

  • Поскольку орбитеры являются пространственными компонентами пользовательского интерфейса, код можно повторно использовать в 2D- или 3D-макетах. В двухмерном макете приложение отображает только контент внутри орбитера, игнорируя сам орбитер.
  • Дополнительную информацию о том, как использовать и разрабатывать орбитеры, можно найти в руководстве по дизайну.

Привязка орбитеров к пространственным панелям и макетам

Вы можете привязать орбитер к SpatialPanel и компонентам пространственного макета, объявленным в Compose. Для этого нужно объявить орбитер в пространственном макете элементов пользовательского интерфейса, таких как SpatialRow, SpatialColumn или SpatialBox. Орбитальный элемент привязывается к родительскому элементу, который находится ближе всего к месту его объявления.

Поведение орбитера определяется тем, где вы его объявляете:

  • В двухмерном макете, заключенном в SpatialPanel (как показано в предыдущем фрагменте кода), орбитер привязывается к этому SpatialPanel.
  • В Subspace орбитер привязывается к ближайшему родительскому объекту, то есть к пространственному макету, в котором он объявлен.

В примере ниже показано, как закрепить орбитер в пространственной строке.

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

Важные сведения о коде

  • Если вы объявляете орбитер вне двухмерного макета, он привязывается к ближайшему родительскому объекту. В этом случае орбитальный элемент привязывается к верхней части SpatialRow, в котором он объявлен.
  • Пространственные макеты, такие как SpatialRow, SpatialColumn, SpatialBox, имеют связанные с ними объекты без контента. Поэтому орбитер, объявленный в пространственном макете, привязывается к этому макету.