From 4071c5b063f4df2555430d9a1526cd520538ce53 Mon Sep 17 00:00:00 2001 From: Rebecca Franks Date: Mon, 3 Jun 2024 16:10:00 +0100 Subject: [PATCH] Update pager examples --- app/build.gradle | 1 + .../composeplaytime/pager/CenterSnapPager.kt | 14 ++++++++++++-- .../composeplaytime/pager/LineIndicatorExample.kt | 3 +-- .../transformations/PagerFadeOutTransition.kt | 5 +++-- 4 files changed, 17 insertions(+), 6 deletions(-) diff --git a/app/build.gradle b/app/build.gradle index 24ce06e..9ecd12d 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -60,6 +60,7 @@ dependencies { implementation 'androidx.compose.animation:animation-graphics' implementation 'androidx.compose.ui:ui' + implementation 'androidx.compose.foundation:foundation:1.7.0-beta02' implementation 'androidx.compose.ui:ui-graphics:1.7.0-beta02' implementation 'androidx.compose.ui:ui-tooling-preview' implementation 'androidx.compose.material3:material3' diff --git a/app/src/main/java/dev/riggaroo/composeplaytime/pager/CenterSnapPager.kt b/app/src/main/java/dev/riggaroo/composeplaytime/pager/CenterSnapPager.kt index 224ce0b..840e3f4 100644 --- a/app/src/main/java/dev/riggaroo/composeplaytime/pager/CenterSnapPager.kt +++ b/app/src/main/java/dev/riggaroo/composeplaytime/pager/CenterSnapPager.kt @@ -7,14 +7,20 @@ import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.clickable +import androidx.compose.foundation.focusable +import androidx.compose.foundation.gestures.Orientation +import androidx.compose.foundation.gestures.snapping.SnapPosition import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.BoxWithConstraints import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width import androidx.compose.foundation.pager.HorizontalPager import androidx.compose.foundation.pager.PageSize import androidx.compose.foundation.pager.PagerDefaults @@ -24,6 +30,7 @@ import androidx.compose.foundation.pager.rememberPagerState import androidx.compose.foundation.shape.CircleShape import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -34,7 +41,9 @@ import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Density import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp import androidx.compose.ui.util.lerp import dev.riggaroo.composeplaytime.R import kotlinx.coroutines.launch @@ -63,6 +72,7 @@ import kotlin.math.absoluteValue fun CenterSnapPager() { val pagerState = rememberPagerState(pageCount = { listPageItem.size}) val coroutineScope = rememberCoroutineScope() + BoxWithConstraints(modifier = Modifier.fillMaxSize()) { Box(modifier = Modifier .fillMaxSize() @@ -83,7 +93,7 @@ fun CenterSnapPager() { state = pagerState, pagerSnapDistance = PagerSnapDistance.atMost(30), snapAnimationSpec = spring(dampingRatio = Spring.DampingRatioMediumBouncy) - ) + ), ) { page -> CircleFilterItem(filter = listPageItem[page], @@ -185,4 +195,4 @@ val listPageItem = listOf( data class Filter( val name: String, @DrawableRes val imagePreview: Int, -) \ No newline at end of file +) diff --git a/app/src/main/java/dev/riggaroo/composeplaytime/pager/LineIndicatorExample.kt b/app/src/main/java/dev/riggaroo/composeplaytime/pager/LineIndicatorExample.kt index eb6888e..34d1938 100644 --- a/app/src/main/java/dev/riggaroo/composeplaytime/pager/LineIndicatorExample.kt +++ b/app/src/main/java/dev/riggaroo/composeplaytime/pager/LineIndicatorExample.kt @@ -40,14 +40,13 @@ fun LineIndicatorExample() { val pagerState = rememberPagerState(pageCount = {pageCount}) val destinations = listOf("Maldives", "Cape Town", "London", "Greece", "New York") HorizontalPager( - beyondViewportPageCount = 2, + beyondViewportPageCount = 4, state = pagerState ) { page -> Box(modifier = Modifier.pagerFadeTransition(page, pagerState = pagerState)) { PagerSampleItem( page = page ) - CircularProgressIndicator() AnimatedVisibility( pagerState.settledPage == page, enter = fadeIn(), diff --git a/app/src/main/java/dev/riggaroo/composeplaytime/pager/transformations/PagerFadeOutTransition.kt b/app/src/main/java/dev/riggaroo/composeplaytime/pager/transformations/PagerFadeOutTransition.kt index 64c79eb..5285a49 100644 --- a/app/src/main/java/dev/riggaroo/composeplaytime/pager/transformations/PagerFadeOutTransition.kt +++ b/app/src/main/java/dev/riggaroo/composeplaytime/pager/transformations/PagerFadeOutTransition.kt @@ -16,6 +16,7 @@ package dev.riggaroo.composeplaytime.pager.transformations * limitations under the License. */ +import android.util.Log import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Box @@ -66,10 +67,10 @@ fun HorizontalPagerWithFadeTransition(modifier: Modifier = Modifier) { } } -@OptIn(ExperimentalFoundationApi::class) + fun Modifier.pagerFadeTransition(page: Int, pagerState: PagerState) = graphicsLayer { val pageOffset = pagerState.getOffsetDistanceInPages(page) - translationX = pageOffset * size.width + translationX = -pageOffset * size.width alpha = 1 - pageOffset.absoluteValue } \ No newline at end of file