Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jetpack Compose Pagerを触ってみよう

Jetpack Compose Pagerを触ってみよう

Avatar for Yusaku Tanaka

Yusaku Tanaka

April 29, 2023
Tweet

More Decks by Yusaku Tanaka

Other Decks in Programming

Transcript

  1. About me saku (Yusaku Tanaka) ・Twitter: @imsaku ・DeNA Co., Ltd.

    ・佐賀県在住 ・佐賀→福岡→佐賀→福岡→佐賀
  2. Compose Foundation 1.4.0~ > Introduce HorizontalPager and VerticalPager, a way

    of showing composables in a Pager manner. https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.4.0
  3. Accompanist Pager > This library is deprecated, with official pager

    support in androidx.compose.foundation.pager. The original documentation is below the migration guide. https://google.github.io/accompanist/pager/
  4. Horizontal Pager @Composable fun BasicHorizontalPager() { Scaffold(...) { padding .>

    Column(...) { val pagerState = rememberPagerState() val pageCount = 5 HorizontalPager( pageCount = pageCount, state = pagerState, contentPadding = PaddingValues(16.dp), pageSpacing = 8.dp ) { page .> ... }
  5. Horizontal Pager @Composable fun BasicHorizontalPager() { Scaffold(...) { padding .>

    Column(...) { val pagerState = rememberPagerState() val pageCount = 5 HorizontalPager( pageCount = pageCount, state = pagerState, contentPadding = PaddingValues(16.dp), pageSpacing = 8.dp ) { page .> ... }
  6. Horizontal Pager @Composable fun BasicHorizontalPager() { Scaffold(...) { padding .>

    Column(...) { val pagerState = rememberPagerState() val pageCount = 5 HorizontalPager( pageCount = pageCount, state = pagerState, contentPadding = PaddingValues(16.dp), pageSpacing = 8.dp ) { page .> ... }
  7. Horizontal Pager @Composable fun BasicHorizontalPager() { Scaffold(...) { padding .>

    Column(...) { val pagerState = rememberPagerState() val pageCount = 5 HorizontalPager( pageCount = pageCount, state = pagerState, contentPadding = PaddingValues(16.dp), pageSpacing = 8.dp ) { page .> ... }
  8. Horizontal Pager @Composable fun BasicHorizontalPager() { ... val pagerState =

    rememberPagerState() val pageCount = 5 HorizontalPager(...) { page .> Box( modifier = Modifier .background(color = colors.random()) ... ) { Text( text = "$page", ... ) } }
  9. Horizontal Pager @Composable fun BasicHorizontalPager() { ... val pagerState =

    rememberPagerState() val pageCount = 5 HorizontalPager(...) { page .> Box( modifier = Modifier .background(color = colors.random()) ... ) { Text( text = "$page", ... ) } }
  10. Pager Indicator @Composable fun SimplePagerIndicator(pagerState: PagerState, pageCount: Int) { Row(...)

    { repeat(pageCount) { val color = if (pagerState.currentPage .= it) { Color.DarkGray } else { Color.LightGray } Box( modifier = Modifier.padding(4.dp).clip(CircleShape) .background(color).size(16.dp) ) } } }
  11. Pager Indicator @Composable fun SimplePagerIndicator(pagerState: PagerState, pageCount: Int) { Row(...)

    { repeat(pageCount) { val color = if (pagerState.currentPage .= it) { Color.DarkGray } else { Color.LightGray } Box( modifier = Modifier.padding(4.dp).clip(CircleShape) .background(color).size(16.dp) ) } } }
  12. Pager Indicator @Composable fun SimplePagerIndicator(pagerState: PagerState, pageCount: Int) { Row(...)

    { repeat(pageCount) { val color = if (pagerState.currentPage .= it) { Color.DarkGray } else { Color.LightGray } Box( modifier = Modifier.padding(4.dp).clip(CircleShape) .background(color).size(16.dp) ) } } }
  13. Pager Indicator @Composable fun SimplePagerIndicator(pagerState: PagerState, pageCount: Int) { Row(...)

    { repeat(pageCount) { val color = if (pagerState.currentPage .= it) { Color.DarkGray } else { Color.LightGray } Box( modifier = Modifier.padding(4.dp).clip(CircleShape) .background(color).size(16.dp) ) } } }
  14. Pager Indicator @Composable fun SimplePagerIndicator(pagerState: PagerState, pageCount: Int) { Row(...)

    { repeat(pageCount) { val color = if (pagerState.currentPage .= it) { Color.DarkGray } else { Color.LightGray } Box( modifier = Modifier.padding(4.dp).clip(CircleShape) .background(color).size(16.dp) ) } } }
  15. HorizontalPager(...) { page .> Card( modifier = Modifier.fillMaxWidth().height(300.dp) .graphicsLayer {

    val pageOffset = ((pagerState.currentPage - page) + pagerState .currentPageOffsetFraction).absoluteValue lerp( start = 0.6f, stop = 1f, fraction = 1f - pageOffset.coerceIn(0f, 1f) ).also { scale .> scaleX = scale scaleY = scale } alpha = lerp( start = 0.2f, stop = 1f, fraction = 1f - pageOffset.coerceIn(0f, 1f) ) } ) {...}
  16. HorizontalPager(...) { page .> Card( modifier = Modifier.fillMaxWidth().height(300.dp) .graphicsLayer {

    val pageOffset = ((pagerState.currentPage - page) + pagerState .currentPageOffsetFraction).absoluteValue lerp( start = 0.6f, stop = 1f, fraction = 1f - pageOffset.coerceIn(0f, 1f) ).also { scale .> scaleX = scale scaleY = scale } alpha = lerp( start = 0.2f, stop = 1f, fraction = 1f - pageOffset.coerceIn(0f, 1f) ) } ) {...}
  17. HorizontalPager(...) { page .> Card( modifier = Modifier.fillMaxWidth().height(300.dp) .graphicsLayer {

    val pageOffset = ((pagerState.currentPage - page) + pagerState .currentPageOffsetFraction).absoluteValue lerp( start = 0.6f, stop = 1f, fraction = 1f - pageOffset.coerceIn(0f, 1f) ).also { scale .> scaleX = scale scaleY = scale } alpha = lerp( start = 0.2f, stop = 1f, fraction = 1f - pageOffset.coerceIn(0f, 1f) ) } ) {...}
  18. HorizontalPager(...) { page .> Card( modifier = Modifier.fillMaxWidth().height(300.dp) .graphicsLayer {

    val pageOffset = ((pagerState.currentPage - page) + pagerState .currentPageOffsetFraction).absoluteValue lerp( start = 0.6f, stop = 1f, fraction = 1f - pageOffset.coerceIn(0f, 1f) ).also { scale .> scaleX = scale scaleY = scale } alpha = lerp( start = 0.2f, stop = 1f, fraction = 1f - pageOffset.coerceIn(0f, 1f) ) } ) {...}
  19. HorizontalPager(...) { page .> Card( modifier = Modifier.fillMaxWidth().height(300.dp) .graphicsLayer {

    val pageOffset = ((pagerState.currentPage - page) + pagerState .currentPageOffsetFraction).absoluteValue lerp( start = 0.6f, stop = 1f, fraction = 1f - pageOffset.coerceIn(0f, 1f) ).also { scale .> scaleX = scale scaleY = scale } alpha = lerp( start = 0.2f, stop = 1f, fraction = 1f - pageOffset.coerceIn(0f, 1f) ) } ) {...}
  20. まとめ ・Compose Foundation 1.4.0でPagerが導入された ・ただし、Pager Indicatorは実装されていない ・Comose Foundation PagerとAccompanist Pager

    Indicatorの併用はできる ・Modifier.graphicsLayerとPagerState.currentPageOffsetFractionを組み合わせて Pagerに視覚エフェクトを実装できる