From a9f5ba84e2643adec4e56db3ebf98823a3f660ec Mon Sep 17 00:00:00 2001 From: jakeroseman Date: Fri, 11 Oct 2024 15:46:28 +0100 Subject: [PATCH 1/2] Add auto advance pager snippets --- .../compose/snippets/SnippetsActivity.kt | 2 + .../compose/snippets/layouts/PagerSnippets.kt | 117 +++++++++++++++++- .../snippets/navigation/Destination.kt | 3 +- 3 files changed, 117 insertions(+), 5 deletions(-) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/SnippetsActivity.kt b/compose/snippets/src/main/java/com/example/compose/snippets/SnippetsActivity.kt index 645cd9e5..40d0a254 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/SnippetsActivity.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/SnippetsActivity.kt @@ -53,6 +53,7 @@ import com.example.compose.snippets.graphics.BitmapFromComposableFullSnippet import com.example.compose.snippets.graphics.BrushExamplesScreen import com.example.compose.snippets.images.ImageExamplesScreen import com.example.compose.snippets.landing.LandingScreen +import com.example.compose.snippets.layouts.PagerExamples import com.example.compose.snippets.navigation.Destination import com.example.compose.snippets.navigation.TopComponentsDestination import com.example.compose.snippets.ui.theme.SnippetsTheme @@ -87,6 +88,7 @@ class SnippetsActivity : ComponentActivity() { } Destination.ShapesExamples -> ApplyPolygonAsClipImage() Destination.SharedElementExamples -> PlaceholderSizeAnimated_Demo() + Destination.PagerExamples -> PagerExamples() } } } diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/layouts/PagerSnippets.kt b/compose/snippets/src/main/java/com/example/compose/snippets/layouts/PagerSnippets.kt index ec8e84cb..a76a0cfb 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/layouts/PagerSnippets.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/layouts/PagerSnippets.kt @@ -20,7 +20,12 @@ package com.example.compose.snippets.layouts import android.util.Log import androidx.compose.foundation.Image +import androidx.compose.foundation.LocalIndication import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.interaction.collectIsDraggedAsState +import androidx.compose.foundation.interaction.collectIsPressedAsState import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column @@ -50,6 +55,8 @@ import androidx.compose.material3.TabRow import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.getValue +import androidx.compose.runtime.remember import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.runtime.snapshotFlow import androidx.compose.ui.Alignment @@ -58,14 +65,16 @@ import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.layout.ContentScale +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.util.lerp import coil.compose.rememberAsyncImagePainter import com.example.compose.snippets.util.rememberRandomSampleImageUrl -import kotlin.math.absoluteValue +import kotlinx.coroutines.delay import kotlinx.coroutines.launch +import kotlin.math.absoluteValue /* * Copyright 2023 The Android Open Source Project @@ -83,6 +92,18 @@ import kotlinx.coroutines.launch * limitations under the License. */ +@Composable +fun PagerExamples(){ + AutoAdvancePager( + listOf( + Color.Red, + Color.Gray, + Color.Green, + Color.White + ) + ) +} + @Preview @Composable fun HorizontalPagerSample() { @@ -256,9 +277,9 @@ fun PagerWithEffect() { // scroll position. We use the absolute value which allows us to mirror // any effects for both directions val pageOffset = ( - (pagerState.currentPage - page) + pagerState - .currentPageOffsetFraction - ).absoluteValue + (pagerState.currentPage - page) + pagerState + .currentPageOffsetFraction + ).absoluteValue // We animate the alpha, between 50% and 100% alpha = lerp( @@ -392,6 +413,94 @@ fun PagerIndicator() { } } +@Composable +fun AutoAdvancePager(pageItems: List, modifier: Modifier = Modifier) { + Box(modifier = Modifier.fillMaxSize()) { + val pagerState = rememberPagerState(pageCount = { pageItems.size }) + val pagerIsDragged by pagerState.interactionSource.collectIsDraggedAsState() + + val pageInteractionSource = remember { MutableInteractionSource() } + val pageIsPressed by pageInteractionSource.collectIsPressedAsState() + + // Stop auto-advancing when pager is dragged or one of the pages is pressed + val autoAdvance = !pagerIsDragged && !pageIsPressed + + if (autoAdvance) { + LaunchedEffect(pagerState, pageInteractionSource) { + while (true) { + delay(2000) + val nextPage = (pagerState.currentPage + 1) % pageItems.size + pagerState.animateScrollToPage(nextPage) + } + } + } + + HorizontalPager( + state = pagerState + ) { page -> + Text( + text = "Page: $page", + textAlign = TextAlign.Center, + modifier = modifier + .fillMaxSize() + .background(pageItems[page]) + .clickable( + interactionSource = pageInteractionSource, + indication = LocalIndication.current + ) { + // Handle page click + } + .wrapContentSize(align = Alignment.Center) + ) + } + + PagerIndicator(pageItems.size, pagerState.currentPage) + } +} + +@Preview +@Composable +private fun AutoAdvancePagerPreview() { + val pageItems: List = listOf( + Color.Red, + Color.Gray, + Color.Green, + Color.White + ) + AutoAdvancePager(pageItems = pageItems) +} + +@Composable +fun PagerIndicator(pageCount: Int, currentPageIndex: Int, modifier: Modifier = Modifier) { + Box(modifier = Modifier.fillMaxSize()) { + Row( + modifier = Modifier + .wrapContentHeight() + .fillMaxWidth() + .align(Alignment.BottomCenter) + .padding(bottom = 8.dp), + horizontalArrangement = Arrangement.Center + ) { + repeat(pageCount) { iteration -> + val color = if (currentPageIndex == iteration) Color.DarkGray else Color.LightGray + Box( + modifier = modifier + .padding(2.dp) + .clip(CircleShape) + .background(color) + .size(16.dp) + ) + } + } + } +} + +@Preview +@Composable +private fun PagerIndicatorPreview() { + PagerIndicator(pageCount = 4, currentPageIndex = 1) +} + // [START android_compose_pager_custom_page_size] private val threePagesPerViewport = object : PageSize { override fun Density.calculateMainAxisPageSize( diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/navigation/Destination.kt b/compose/snippets/src/main/java/com/example/compose/snippets/navigation/Destination.kt index 0bce08f0..70368d31 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/navigation/Destination.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/navigation/Destination.kt @@ -23,7 +23,8 @@ enum class Destination(val route: String, val title: String) { ComponentsExamples("topComponents", "Top Compose Components"), ScreenshotExample("screenshotExample", "Screenshot Examples"), ShapesExamples("shapesExamples", "Shapes Examples"), - SharedElementExamples("sharedElement", "Shared elements") + SharedElementExamples("sharedElement", "Shared elements"), + PagerExamples("pagerExamples", "Pager examples") } // Enum class for compose components navigation screen. From cb6b32ee403ea47e993b6d62b623d20d1897a532 Mon Sep 17 00:00:00 2001 From: jakeroseman Date: Fri, 11 Oct 2024 14:49:58 +0000 Subject: [PATCH 2/2] Apply Spotless --- .../example/compose/snippets/layouts/PagerSnippets.kt | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/layouts/PagerSnippets.kt b/compose/snippets/src/main/java/com/example/compose/snippets/layouts/PagerSnippets.kt index a76a0cfb..45361ef8 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/layouts/PagerSnippets.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/layouts/PagerSnippets.kt @@ -72,9 +72,9 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.util.lerp import coil.compose.rememberAsyncImagePainter import com.example.compose.snippets.util.rememberRandomSampleImageUrl +import kotlin.math.absoluteValue import kotlinx.coroutines.delay import kotlinx.coroutines.launch -import kotlin.math.absoluteValue /* * Copyright 2023 The Android Open Source Project @@ -93,7 +93,7 @@ import kotlin.math.absoluteValue */ @Composable -fun PagerExamples(){ +fun PagerExamples() { AutoAdvancePager( listOf( Color.Red, @@ -277,9 +277,9 @@ fun PagerWithEffect() { // scroll position. We use the absolute value which allows us to mirror // any effects for both directions val pageOffset = ( - (pagerState.currentPage - page) + pagerState - .currentPageOffsetFraction - ).absoluteValue + (pagerState.currentPage - page) + pagerState + .currentPageOffsetFraction + ).absoluteValue // We animate the alpha, between 50% and 100% alpha = lerp(