change transition between list and detail.

This commit is contained in:
Thomas Andres Gomez 2021-05-08 23:03:30 +02:00
parent a8a0caf3dc
commit 575b94c81b
2 changed files with 23 additions and 9 deletions

2
.idea/misc.xml generated
View file

@ -134,6 +134,8 @@
<entry key="../../../../../layout/compose-model-1620504542890.xml" value="0.46511627906976744" /> <entry key="../../../../../layout/compose-model-1620504542890.xml" value="0.46511627906976744" />
<entry key="../../../../../layout/compose-model-1620504644429.xml" value="0.3796844181459566" /> <entry key="../../../../../layout/compose-model-1620504644429.xml" value="0.3796844181459566" />
<entry key="../../../../../layout/compose-model-1620505978232.xml" value="0.46511627906976744" /> <entry key="../../../../../layout/compose-model-1620505978232.xml" value="0.46511627906976744" />
<entry key="../../../../../layout/compose-model-1620506082418.xml" value="0.28125" />
<entry key="../../../../../layout/compose-model-1620506090849.xml" value="0.23514851485148514" />
<entry key="app/src/main/res/drawable-v24/ic_launcher_foreground.xml" value="0.2898148148148148" /> <entry key="app/src/main/res/drawable-v24/ic_launcher_foreground.xml" value="0.2898148148148148" />
<entry key="app/src/main/res/drawable/ic_baseline_local_library_24.xml" value="0.25462962962962965" /> <entry key="app/src/main/res/drawable/ic_baseline_local_library_24.xml" value="0.25462962962962965" />
<entry key="app/src/main/res/drawable/ic_google.xml" value="0.2962962962962963" /> <entry key="app/src/main/res/drawable/ic_google.xml" value="0.2962962962962963" />

View file

@ -1,13 +1,11 @@
package com.pixelized.biblib.ui.composable.screen package com.pixelized.biblib.ui.composable.screen
import androidx.compose.animation.Crossfade import androidx.compose.animation.*
import androidx.compose.material.* import androidx.compose.material.*
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.sharp.ArrowBack import androidx.compose.material.icons.sharp.ArrowBack
import androidx.compose.material.icons.sharp.LocalLibrary import androidx.compose.material.icons.sharp.LocalLibrary
import androidx.compose.runtime.Composable import androidx.compose.runtime.*
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.livedata.observeAsState import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
@ -44,6 +42,7 @@ fun MainScreenComposablePreview() {
} }
} }
@OptIn(ExperimentalAnimationApi::class)
@Composable @Composable
fun MainScreenComposable( fun MainScreenComposable(
navigation: INavigation = viewModel<NavigationViewModel>() navigation: INavigation = viewModel<NavigationViewModel>()
@ -57,11 +56,24 @@ fun MainScreenComposable(
Scaffold( Scaffold(
topBar = { ToolbarComposable(navigation) }, topBar = { ToolbarComposable(navigation) },
) { ) {
Crossfade(targetState = page) { AnimatedVisibility(
when (it) { visible = page is Page.HomePage,
is Page.HomePage -> HomePageComposable(navigation) initiallyVisible = true,
is Page.Detail -> DetailPageComposable(it.book) enter = slideInHorizontally(initialOffsetX = { width -> -width }),
} exit = slideOutHorizontally(targetOffsetX = { width -> -width }),
) {
HomePageComposable(navigation)
}
AnimatedVisibility(
visible = page is Page.Detail,
initiallyVisible = false,
enter = slideInHorizontally(initialOffsetX = { width -> width }),
exit = slideOutHorizontally(targetOffsetX = { width -> width }),
) {
// small trick to display the detail page during animation exit.
var currentPage by remember { mutableStateOf<Page.Detail?>(null) }
currentPage = page as? Page.Detail ?: currentPage
currentPage?.let { DetailPageComposable(it.book) }
} }
} }
} }