FatttSnake/oxygen-android
1
0
Fork 0
Code Pull Requests Activity

Refactor(Navigation): Optimize navigation bar switching transition animation

Browse Source
This commit is contained in:
Fat Snake
2024-08-18 21:40:10 +08:00
parent 5839f1d394
commit 47647217f1
5 changed files with 91 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/OxygenNavHost.kt
View File

@@ -10,7 +10,8 @@ fun OxygenNavHost(
modifier: Modifier = Modifier,
appState: OxygenAppState,
onShowSnackbar: suspend (message: String, action: String?) -> Boolean,
startDestination: String
startDestination: String,
isVertical: Boolean
) {
val navController = appState.navController
NavHost(
@@ -29,9 +30,11 @@ fun OxygenNavHost(
onBackClick = navController::popBackStack
)
toolStoreScreen(
isVertical = isVertical,
onNavigateToToolView = navController::navigateToToolView
)
toolsScreen(
isVertical = isVertical,
onShowSnackbar = onShowSnackbar,
onNavigateToToolView = navController::navigateToToolView,
onNavigateToToolStore = { appState.navigateToTopLevelDestination(TopLevelDestination.ToolStore) }
@@ -40,7 +43,7 @@ fun OxygenNavHost(
onBackClick = navController::popBackStack
)
starScreen(
isVertical = isVertical
)
}
}

28
app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/StarNavigation.kt
View File

@@ -1,5 +1,9 @@
package top.fatweb.oxygen.toolbox.navigation
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.slideOutVertically
import androidx.navigation.NavController
import androidx.navigation.NavGraphBuilder
import androidx.navigation.NavOptions
@@ -10,9 +14,29 @@ const val STAR_ROUTE = "star_route"
fun NavController.navigateToStar(navOptions: NavOptions) = navigate(STAR_ROUTE, navOptions)
fun NavGraphBuilder.starScreen() {
fun NavGraphBuilder.starScreen(
isVertical: Boolean
) {
composable(
route = STAR_ROUTE
route = STAR_ROUTE,
enterTransition = {
when (initialState.destination.route) {
TOOL_STORE_ROUTE, TOOLS_ROUTE ->
if (isVertical) slideInHorizontally(initialOffsetX = { fullWidth -> fullWidth })
else slideInVertically(initialOffsetY = { fullHeight -> fullHeight })
else -> null
}
},
exitTransition = {
when (targetState.destination.route) {
TOOL_STORE_ROUTE, TOOLS_ROUTE ->
if (isVertical) slideOutHorizontally(targetOffsetX = { fullWidth -> fullWidth })
else slideOutVertically(targetOffsetY = { fullHeight -> fullHeight })
else -> null
}
}
) {
StarRoute()
}

28
app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/ToolStoreNavigation.kt
View File

@@ -1,5 +1,9 @@
package top.fatweb.oxygen.toolbox.navigation
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.slideOutVertically
import androidx.navigation.NavController
import androidx.navigation.NavGraphBuilder
import androidx.navigation.NavOptions
@@ -8,13 +12,33 @@ import top.fatweb.oxygen.toolbox.ui.tool.ToolStoreRoute
const val TOOL_STORE_ROUTE = "tool_store_route"
fun NavController.navigateToToolStore(navOptions: NavOptions? = null) = navigate(TOOL_STORE_ROUTE, navOptions)
fun NavController.navigateToToolStore(navOptions: NavOptions? = null) =
navigate(TOOL_STORE_ROUTE, navOptions)
fun NavGraphBuilder.toolStoreScreen(
isVertical: Boolean,
onNavigateToToolView: (username: String, toolId: String, preview: Boolean) -> Unit
) {
composable(
route = TOOL_STORE_ROUTE
route = TOOL_STORE_ROUTE,
enterTransition = {
when (initialState.destination.route) {
TOOLS_ROUTE, STAR_ROUTE ->
if (isVertical) slideInHorizontally(initialOffsetX = { fullWidth -> -fullWidth })
else slideInVertically(initialOffsetY = { fullHeight -> -fullHeight })
else -> null
}
},
exitTransition = {
when (targetState.destination.route) {
TOOLS_ROUTE, STAR_ROUTE ->
if (isVertical) slideOutHorizontally(targetOffsetX = { fullWidth -> -fullWidth })
else slideOutVertically(targetOffsetY = { fullHeight -> -fullHeight })
else -> null
}
}
) {
ToolStoreRoute(
onNavigateToToolView = onNavigateToToolView

33
app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/ToolsNavigation.kt
View File

@@ -1,5 +1,9 @@
package top.fatweb.oxygen.toolbox.navigation
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.slideOutVertically
import androidx.navigation.NavController
import androidx.navigation.NavGraphBuilder
import androidx.navigation.NavOptions
@@ -11,12 +15,39 @@ const val TOOLS_ROUTE = "tools_route"
fun NavController.navigateToTools(navOptions: NavOptions) = navigate(TOOLS_ROUTE, navOptions)
fun NavGraphBuilder.toolsScreen(
isVertical: Boolean,
onShowSnackbar: suspend (message: String, action: String?) -> Boolean,
onNavigateToToolView: (username: String, toolId: String, preview: Boolean) -> Unit,
onNavigateToToolStore: () -> Unit
) {
composable(
route = TOOLS_ROUTE
route = TOOLS_ROUTE,
enterTransition = {
when (initialState.destination.route) {
TOOL_STORE_ROUTE ->
if (isVertical) slideInHorizontally(initialOffsetX = { fullWidth -> fullWidth })
else slideInVertically(initialOffsetY = { fullHeight -> fullHeight })
STAR_ROUTE ->
if (isVertical) slideInHorizontally(initialOffsetX = { fullWidth -> -fullWidth })
else slideInVertically(initialOffsetY = { fullHeight -> -fullHeight })
else -> null
}
},
exitTransition = {
when (targetState.destination.route) {
TOOL_STORE_ROUTE ->
if (isVertical) slideOutHorizontally(targetOffsetX = { fullWidth -> fullWidth })
else slideOutVertically(targetOffsetY = { fullHeight -> fullHeight })
STAR_ROUTE ->
if (isVertical) slideOutHorizontally(targetOffsetX = { fullWidth -> -fullWidth })
else slideOutVertically(targetOffsetY = { fullHeight -> -fullHeight })
else -> null
}
}
) {
ToolsRoute(
onShowSnackbar = onShowSnackbar,