CODEWITHSUNDEEP
android-jetpack-compose
MohammadBaqer
MohammadBaqer

Reputation: 1415

HorizontalPager detect swipe offset

I've a HorizontalPager with 3 items.

I need to know exact offset according to user's swipe

HorizontalPager(
            count = 3
        ) {
            Image(
                painter = painterResource(id = R.drawable.ic_launcher_foreground),
                contentDescription = ""
            )
        }

Upvotes: 1

Views: 2550

Answers (1)

Phil Dukhov
Phil Dukhov

Reputation: 88072

In Compose many views have some state parameter, using which you can check its state.

In case of pager, it the state has currentPage and currentPageOffset info. To calculate final offset you also need to check view size with Modifier.onSizeChanged or BoxWithConstraints.

I'm using derivedStateOf to prevent redundant recompositions.

val pagerState = rememberPagerState()
val (pagerWidth, setPagerWidth) = remember { mutableStateOf<Int?>(null) }
val scrollOffset by remember(pagerWidth) {
    derivedStateOf {
        if (pagerWidth == null) return@derivedStateOf 0f
        (pagerState.currentPage + pagerState.currentPageOffset) * pagerWidth
    }
}
HorizontalPager(
    state = pagerState,
    count = 3,
    modifier = Modifier
        .onSizeChanged {
            setPagerWidth(it.width)
        }
) {
    Image(
        painter = painterResource(id = R.drawable.ic_launcher_foreground),
        contentDescription = ""
    )
}
Image(
    painter = painterResource(id = R.drawable.ic_launcher_foreground),
    contentDescription = "",
    modifier = Modifier
        .fillMaxWidth()
        .offset(x = with(LocalDensity.current) { -scrollOffset.toDp() })
)

Upvotes: 3

Related Questions