Горизонтальные пейджеры в Jetpack Compose Glimmer

Применимые устройства XR
Данное руководство поможет вам создавать приложения для устройств 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),
        )
    }
)