Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add auto advance pager snippets #377

Merged
merged 2 commits into from
Oct 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -87,6 +88,7 @@ class SnippetsActivity : ComponentActivity() {
}
Destination.ShapesExamples -> ApplyPolygonAsClipImage()
Destination.SharedElementExamples -> PlaceholderSizeAnimated_Demo()
Destination.PagerExamples -> PagerExamples()
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -58,13 +65,15 @@ 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

/*
Expand All @@ -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() {
Expand Down Expand Up @@ -392,6 +413,94 @@ fun PagerIndicator() {
}
}

@Composable
fun AutoAdvancePager(pageItems: List<Color>, 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<Color> = 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(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down