-
Notifications
You must be signed in to change notification settings - Fork 72
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
WIP - Shared elements experimenting #1330
Closed
Closed
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
380a0ab
setup
stagg a573bbe
LocalSharedTransitionScope
stagg 5080cc1
SharedElementAnimatedContentScope
stagg 0c7e8d5
Add to root of Activity
stagg 4f7af28
Pet detail/stuff
stagg 23eb218
Fix animation, see if we can animate into an overlay
stagg 8a50fdd
Merge branch 'main' into js-shared-element-wip
stagg 3296b26
Create a build-able `AnimatedNavDecoration`
stagg File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
133 changes: 133 additions & 0 deletions
133
...src/androidMain/kotlin/com/slack/circuit/star/petdetail/PetPhotoCarouselScreen.android.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| package com.slack.circuit.star.petdetail | ||
|
|
||
| import androidx.compose.animation.ExperimentalAnimationApi | ||
| import androidx.compose.animation.ExperimentalSharedTransitionApi | ||
| import androidx.compose.animation.animateContentSize | ||
| import androidx.compose.animation.core.tween | ||
| import androidx.compose.foundation.ExperimentalFoundationApi | ||
| import androidx.compose.foundation.focusable | ||
| import androidx.compose.foundation.layout.Column | ||
| import androidx.compose.foundation.layout.fillMaxSize | ||
| import androidx.compose.foundation.layout.fillMaxWidth | ||
| import androidx.compose.foundation.layout.padding | ||
| import androidx.compose.foundation.pager.rememberPagerState | ||
| import androidx.compose.material3.MaterialTheme | ||
| import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi | ||
| import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass | ||
| import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.runtime.LaunchedEffect | ||
| import androidx.compose.runtime.remember | ||
| import androidx.compose.ui.Alignment | ||
| import androidx.compose.ui.Modifier | ||
| import androidx.compose.ui.focus.FocusRequester | ||
| import androidx.compose.ui.focus.focusRequester | ||
| import androidx.compose.ui.geometry.Rect | ||
| import androidx.compose.ui.input.key.Key | ||
| import androidx.compose.ui.input.key.KeyEventType | ||
| import androidx.compose.ui.input.key.key | ||
| import androidx.compose.ui.input.key.onKeyEvent | ||
| import androidx.compose.ui.input.key.type | ||
| import androidx.compose.ui.platform.testTag | ||
| import androidx.compose.ui.unit.dp | ||
| import coil3.SingletonImageLoader | ||
| import coil3.compose.LocalPlatformContext | ||
| import coil3.request.ImageRequest.Builder | ||
| import com.slack.circuit.codegen.annotations.CircuitInject | ||
| import com.slack.circuit.runtime.internal.rememberStableCoroutineScope | ||
| import com.slack.circuit.star.di.AppScope | ||
| import com.slack.circuit.star.petdetail.PetPhotoCarouselScreen.State | ||
| import com.slack.circuit.star.petdetail.PetPhotoCarouselTestConstants.CAROUSEL_TAG | ||
| import com.slack.circuit.star.ui.HorizontalPagerIndicator | ||
| import com.slack.circuit.star.ui.SharedElementTransitionScope | ||
| import com.slack.circuit.star.ui.sharedElementAnimatedContentScope | ||
| import kotlinx.coroutines.launch | ||
|
|
||
| @OptIn( | ||
| ExperimentalSharedTransitionApi::class, | ||
| ExperimentalMaterial3WindowSizeClassApi::class, | ||
| ExperimentalFoundationApi::class, | ||
| ExperimentalAnimationApi::class, | ||
| ) | ||
| @Composable | ||
| @CircuitInject(PetPhotoCarouselScreen::class, AppScope::class) | ||
| actual fun PetPhotoCarousel(state: State, modifier: Modifier) = SharedElementTransitionScope { | ||
| val (id, name, photoUrls, photoUrlMemoryCacheKey) = state | ||
| val context = LocalPlatformContext.current | ||
| // Prefetch images | ||
| LaunchedEffect(Unit) { | ||
| for (url in photoUrls) { | ||
| if (url.isBlank()) continue | ||
| val request = Builder(context).data(url).build() | ||
| SingletonImageLoader.get(context).enqueue(request) | ||
| } | ||
| } | ||
|
|
||
| val totalPhotos = photoUrls.size | ||
| val pagerState = rememberPagerState { totalPhotos } | ||
| val scope = rememberStableCoroutineScope() | ||
| val requester = remember { FocusRequester() } | ||
| @Suppress("MagicNumber") | ||
| val columnModifier = | ||
| when (calculateWindowSizeClass().widthSizeClass) { | ||
| WindowWidthSizeClass.Medium, | ||
| WindowWidthSizeClass.Expanded -> modifier.fillMaxWidth(0.5f) | ||
| else -> modifier.fillMaxSize() | ||
| } | ||
| val boundsTransform = { _: Rect, _: Rect -> tween<Rect>(1400) } | ||
| Column( | ||
| columnModifier | ||
| .testTag(CAROUSEL_TAG) | ||
| // Some images are different sizes. We probably want to constrain them to the same common | ||
| // size though | ||
| .animateContentSize() | ||
| .focusRequester(requester) | ||
| .focusable() | ||
| .onKeyEvent { event -> | ||
| if (event.type != KeyEventType.KeyUp) return@onKeyEvent false | ||
| val index = | ||
| when (event.key) { | ||
| Key.DirectionRight -> { | ||
| pagerState.currentPage.inc().takeUnless { it >= totalPhotos } ?: -1 | ||
| } | ||
| Key.DirectionLeft -> { | ||
| pagerState.currentPage.dec().takeUnless { it < 0 } ?: -1 | ||
| } | ||
| else -> -1 | ||
| } | ||
| if (index == -1) { | ||
| false | ||
| } else { | ||
| scope.launch { pagerState.animateScrollToPage(index) } | ||
| true | ||
| } | ||
| } | ||
| ) { | ||
| PhotoPager( | ||
| pagerState = pagerState, | ||
| photoUrls = photoUrls, | ||
| name = name, | ||
| photoUrlMemoryCacheKey = photoUrlMemoryCacheKey, | ||
| modifier = | ||
| Modifier.sharedBounds( | ||
| sharedContentState = rememberSharedContentState(key = "animal-${id}"), | ||
| animatedVisibilityScope = sharedElementAnimatedContentScope(), | ||
| boundsTransform = boundsTransform, | ||
| ) | ||
| .sharedElement( | ||
| state = rememberSharedContentState(key = "animal-image-${id}"), | ||
| animatedVisibilityScope = sharedElementAnimatedContentScope(), | ||
| ), | ||
| ) | ||
|
|
||
| HorizontalPagerIndicator( | ||
| pagerState = pagerState, | ||
| pageCount = totalPhotos, | ||
| modifier = Modifier.align(Alignment.CenterHorizontally).padding(16.dp), | ||
| activeColor = MaterialTheme.colorScheme.onBackground, | ||
| ) | ||
| } | ||
|
|
||
| // Focus the pager so we can cycle through it with arrow keys | ||
| LaunchedEffect(Unit) { requester.requestFocus() } | ||
| } |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there a particular reason why you are adding both sharedBounds and sharedElement on this item?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nope! Was moving them around and alternating between the two.