From 0d0477e4ff926a3d80a971143efde190006df946 Mon Sep 17 00:00:00 2001 From: junkfood <69683722+JunkFood02@users.noreply.github.com> Date: Wed, 5 Jun 2024 19:41:57 +0900 Subject: [PATCH] fix(ui): migrate to androidx-navigation-animation & ui bug fix (#717) --- app/build.gradle | 1 - .../ash/reader/ui/ext/NavGraphBuilderExt.kt | 41 +----------- .../me/ash/reader/ui/page/common/HomeEntry.kt | 63 ++++++++++--------- .../settings/accounts/AccountDetailsPage.kt | 4 +- .../ui/page/settings/accounts/AccountsPage.kt | 5 +- .../page/settings/accounts/AddAccountsPage.kt | 5 +- 6 files changed, 41 insertions(+), 78 deletions(-) diff --git a/app/build.gradle b/app/build.gradle index 039d3728..6d63b54f 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -181,7 +181,6 @@ dependencies { // https://github.com/google/accompanist/releases implementation "com.google.accompanist:accompanist-pager:$accompanist" implementation "com.google.accompanist:accompanist-flowlayout:$accompanist" - implementation "com.google.accompanist:accompanist-navigation-animation:$accompanist" implementation "com.google.accompanist:accompanist-swiperefresh:$accompanist" implementation platform("androidx.compose:compose-bom:$composeBom") diff --git a/app/src/main/java/me/ash/reader/ui/ext/NavGraphBuilderExt.kt b/app/src/main/java/me/ash/reader/ui/ext/NavGraphBuilderExt.kt index f09eb301..ef1656d5 100644 --- a/app/src/main/java/me/ash/reader/ui/ext/NavGraphBuilderExt.kt +++ b/app/src/main/java/me/ash/reader/ui/ext/NavGraphBuilderExt.kt @@ -9,55 +9,18 @@ package me.ash.reader.ui.ext import androidx.compose.animation.* -import androidx.compose.animation.core.tween import androidx.compose.runtime.Composable import androidx.navigation.NamedNavArgument import androidx.navigation.NavBackStackEntry import androidx.navigation.NavDeepLink import androidx.navigation.NavGraphBuilder -import com.google.accompanist.navigation.animation.composable +import androidx.navigation.compose.composable import me.ash.reader.ui.motion.materialSharedAxisXIn import me.ash.reader.ui.motion.materialSharedAxisXOut -@OptIn(ExperimentalAnimationApi::class) -@Deprecated(message = "Migrate to Forward and backward transition", replaceWith = ReplaceWith("forwardAndBackwardComposable(route = route, arguments = arguments, deepLinks = deepLinks) { content() }") -) -fun NavGraphBuilder.animatedComposable( - route: String, - arguments: List = emptyList(), - deepLinks: List = emptyList(), - content: @Composable AnimatedVisibilityScope.(NavBackStackEntry) -> Unit, -) = composable( - route = route, - arguments = arguments, - deepLinks = deepLinks, - enterTransition = { - fadeIn(animationSpec = tween(220, delayMillis = 90)) + - scaleIn( - initialScale = 0.92f, - animationSpec = tween(220, delayMillis = 90) - ) - }, - exitTransition = { - fadeOut(animationSpec = tween(90)) - }, - popEnterTransition = { - fadeIn(animationSpec = tween(220, delayMillis = 90)) + - scaleIn( - initialScale = 0.92f, - animationSpec = tween(220, delayMillis = 90) - ) - }, - popExitTransition = { - fadeOut(animationSpec = tween(90)) - }, - content = content -) - private const val INITIAL_OFFSET_FACTOR = 0.10f -@OptIn(ExperimentalAnimationApi::class) -fun NavGraphBuilder.forwardAndBackwardComposable( +fun NavGraphBuilder.animatedComposable( route: String, arguments: List = emptyList(), deepLinks: List = emptyList(), diff --git a/app/src/main/java/me/ash/reader/ui/page/common/HomeEntry.kt b/app/src/main/java/me/ash/reader/ui/page/common/HomeEntry.kt index b45635cb..41cce368 100644 --- a/app/src/main/java/me/ash/reader/ui/page/common/HomeEntry.kt +++ b/app/src/main/java/me/ash/reader/ui/page/common/HomeEntry.kt @@ -3,6 +3,7 @@ package me.ash.reader.ui.page.common import android.util.Log import androidx.compose.animation.ExperimentalAnimationApi import androidx.compose.foundation.background +import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.DisposableEffect @@ -14,8 +15,8 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalContext import androidx.hilt.navigation.compose.hiltViewModel -import com.google.accompanist.navigation.animation.AnimatedNavHost -import com.google.accompanist.navigation.animation.rememberAnimatedNavController +import androidx.navigation.compose.NavHost +import androidx.navigation.compose.rememberNavController import kotlinx.coroutines.delay import kotlinx.coroutines.flow.collectLatest import me.ash.reader.domain.model.general.Filter @@ -23,7 +24,7 @@ import me.ash.reader.infrastructure.preference.LocalDarkTheme import me.ash.reader.infrastructure.preference.LocalReadingDarkTheme import me.ash.reader.ui.ext.collectAsStateValue import me.ash.reader.ui.ext.findActivity -import me.ash.reader.ui.ext.forwardAndBackwardComposable +import me.ash.reader.ui.ext.animatedComposable import me.ash.reader.ui.ext.initialFilter import me.ash.reader.ui.ext.initialPage import me.ash.reader.ui.ext.isFirstLaunch @@ -54,7 +55,7 @@ import me.ash.reader.ui.page.settings.troubleshooting.TroubleshootingPage import me.ash.reader.ui.page.startup.StartupPage import me.ash.reader.ui.theme.AppTheme -@OptIn(ExperimentalAnimationApi::class, androidx.compose.material.ExperimentalMaterialApi::class) +@OptIn(androidx.compose.material.ExperimentalMaterialApi::class) @Composable fun HomeEntry( homeViewModel: HomeViewModel = hiltViewModel(), @@ -64,7 +65,7 @@ fun HomeEntry( var isReadingPage by rememberSaveable { mutableStateOf(false) } val filterUiState = homeViewModel.filterUiState.collectAsStateValue() val subscribeUiState = subscribeViewModel.subscribeUiState.collectAsStateValue() - val navController = rememberAnimatedNavController() + val navController = rememberNavController() val intent by rememberSaveable { mutableStateOf(context.findActivity()?.intent) } var openArticleId by rememberSaveable { @@ -142,104 +143,106 @@ fun HomeEntry( else LocalDarkTheme.current.isDarkTheme() ) { - AnimatedNavHost( - modifier = Modifier.background(MaterialTheme.colorScheme.surface), + NavHost( + modifier = Modifier + .fillMaxSize() + .background(MaterialTheme.colorScheme.surface), navController = navController, startDestination = if (context.isFirstLaunch) RouteName.STARTUP else RouteName.FEEDS, ) { // Startup - forwardAndBackwardComposable(route = RouteName.STARTUP) { + animatedComposable(route = RouteName.STARTUP) { StartupPage(navController) } // Home - forwardAndBackwardComposable(route = RouteName.FEEDS) { + animatedComposable(route = RouteName.FEEDS) { FeedsPage( navController = navController, homeViewModel = homeViewModel, subscribeViewModel = subscribeViewModel ) } - forwardAndBackwardComposable(route = RouteName.FLOW) { + animatedComposable(route = RouteName.FLOW) { FlowPage( navController = navController, homeViewModel = homeViewModel, ) } - forwardAndBackwardComposable(route = "${RouteName.READING}/{articleId}") { + animatedComposable(route = "${RouteName.READING}/{articleId}") { ReadingPage(navController = navController, homeViewModel = homeViewModel) } // Settings - forwardAndBackwardComposable(route = RouteName.SETTINGS) { + animatedComposable(route = RouteName.SETTINGS) { SettingsPage(navController) } // Accounts - forwardAndBackwardComposable(route = RouteName.ACCOUNTS) { + animatedComposable(route = RouteName.ACCOUNTS) { AccountsPage(navController) } - forwardAndBackwardComposable(route = "${RouteName.ACCOUNT_DETAILS}/{accountId}") { + animatedComposable(route = "${RouteName.ACCOUNT_DETAILS}/{accountId}") { AccountDetailsPage(navController) } - forwardAndBackwardComposable(route = RouteName.ADD_ACCOUNTS) { + animatedComposable(route = RouteName.ADD_ACCOUNTS) { AddAccountsPage(navController) } // Color & Style - forwardAndBackwardComposable(route = RouteName.COLOR_AND_STYLE) { + animatedComposable(route = RouteName.COLOR_AND_STYLE) { ColorAndStylePage(navController) } - forwardAndBackwardComposable(route = RouteName.DARK_THEME) { + animatedComposable(route = RouteName.DARK_THEME) { DarkThemePage(navController) } - forwardAndBackwardComposable(route = RouteName.FEEDS_PAGE_STYLE) { + animatedComposable(route = RouteName.FEEDS_PAGE_STYLE) { FeedsPageStylePage(navController) } - forwardAndBackwardComposable(route = RouteName.FLOW_PAGE_STYLE) { + animatedComposable(route = RouteName.FLOW_PAGE_STYLE) { FlowPageStylePage(navController) } - forwardAndBackwardComposable(route = RouteName.READING_PAGE_STYLE) { + animatedComposable(route = RouteName.READING_PAGE_STYLE) { ReadingStylePage(navController) } - forwardAndBackwardComposable(route = RouteName.READING_DARK_THEME) { + animatedComposable(route = RouteName.READING_DARK_THEME) { ReadingDarkThemePage(navController) } - forwardAndBackwardComposable(route = RouteName.READING_PAGE_TITLE) { + animatedComposable(route = RouteName.READING_PAGE_TITLE) { ReadingTitlePage(navController) } - forwardAndBackwardComposable(route = RouteName.READING_PAGE_TEXT) { + animatedComposable(route = RouteName.READING_PAGE_TEXT) { ReadingTextPage(navController) } - forwardAndBackwardComposable(route = RouteName.READING_PAGE_IMAGE) { + animatedComposable(route = RouteName.READING_PAGE_IMAGE) { ReadingImagePage(navController) } - forwardAndBackwardComposable(route = RouteName.READING_PAGE_VIDEO) { + animatedComposable(route = RouteName.READING_PAGE_VIDEO) { ReadingVideoPage(navController) } // Interaction - forwardAndBackwardComposable(route = RouteName.INTERACTION) { + animatedComposable(route = RouteName.INTERACTION) { InteractionPage(navController) } // Languages - forwardAndBackwardComposable(route = RouteName.LANGUAGES) { + animatedComposable(route = RouteName.LANGUAGES) { LanguagesPage(navController = navController) } // Troubleshooting - forwardAndBackwardComposable(route = RouteName.TROUBLESHOOTING) { + animatedComposable(route = RouteName.TROUBLESHOOTING) { TroubleshootingPage(navController = navController) } // Tips & Support - forwardAndBackwardComposable(route = RouteName.TIPS_AND_SUPPORT) { + animatedComposable(route = RouteName.TIPS_AND_SUPPORT) { TipsAndSupportPage(navController) } - forwardAndBackwardComposable(route = RouteName.LICENSE_LIST) { + animatedComposable(route = RouteName.LICENSE_LIST) { LicenseListPage(navController) } } diff --git a/app/src/main/java/me/ash/reader/ui/page/settings/accounts/AccountDetailsPage.kt b/app/src/main/java/me/ash/reader/ui/page/settings/accounts/AccountDetailsPage.kt index 5f24b4a6..2b363949 100644 --- a/app/src/main/java/me/ash/reader/ui/page/settings/accounts/AccountDetailsPage.kt +++ b/app/src/main/java/me/ash/reader/ui/page/settings/accounts/AccountDetailsPage.kt @@ -44,7 +44,7 @@ import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import androidx.navigation.NavHostController -import com.google.accompanist.navigation.animation.rememberAnimatedNavController +import androidx.navigation.compose.rememberNavController import me.ash.reader.R import me.ash.reader.infrastructure.preference.KeepArchivedPreference import me.ash.reader.infrastructure.preference.SyncBlockListPreference @@ -76,7 +76,7 @@ import java.util.Date @OptIn(ExperimentalAnimationApi::class) @Composable fun AccountDetailsPage( - navController: NavHostController = rememberAnimatedNavController(), + navController: NavHostController = rememberNavController(), viewModel: AccountViewModel = hiltViewModel(), ) { val uiState = viewModel.accountUiState.collectAsStateValue() diff --git a/app/src/main/java/me/ash/reader/ui/page/settings/accounts/AccountsPage.kt b/app/src/main/java/me/ash/reader/ui/page/settings/accounts/AccountsPage.kt index 2bcc061f..0258972b 100644 --- a/app/src/main/java/me/ash/reader/ui/page/settings/accounts/AccountsPage.kt +++ b/app/src/main/java/me/ash/reader/ui/page/settings/accounts/AccountsPage.kt @@ -17,7 +17,7 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import androidx.navigation.NavHostController -import com.google.accompanist.navigation.animation.rememberAnimatedNavController +import androidx.navigation.compose.rememberNavController import me.ash.reader.R import me.ash.reader.ui.component.base.* import me.ash.reader.ui.ext.collectAsStateValue @@ -25,10 +25,9 @@ import me.ash.reader.ui.page.common.RouteName import me.ash.reader.ui.page.settings.SettingItem import me.ash.reader.ui.theme.palette.onLight -@OptIn(ExperimentalAnimationApi::class) @Composable fun AccountsPage( - navController: NavHostController = rememberAnimatedNavController(), + navController: NavHostController = rememberNavController(), viewModel: AccountViewModel = hiltViewModel(), ) { val context = LocalContext.current diff --git a/app/src/main/java/me/ash/reader/ui/page/settings/accounts/AddAccountsPage.kt b/app/src/main/java/me/ash/reader/ui/page/settings/accounts/AddAccountsPage.kt index eca94a13..840f491e 100644 --- a/app/src/main/java/me/ash/reader/ui/page/settings/accounts/AddAccountsPage.kt +++ b/app/src/main/java/me/ash/reader/ui/page/settings/accounts/AddAccountsPage.kt @@ -16,7 +16,7 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import androidx.navigation.NavHostController -import com.google.accompanist.navigation.animation.rememberAnimatedNavController +import androidx.navigation.compose.rememberNavController import me.ash.reader.R import me.ash.reader.ui.component.base.DisplayText import me.ash.reader.ui.component.base.FeedbackIconButton @@ -26,10 +26,9 @@ import me.ash.reader.ui.page.settings.SettingItem import me.ash.reader.ui.page.settings.accounts.addition.* import me.ash.reader.ui.theme.palette.onLight -@OptIn(ExperimentalAnimationApi::class) @Composable fun AddAccountsPage( - navController: NavHostController = rememberAnimatedNavController(), + navController: NavHostController = rememberNavController(), viewModel: AccountViewModel = hiltViewModel(), additionViewModel: AdditionViewModel = hiltViewModel(), ) {