diff --git a/app/src/main/java/io/legado/app/ui/book/read/ReadBookMenuBar.kt b/app/src/main/java/io/legado/app/ui/book/read/ReadBookMenuBar.kt index dfb45706c..844c493b9 100644 --- a/app/src/main/java/io/legado/app/ui/book/read/ReadBookMenuBar.kt +++ b/app/src/main/java/io/legado/app/ui/book/read/ReadBookMenuBar.kt @@ -669,6 +669,7 @@ private fun ReadBookMenuSurface( title = stringResource(R.string.read_config_text_effects), maxHeight = maxHeight, bottomPadding = if (extendSurfaceToNavigationBar) navBarHeight else 0.dp, + animateSize = false, onBack = { onIntent(ReadBookIntent.ReadMenuBack) }, ) { ReadStyleTextTitleContent( @@ -684,7 +685,6 @@ private fun ReadBookMenuSurface( onOpenFontSelect = { onIntent(ReadBookIntent.ShowSheet(ReadBookSheet.FontSelect)) }, - modifier = Modifier.padding(horizontal = 16.dp), onIntent = onIntent, ) } diff --git a/app/src/main/java/io/legado/app/ui/book/read/sheet/TextTitleSheet.kt b/app/src/main/java/io/legado/app/ui/book/read/sheet/TextTitleSheet.kt index 5ca6ceb9a..42f2f6408 100644 --- a/app/src/main/java/io/legado/app/ui/book/read/sheet/TextTitleSheet.kt +++ b/app/src/main/java/io/legado/app/ui/book/read/sheet/TextTitleSheet.kt @@ -1,5 +1,8 @@ package io.legado.app.ui.book.read.sheet +import androidx.compose.animation.core.FastOutSlowInEasing +import androidx.compose.animation.core.tween +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth @@ -25,12 +28,16 @@ import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableFloatStateOf import androidx.compose.runtime.mutableIntStateOf +import androidx.compose.runtime.mutableStateMapOf import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.runtime.setValue import androidx.compose.runtime.snapshotFlow +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clipToBounds +import androidx.compose.ui.layout.onSizeChanged import androidx.compose.ui.res.stringArrayResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign @@ -73,19 +80,25 @@ fun ReadStyleTextTitleContent( var selectedTab by remember { mutableIntStateOf(0) } LaunchedEffect(pagerState) { - snapshotFlow { pagerState.settledPage }.collect { selectedTab = it } + snapshotFlow { pagerState.currentPage }.collect { selectedTab = it } } ReadStyleTextTitleContent( tabTitles = tabTitles, selectedTab = selectedTab, - onSelectedTabChange = { selectedTab = it }, pagerState = pagerState, onOpenShadowSet = onOpenShadowSet, onOpenUnderlineConfig = onOpenUnderlineConfig, onOpenHighlightRule = onOpenHighlightRule, onOpenFontSelect = onOpenFontSelect, - animateToPage = { page -> scope.launch { pagerState.animateScrollToPage(page) } }, + animateToPage = { page -> + scope.launch { + pagerState.animateScrollToPage( + page = page, + animationSpec = tween(durationMillis = 300, easing = FastOutSlowInEasing) + ) + } + }, modifier = modifier, onIntent = onIntent, ) @@ -95,7 +108,6 @@ fun ReadStyleTextTitleContent( internal fun ReadStyleTextTitleContent( tabTitles: List, selectedTab: Int, - onSelectedTabChange: (Int) -> Unit, pagerState: PagerState, onOpenShadowSet: () -> Unit, onOpenUnderlineConfig: () -> Unit, @@ -105,6 +117,9 @@ internal fun ReadStyleTextTitleContent( modifier: Modifier = Modifier, onIntent: (ReadBookIntent) -> Unit, ) { + val pageHeights = remember { mutableStateMapOf() } + val animatedHeight by rememberPagerAnimatedHeight(pagerState, pageHeights) + Column( modifier = modifier .fillMaxWidth() @@ -113,26 +128,37 @@ internal fun ReadStyleTextTitleContent( tabTitles = tabTitles, selectedTabIndex = selectedTab, onTabSelected = { index -> - onSelectedTabChange(index) animateToPage(index) }, - modifier = Modifier.padding(bottom = 8.dp), + modifier = Modifier.padding(start = 16.dp, end = 16.dp, bottom = 8.dp), ) HorizontalPager( state = pagerState, - modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.Top, + modifier = Modifier + .fillMaxWidth() + .clipToBounds() + .pagerHeight(animatedHeight), ) { page -> - when (page) { - 0 -> TextEffectsPage( - onOpenShadowSet = onOpenShadowSet, - onOpenUnderlineConfig = onOpenUnderlineConfig, - onOpenHighlightRule = onOpenHighlightRule, - onOpenFontSelect = onOpenFontSelect, - onIntent = onIntent, - ) + Box( + modifier = Modifier + .fillMaxWidth() + .onSizeChanged { size -> + pageHeights[page] = size.height + } + ) { + when (page) { + 0 -> TextEffectsPage( + onOpenShadowSet = onOpenShadowSet, + onOpenUnderlineConfig = onOpenUnderlineConfig, + onOpenHighlightRule = onOpenHighlightRule, + onOpenFontSelect = onOpenFontSelect, + onIntent = onIntent, + ) - 1 -> LayoutSpacingPage(onIntent = onIntent) - 2 -> TitleSettingsPage(onIntent = onIntent) + 1 -> LayoutSpacingPage(onIntent = onIntent) + 2 -> TitleSettingsPage(onIntent = onIntent) + } } } } @@ -152,6 +178,7 @@ internal fun LayoutSpacingPage( Column( modifier = Modifier .fillMaxWidth() + .padding(horizontal = 16.dp) .verticalScroll(rememberScrollState()), ) { Text( @@ -223,6 +250,7 @@ internal fun TextEffectsPage( Column( modifier = Modifier .fillMaxWidth() + .padding(horizontal = 16.dp) .verticalScroll(rememberScrollState()), ) { Text( @@ -382,6 +410,7 @@ internal fun TitleSettingsPage( Column( modifier = Modifier .fillMaxWidth() + .padding(horizontal = 16.dp) .verticalScroll(rememberScrollState()), ) { TinyDropdownSettingItem(