이 페이지는 Cloud Translation API를 통해 번역되었습니다.

맞춤 페이지 표시기 추가

페이지 표시기를 사용하면 진행 상황을 시각적으로 표시하여 사용자가 앱 콘텐츠 내에서 현재 위치를 파악할 수 있도록 지원할 수 있습니다. 이러한 탐색 신호는 캐러셀 구현, 이미지 갤러리 및 슬라이드쇼, 목록의 페이지로 이동과 같이 콘텐츠를 순차적으로 표시할 때 유용합니다.

버전 호환성

이 구현을 사용하려면 프로젝트 minSDK를 API 수준 21 이상으로 설정해야 합니다.

종속 항목

맞춤 페이지 표시기가 있는 가로 페이저 만들기

다음 코드는 페이지 표시기가 있는 가로 페이저를 만들어 사용자에게 페이지 수와 표시되는 페이지에 관한 시각적 신호를 제공합니다.

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize()
) { page ->
    // Our page content
    Text(
        text = "Page: $page",
    )
}
Row(
    Modifier
        .wrapContentHeight()
        .fillMaxWidth()
        .align(Alignment.BottomCenter)
        .padding(bottom = 8.dp),
    horizontalArrangement = Arrangement.Center
) {
    repeat(pagerState.pageCount) { iteration ->
        val color = if (pagerState.currentPage == iteration) Color.DarkGray else Color.LightGray
        Box(
            modifier = Modifier
                .padding(2.dp)
                .clip(CircleShape)
                .background(color)
                .size(16.dp)
        )
    }
}PagerSnippets.kt

코드 관련 핵심 사항

이 코드는 여러 콘텐츠 페이지 간에 가로로 스와이프할 수 있는 HorizontalPager를 구현합니다. 이 경우 각 페이지에 페이지 번호가 표시됩니다.
rememberPagerState() 함수는 페이저를 초기화하고 페이지 수를 4로 설정합니다. 이 함수는 현재 페이지를 추적하고 페이저를 제어할 수 있는 상태 객체를 만듭니다.
pagerState.currentPage 속성은 강조 표시할 페이지 표시기를 결정하는 데 사용됩니다.
페이지 표시기는 Row 구현으로 오버레이된 페이저에 표시됩니다.
페이저의 각 페이지에 16dp 원이 그려집니다. 현재 페이지의 표시기는 DarkGray로 표시되고 나머지 표시기 원은 LightGray로 표시됩니다.
HorizontalPager 내의 Text 컴포저블은 각 페이지에 '페이지: [페이지 번호]' 텍스트를 표시합니다.