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

View file

@ -1,13 +1,11 @@
package com.pixelized.biblib.ui.composable.screen
import androidx.compose.animation.Crossfade
import androidx.compose.animation.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.sharp.ArrowBack
import androidx.compose.material.icons.sharp.LocalLibrary
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.*
import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
@ -44,6 +42,7 @@ fun MainScreenComposablePreview() {
}
}
@OptIn(ExperimentalAnimationApi::class)
@Composable
fun MainScreenComposable(
navigation: INavigation = viewModel<NavigationViewModel>()
@ -57,11 +56,24 @@ fun MainScreenComposable(
Scaffold(
topBar = { ToolbarComposable(navigation) },
) {
Crossfade(targetState = page) {
when (it) {
is Page.HomePage -> HomePageComposable(navigation)
is Page.Detail -> DetailPageComposable(it.book)
}
AnimatedVisibility(
visible = page is Page.HomePage,
initiallyVisible = true,
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) }
}
}
}