Jetpack Compose Glimmer의 가로 페이저

적용 가능한 XR 기기

이 가이드에서는 이러한 유형의 XR 기기를 위한 환경을 빌드하는 방법을 설명합니다.

디스플레이 안경

Jetpack Compose Glimmer에서 GlimmerHorizontalPager는 지연 구성된 가로 스크롤 가능한 레이아웃으로, 페이지를 순차적으로 정렬합니다. Compose Foundation에 있는 표준 HorizontalPager와 비슷하지만 Glimmer 동작 및 기본값이 있는 디스플레이 글라스에 맞게 조정되었습니다.

기본적으로 한 번에 하나의 페이지만 눈에 띄게 표시됩니다. 세련된 환경을 제공하기 위해 페이저는 스냅 애니메이션을 사용하여 사용자의 스크롤 동작이 끝난 후 페이지가 항상 뷰포트 경계에 정확히 배치되도록 합니다.

주요 매개변수 및 레이아웃 옵션

GlimmerHorizontalPager는 간격, 레이아웃 정렬, 지연 로드를 제어하는 맞춤설정 가능한 매개변수를 제공합니다. 이러한 매개변수 중 일부는 다음과 같습니다.

매개변수	설명
`state`	페이저의 스크롤 위치와 활성 페이지를 관리, 관찰, 프로그래매틱 방식으로 제어하는 `GlimmerPagerState` 객체입니다.
`contentPadding`	클리핑 후 전체 콘텐츠 경계 주위에 적용되는 패딩으로, 첫 번째 페이지 앞이나 마지막 페이지 뒤에 선행 또는 후행 가장자리 패딩을 추가하는 데 유용합니다.
`pageSpacing`	페이저의 개별 페이지 간 가로 간격입니다.
`pageIndicator`	활성 페이지 표시기를 렌더링하는 컴포저블 슬롯입니다. 기본값은 `GlimmerHorizontalPagerDefaults.PageIndicator(state)`입니다.
`beyondViewportPageCount`	사전 로드 최적화로 표시되는 뷰포트 너머에 구성하고 배치할 페이지 수입니다. 지연 구성 효율성을 유지하려면 큰 값을 설정하지 마세요.

사용 가능한 모든 매개변수에 관한 자세한 내용은 전체 참고 문서를 참고하세요.

애니메이션 텍스트 모션 권장사항

디스플레이 안경에서 페이저 스냅 애니메이션 및 전환 중에 기본 텍스트 렌더링은 픽셀 스냅핑 아티팩트를 표시할 수 있습니다. TextMotion.Animated를 설정하면 레이아웃 애니메이션 전반에 걸쳐 원활한 렌더링이 보장됩니다.

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

예: 가로 페이저

다음 코드는 각 페이지 내에 카드를 배치하여 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),
        )
    }
}GlimmerHorizontalPagerSample.kt

코드에 관한 주요 사항

상태: GlimmerPagerState를 사용하여 rememberGlimmerPagerState(pageCount = { 10 })를 초기화하여 페이저의 상태를 관리합니다.
페이지 슬롯 콘텐츠: 각 카드를 렌더링하기 위해 GlimmerPagerScope 람다 내에서 페이지 색인 page를 수신합니다.
원활한 애니메이션 텍스트 스타일: 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),
        )
    }
)GlimmerHorizontalPagerSample.kt