Update pager examples

riggaroo · Jun 3, 2024 · 4071c5b · 4071c5b
1 parent 1dedd1b
commit 4071c5b
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git 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
@@ -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,
-)
+)
diff --git 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/...rc/main/java/dev/riggaroo/composeplaytime/pager/transformations/PagerFadeOutTransition.kt b/...rc/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
     }