diff --git a/samples/star/src/main/kotlin/com/slack/circuit/star/petdetail/PetDetail.kt b/samples/star/src/main/kotlin/com/slack/circuit/star/petdetail/PetDetail.kt index 81b7dd097..09d1ae52d 100644 --- a/samples/star/src/main/kotlin/com/slack/circuit/star/petdetail/PetDetail.kt +++ b/samples/star/src/main/kotlin/com/slack/circuit/star/petdetail/PetDetail.kt @@ -23,6 +23,7 @@ import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue +import androidx.compose.runtime.movableContentOf import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.produceState import androidx.compose.runtime.remember @@ -200,46 +201,52 @@ private fun UnknownAnimal(paddingValues: PaddingValues) { private fun ShowAnimal( state: PetDetailScreen.State.Success, padding: PaddingValues, -) = - when (LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE) { - true -> ShowAnimalLandscape(state, padding) - false -> ShowAnimalPortrait(state, padding) +) { + val carouselContent = remember { + movableContentOf { + CircuitContent( + PetPhotoCarouselScreen( + name = state.name, + photoUrls = state.photoUrls, + photoUrlMemoryCacheKey = state.photoUrlMemoryCacheKey, + ) + ) + } + } + return when (LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE) { + true -> ShowAnimalLandscape(state, padding, carouselContent) + false -> ShowAnimalPortrait(state, padding, carouselContent) } +} @Composable -private fun ShowAnimalLandscape(state: PetDetailScreen.State.Success, padding: PaddingValues) { +private fun ShowAnimalLandscape( + state: PetDetailScreen.State.Success, + padding: PaddingValues, + carouselContent: @Composable () -> Unit, +) { Row( modifier = Modifier.padding(padding), horizontalArrangement = spacedBy(16.dp), ) { - CircuitContent( - PetPhotoCarouselScreen( - name = state.name, - photoUrls = state.photoUrls, - photoUrlMemoryCacheKey = state.photoUrlMemoryCacheKey, - ) - ) + carouselContent() LazyColumn(verticalArrangement = spacedBy(16.dp)) { petDetailDescriptions(state) } } } @Composable -private fun ShowAnimalPortrait(state: PetDetailScreen.State.Success, padding: PaddingValues) { +private fun ShowAnimalPortrait( + state: PetDetailScreen.State.Success, + padding: PaddingValues, + carouselContent: @Composable () -> Unit, +) { LazyColumn( modifier = Modifier.padding(padding).testTag(ANIMAL_CONTAINER_TAG), contentPadding = PaddingValues(16.dp), verticalArrangement = spacedBy(16.dp), horizontalAlignment = Alignment.CenterHorizontally, ) { - item { - CircuitContent( - PetPhotoCarouselScreen( - name = state.name, - photoUrls = state.photoUrls, - photoUrlMemoryCacheKey = state.photoUrlMemoryCacheKey, - ) - ) - } + item { carouselContent() } petDetailDescriptions(state) } } diff --git a/samples/star/src/main/kotlin/com/slack/circuit/star/petdetail/PetPhotoCarousel.kt b/samples/star/src/main/kotlin/com/slack/circuit/star/petdetail/PetPhotoCarousel.kt index eb89bba4f..2fbf3b185 100644 --- a/samples/star/src/main/kotlin/com/slack/circuit/star/petdetail/PetPhotoCarousel.kt +++ b/samples/star/src/main/kotlin/com/slack/circuit/star/petdetail/PetPhotoCarousel.kt @@ -9,6 +9,7 @@ import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.focusable import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding @@ -167,7 +168,7 @@ internal fun PetPhotoCarousel(state: PetPhotoCarouselScreen.State, modifier: Mod pagerState = pagerState, photoUrls = photoUrls, name = name, - photoUrlMemoryCacheKey = photoUrlMemoryCacheKey + photoUrlMemoryCacheKey = photoUrlMemoryCacheKey, ) HorizontalPagerIndicator( @@ -187,6 +188,7 @@ private fun PagerState.calculateCurrentOffsetForPage(page: Int): Float { return (currentPage - page) + currentPageOffsetFraction } +@Suppress("LongParameterList") @OptIn(ExperimentalFoundationApi::class) @Composable private fun PhotoPager( @@ -194,17 +196,19 @@ private fun PhotoPager( pagerState: PagerState, photoUrls: ImmutableList, name: String, + modifier: Modifier = Modifier, photoUrlMemoryCacheKey: String? = null, ) { HorizontalPager( pageCount = count, state = pagerState, key = photoUrls::get, + modifier = modifier, contentPadding = PaddingValues(16.dp), ) { page -> Card( modifier = - Modifier.graphicsLayer { + Modifier.aspectRatio(1f).graphicsLayer { // Calculate the absolute offset for the current page from the // scroll position. We use the absolute value which allows us to mirror // any effects for both directions @@ -234,7 +238,7 @@ private fun PhotoPager( } .build(), contentDescription = name, - contentScale = ContentScale.FillWidth, + contentScale = ContentScale.Crop, ) } }