[Android] Compose UI - (3) 페이저(Pager)

개요

오늘도 컴포즈에 관한 내용을 공부하고 정리해본다. 오늘은 페이저! 

 

Compose Pager

Compose에서 뷰페이저 기능을 구현하기 위해서는 Pager 라는 것을 사용하면 된다

위 아래로 넘길때 -> VerticalPager

좌 우로 넘기려면 -> HorizontalPager

를 활용하면 된다.

 

기본적으로 HorizontalPager는 화면의 전체 너비를 차지한다.

VerticalPager의 경우는 전체 높이를 차지한다.

 

HorizontalPager

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun HorizontalPager() {
    val pagerState = rememberPagerState(pageCount = { 10 })

    HorizontalPager(
        state = pagerState,
        modifier = Modifier.padding(30.dp)
    ) { page ->
        Text(
            text = "Page : $page",
            modifier = Modifier.fillMaxWidth()
        )
    }
}

 

 

 

VerticalPager

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun VerticalPagers() {
    val pagerState = rememberPagerState(pageCount = { 10 })

    VerticalPager(state = pagerState) { page ->
        Text(text = "페이지 : $page",
            modifier = Modifier.fillMaxHeight())
    }
}

지연 생성

HorizontalPager 및 VerticalPager 페이지는 모두 느리다.

페이지를 스크롤하게 되면 컴포저블은 더 이상 표시되지 않는 페이지를 삭제한다.

화면 밖에 더 많은 페이지 로드하기

기본적으로 페이저는 화면에 표시된 페이지만 로드한다. 더 많은 페이지를 로드하기 위해서는 beyondBoundsPageCount를 0보다 큰 값으로 설정한다.

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun VerticalPagers() {
    val pagerState = rememberPagerState(pageCount = { 10 })

    VerticalPager(state = pagerState, beyondBoundsPageCount = 2) { page ->
        Text(text = "페이지 : $page",
            modifier = Modifier.fillMaxHeight())
    }
}

스크롤 변경

페이저에서 특정 페이지로 스크롤하기 위해서 PagerState 객체를 사용해 rememberPagerState() 페이저에 state 매개변수로 전달한다.

PagerState.scrollToPage()를 CoroutineScope에서 실행하면 다음과 같다.

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun HorizontalPager() {
    val pagerState = rememberPagerState(pageCount = { 10 })

    HorizontalPager(
        state = pagerState,
        modifier = Modifier.padding(30.dp)
    ) { page ->
        Text(
            text = "Page : $page",
            modifier = Modifier.fillMaxSize()
        )
    }

    val coroutineScope = rememberCoroutineScope()
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.BottomCenter
    ) {
        Button(onClick = {
            coroutineScope.launch {
                pagerState.scrollToPage(3)
            }
        }, modifier = Modifier
            .padding(bottom = 20.dp)
            .align(Alignment.BottomCenter)) {
            Text(text = "3으로 넘기기")
        }
    }
}

 

그냥 Button에 align(Alignment.BottomCenter)를 Modifier에 추가해주려 했는데 계속해서 에러가 발생해서 Box로 감싸주었다.

 

 

바로 3으로 넘어가는 것을 확인할 수 있다.

추가적으로 애니메이션을 지정할 수 있는데

PagerState.animateScrollToPage() 를 지정하면 된다.

페이지 상태 변경 체크

PagerState 에는 페이지에 관한 정보가 있는 세 가지 속성이 있다.

 

- currentPage -> 현재 보여지는 페이지로 Pager를 스크롤하거나 페이지 전환 버튼을 클릭하면 이 값이 변겨오딘다.

- settledPage -> settledPage는 사용자가 최종적으로 도착한 페이지를 나타낸다.

- targetPage -> Pager가 이동하고자 하는 페이지 번호이다. 실제 currentPage가 targetPage로 변경되는 과정에서 상태 변화를 관측할 수 있다.

 

snapshotFlow 함수를 사용해 위 변수들의 변경사항을 관찰할 수 있다.

val pagerState = rememberPagerState(pageCount = {
    10
})

LaunchedEffect(pagerState) {
    snapshotFlow { pagerState.currentPage }.collect { page ->
        Log.d("Page change", "삐빅 페이지 변환 $page")
    }
}

VerticalPager(
    state = pagerState,
) { page ->
    Text(text = "Page: $page")
}

페이지 Indicator

와 진짜... Compose는 인디케이터도 지원해주는구먼! ViewPager에서 만들려면 직접 커스텀하거나, 라이브러리 써야 하는데 이거 진짜 좋다

 

페이지에 인디케이터를 추가하기 위해서는 PagerState 객체를 사용해 정보를 가져오고, 그대로 표현하면 된다.

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun HorizontalPager() {
    val pagerState = rememberPagerState(pageCount = { 10 })

    HorizontalPager(
        state = pagerState,
        modifier = Modifier.padding(30.dp)
    ) { page ->
        Text(
            text = "Page : $page",
            modifier = Modifier.fillMaxSize()
        )
    }

    Row(
        Modifier
            .wrapContentHeight()
            .fillMaxWidth()
            .fillMaxHeight()
            .padding(bottom = 8.dp),
        verticalAlignment = Alignment.Bottom,
        horizontalArrangement = Arrangement.Center
    ) {
        repeat(pagerState.pageCount) { iteration ->
            val color = if (pagerState.currentPage == iteration)
                Color.Red
            else
                Color.LightGray

            Box(
                modifier = Modifier
                    .padding(2.dp)
                    .clip(CircleShape)
                    .background(color)
                    .size(16.dp)
            )
        }
    }

}