Горизонтальные навигаторы страниц в Jetpack Compose Glimmer

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

В Jetpack Compose Glimmer GlimmerHorizontalPager – это макет с горизонтальной прокруткой, который создается по мере необходимости и располагает страницы последовательно. Он похож на стандартный HorizontalPager, который можно найти в Compose Foundation, но адаптирован для дисплеев с поведением Glimmer и значениями по умолчанию.

По умолчанию одновременно показывается только одна страница. Чтобы обеспечить удобство использования, пейджер использует анимацию привязки, благодаря которой страница всегда точно располагается в границах области просмотра после того, как пользователь завершает прокрутку.

Рисунок 1. Пример использования GlimmerHorizontalPager.

Основные параметры и варианты макетов

GlimmerHorizontalPager позволяет настраивать параметры для управления интервалами, выравниванием макета и отложенной загрузкой. Вот некоторые из них:

Параметр Описание

state

Объект GlimmerPagerState, который управляет позицией прокрутки и активной страницей пейджера, отслеживает их и позволяет программно контролировать их.

contentPadding

Поля, добавленные вокруг границ контента после обрезки. Полезно для добавления полей в начале или конце документа.

pageSpacing

Горизонтальное расстояние между отдельными страницами в пейджере.

pageIndicator

Компонуемый слот, в котором отображается индикатор активной страницы. Значение по умолчанию – GlimmerHorizontalPagerDefaults.PageIndicator(state).

beyondViewportPageCount

Количество страниц, которые нужно скомпоновать и разместить за пределами видимой области просмотра в качестве оптимизации предварительной загрузки. Не задавайте большие значения, чтобы не снижать эффективность ленивой композиции.

Полный список доступных параметров приведен в справочной документации.

Рекомендация по анимации текста

Во время анимации при переходе между страницами и переходов на дисплеях очков могут возникать артефакты, связанные с привязкой к пикселям. Установка значения "Задать" в параметре TextMotion.Animated обеспечивает плавную отрисовку при анимации макета:

Text(
    text = "Page: $page",
    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
)

Пример: горизонтальная навигация по страницам

В следующем фрагменте кода показано, как создать простой горизонтальный пейджер с 10 страницами, на каждой из которых размещена карточка:

// Hoist the pager state, specifying the total page count with a lambda.
val pagerState = rememberGlimmerPagerState(pageCount = { 10 })

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
) { page ->
    // Use Glimmer components like Card and Text for optimized glasses styling.
    Card(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "Page: $page",
            // Recommended: use TextMotion.Animated for smooth transitions in a pager.
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
}

Ключевые моменты

  • State инициализирует GlimmerPagerState с помощью rememberGlimmerPagerState(pageCount = { 10 }) для управления состоянием пейджера.
  • Контент слота страницы. Получает индекс страницы page внутри лямбда-функции GlimmerPagerScope для отрисовки каждой карточки.
  • Сглаживание текста – копирует LocalTextStyle.current и явно включает TextMotion.Animated.
  • Автоматический индикатор страниц. В отличие от стандартных пейджеров Compose, для которых требуется внешний компонент индикатора, GlimmerHorizontalPager по умолчанию автоматически встраивает индикатор страниц в виде точек.

Индикаторы страниц

По умолчанию элемент GlimmerHorizontalPager создает индикатор страниц на основе точек с помощью элемента GlimmerHorizontalPagerDefaults.PageIndicator. Цветовая схема индикатора меняется автоматически:

  • Активная точка использует цвет контента, полученный из ближайшего окружающего элемента surface.

Вы можете передать настроенный объект PageIndicator, чтобы задать определенные цвета, или заменить точку собственным макетом:

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
    // Use a page numbers instead of the default dot-indicator
    pageIndicator = {
        Text(
            text = "${pagerState.currentPage + 1} / ${pagerState.pageCount}",
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
)