From e2b860c4daf2be1ab1596b9b109292c47d6d7b90 Mon Sep 17 00:00:00 2001 From: Zakhar Timoshenko Date: Fri, 9 Feb 2024 21:14:38 +0300 Subject: [PATCH] Modify main search bar --- .../java/org/xtimms/tokusho/MainActivity.kt | 31 +++++++++++++------ .../org/xtimms/tokusho/core/Navigation.kt | 7 ++++- .../tokusho/core/components/TopAppBar.kt | 28 +++++++++++------ .../tokusho/sections/explore/ExploreView.kt | 15 ++++----- 4 files changed, 51 insertions(+), 30 deletions(-) diff --git a/app/src/main/java/org/xtimms/tokusho/MainActivity.kt b/app/src/main/java/org/xtimms/tokusho/MainActivity.kt index 7af6976..b0910d7 100644 --- a/app/src/main/java/org/xtimms/tokusho/MainActivity.kt +++ b/app/src/main/java/org/xtimms/tokusho/MainActivity.kt @@ -4,11 +4,11 @@ import android.content.Intent import android.os.Bundle import android.util.Log import androidx.activity.ComponentActivity -import androidx.activity.SystemBarStyle import androidx.activity.compose.setContent import androidx.activity.enableEdgeToEdge import androidx.appcompat.app.AppCompatDelegate import androidx.compose.animation.core.Animatable +import androidx.compose.animation.core.animateFloatAsState import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.WindowInsets @@ -18,21 +18,23 @@ import androidx.compose.foundation.layout.calculateEndPadding import androidx.compose.foundation.layout.calculateStartPadding import androidx.compose.foundation.layout.only import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.statusBarsPadding import androidx.compose.foundation.layout.systemBars +import androidx.compose.foundation.lazy.grid.LazyGridState +import androidx.compose.foundation.lazy.grid.rememberLazyGridState import androidx.compose.material3.Scaffold import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass import androidx.compose.runtime.Composable -import androidx.compose.runtime.DisposableEffect import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.derivedStateOf import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableFloatStateOf import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.platform.LocalLayoutDirection import androidx.compose.ui.unit.dp @@ -46,7 +48,6 @@ import kotlinx.coroutines.launch import org.xtimms.tokusho.core.Navigation import org.xtimms.tokusho.core.components.BottomNavBar import org.xtimms.tokusho.core.components.TopAppBar -import org.xtimms.tokusho.sections.list.LIST_DESTINATION import org.xtimms.tokusho.ui.theme.TokushoTheme import org.xtimms.tokusho.utils.lang.processLifecycleScope import javax.inject.Inject @@ -119,16 +120,24 @@ fun MainView( var topBarHeightPx by remember { mutableFloatStateOf(0f) } val topBarOffsetY = remember { Animatable(0f) } + val scroll: LazyGridState = rememberLazyGridState() + Scaffold( topBar = { if (isCompactScreen) { + val isScrolled by remember { + derivedStateOf { scroll.firstVisibleItemScrollOffset > 0 } + } + val animatedBgAlpha by animateFloatAsState( + if (isScrolled) 1f else 0f, + label = "Top Bar Background", + ) TopAppBar( navController = navController, modifier = Modifier - .padding(0.dp, 8.dp) - .graphicsLayer { - translationY = topBarOffsetY.value - } + .statusBarsPadding() + .padding(0.dp, 16.dp), + backgroundAlphaProvider = { animatedBgAlpha }, ) } }, @@ -161,7 +170,8 @@ fun MainView( bottom = systemBarsPadding.calculateBottomPadding() ), topBarHeightPx = topBarHeightPx, - topBarOffsetY = topBarOffsetY + topBarOffsetY = topBarOffsetY, + listState = scroll ) } } else { @@ -178,7 +188,8 @@ fun MainView( ), padding = padding, topBarHeightPx = topBarHeightPx, - topBarOffsetY = topBarOffsetY + topBarOffsetY = topBarOffsetY, + listState = scroll ) } } diff --git a/app/src/main/java/org/xtimms/tokusho/core/Navigation.kt b/app/src/main/java/org/xtimms/tokusho/core/Navigation.kt index 847df6e..4eb176d 100644 --- a/app/src/main/java/org/xtimms/tokusho/core/Navigation.kt +++ b/app/src/main/java/org/xtimms/tokusho/core/Navigation.kt @@ -7,6 +7,7 @@ import androidx.compose.animation.core.AnimationVector1D import androidx.compose.animation.core.Easing import androidx.compose.animation.core.tween import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.lazy.grid.LazyGridState import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.unit.IntOffset @@ -36,6 +37,8 @@ import org.xtimms.tokusho.sections.settings.about.ABOUT_DESTINATION import org.xtimms.tokusho.sections.settings.about.AboutView import org.xtimms.tokusho.sections.settings.about.UPDATES_DESTINATION import org.xtimms.tokusho.sections.settings.about.UpdateView +import org.xtimms.tokusho.sections.settings.advanced.ADVANCED_DESTINATION +import org.xtimms.tokusho.sections.settings.advanced.AdvancedView import org.xtimms.tokusho.sections.settings.appearance.APPEARANCE_DESTINATION import org.xtimms.tokusho.sections.settings.appearance.AppearanceView import org.xtimms.tokusho.sections.settings.appearance.DARK_THEME_DESTINATION @@ -63,6 +66,7 @@ fun Navigation( padding: PaddingValues, topBarHeightPx: Float, topBarOffsetY: Animatable, + listState: LazyGridState, ) { val navigateBack: () -> Unit = { navController.popBackStack() } @@ -124,7 +128,8 @@ fun Navigation( }, padding = padding, topBarHeightPx = topBarHeightPx, - topBarOffsetY = topBarOffsetY + topBarOffsetY = topBarOffsetY, + listState = listState ) } diff --git a/app/src/main/java/org/xtimms/tokusho/core/components/TopAppBar.kt b/app/src/main/java/org/xtimms/tokusho/core/components/TopAppBar.kt index 7cc4558..5ad7f46 100644 --- a/app/src/main/java/org/xtimms/tokusho/core/components/TopAppBar.kt +++ b/app/src/main/java/org/xtimms/tokusho/core/components/TopAppBar.kt @@ -1,13 +1,13 @@ package org.xtimms.tokusho.core.components import androidx.compose.animation.AnimatedVisibility +import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.statusBarsPadding import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.outlined.RssFeed @@ -50,8 +50,10 @@ import org.xtimms.tokusho.ui.theme.TokushoTheme fun TopAppBar( navController: NavController, modifier: Modifier = Modifier, + backgroundAlphaProvider: () -> Float, ) { val navBackStackEntry by navController.currentBackStackEntryAsState() + val isVisible by remember { derivedStateOf { when (navBackStackEntry?.destination?.route) { @@ -69,10 +71,15 @@ fun TopAppBar( exit = materialSharedAxisXOut(targetOffsetX = { -(it * initialOffset).toInt() }) ) { Row( - modifier = modifier - .statusBarsPadding() + modifier = Modifier .fillMaxWidth() - .padding(start = 16.dp, end = 16.dp), + .background( + MaterialTheme.colorScheme + .surfaceColorAtElevation(3.dp) + .copy( + alpha = backgroundAlphaProvider() + ) + ), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp), ) { @@ -80,14 +87,15 @@ fun TopAppBar( onClick = { navController.navigate(SEARCH_DESTINATION) }, modifier = modifier .weight(1f) - .height(56.dp), + .height(56.dp) + .padding(start = 16.dp), shape = RoundedCornerShape(50), colors = CardDefaults.cardColors( containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(6.dp) ), ) { Row( - modifier = modifier + modifier = Modifier .padding(horizontal = 16.dp) .fillMaxHeight(), horizontalArrangement = Arrangement.spacedBy(16.dp), @@ -106,11 +114,11 @@ fun TopAppBar( } } Row( - modifier = modifier, + modifier = modifier.padding(end = 16.dp), ) { IconButton( - onClick = { }, - modifier = modifier.padding(0.dp), + onClick = { }, + modifier = Modifier.padding(0.dp), ) { Icon( Icons.Outlined.RssFeed, @@ -120,7 +128,7 @@ fun TopAppBar( } IconButton( onClick = { navController.navigate(SETTINGS_DESTINATION) }, - modifier = modifier.padding(0.dp), + modifier = Modifier.padding(0.dp), ) { Icon( Icons.Outlined.Settings, diff --git a/app/src/main/java/org/xtimms/tokusho/sections/explore/ExploreView.kt b/app/src/main/java/org/xtimms/tokusho/sections/explore/ExploreView.kt index ebbd7e6..f6c2bb9 100644 --- a/app/src/main/java/org/xtimms/tokusho/sections/explore/ExploreView.kt +++ b/app/src/main/java/org/xtimms/tokusho/sections/explore/ExploreView.kt @@ -12,10 +12,9 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.lazy.grid.GridCells import androidx.compose.foundation.lazy.grid.GridItemSpan +import androidx.compose.foundation.lazy.grid.LazyGridState import androidx.compose.foundation.lazy.grid.LazyVerticalGrid import androidx.compose.foundation.lazy.grid.items -import androidx.compose.foundation.lazy.grid.rememberLazyGridState -import androidx.compose.foundation.rememberScrollState import androidx.compose.material.icons.Icons import androidx.compose.material.icons.outlined.Bookmarks import androidx.compose.material.icons.outlined.Download @@ -34,7 +33,6 @@ import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import androidx.lifecycle.compose.collectAsStateWithLifecycle -import androidx.navigation.NavController import coil.ImageLoader import org.koitharu.kotatsu.parsers.model.MangaSource import org.xtimms.tokusho.R @@ -43,7 +41,6 @@ import org.xtimms.tokusho.core.components.ExploreButton import org.xtimms.tokusho.core.components.SourceItem import org.xtimms.tokusho.core.components.icons.Dice import org.xtimms.tokusho.core.parser.favicon.faviconUri -import org.xtimms.tokusho.sections.list.LIST_DESTINATION import org.xtimms.tokusho.utils.system.toast const val EXPLORE_DESTINATION = "explore" @@ -54,6 +51,7 @@ fun ExploreView( navigateToSource: (MangaSource) -> Unit, topBarHeightPx: Float, topBarOffsetY: Animatable, + listState: LazyGridState, padding: PaddingValues, ) { val viewModel: ExploreViewModel = hiltViewModel() @@ -66,6 +64,7 @@ fun ExploreView( event = viewModel, topBarHeightPx = topBarHeightPx, topBarOffsetY = topBarOffsetY, + listState = listState, padding = padding ) } @@ -79,14 +78,13 @@ fun ExploreViewContent( nestedScrollConnection: NestedScrollConnection? = null, topBarHeightPx: Float = 0f, topBarOffsetY: Animatable = Animatable(0f), + listState: LazyGridState, padding: PaddingValues = PaddingValues(), ) { val context = LocalContext.current val layoutDirection = LocalLayoutDirection.current - val scrollState = rememberScrollState() - if (uiState.message != null) { LaunchedEffect(uiState.message) { context.toast(uiState.message) @@ -100,7 +98,6 @@ fun ExploreViewContent( .fillMaxSize(), contentAlignment = Alignment.TopCenter ) { - val listState = rememberLazyGridState() val listModifier = Modifier .fillMaxWidth() .align(Alignment.TopStart) @@ -110,7 +107,7 @@ fun ExploreViewContent( else Modifier ) LazyVerticalGrid( - columns = GridCells.Adaptive(minSize = 72.dp), + columns = GridCells.Adaptive(minSize = 90.dp), modifier = listModifier .collapsable( state = listState, @@ -120,7 +117,7 @@ fun ExploreViewContent( state = listState, contentPadding = PaddingValues( start = padding.calculateStartPadding(layoutDirection) + 8.dp, - top = padding.calculateTopPadding(), + top = padding.calculateTopPadding() + 8.dp, end = padding.calculateEndPadding(layoutDirection) + 8.dp, bottom = padding.calculateBottomPadding() ),