[optimize]优化首页横竖屏体验；优化“风格转移”页面体验

SkyD666 · Sep 24, 2023 · e738cd7 · e738cd7
1 parent 66286e9
commit e738cd7
Show file tree

Hide file tree

Showing 10 changed files with 156 additions and 95 deletions.
diff --git a/...src/main/java/com/skyd/rays/ui/component/lazyverticalgrid/adapter/proxy/MiniTool1Proxy.kt b/...src/main/java/com/skyd/rays/ui/component/lazyverticalgrid/adapter/proxy/MiniTool1Proxy.kt
@@ -12,7 +12,11 @@ import androidx.compose.material.icons.filled.Science
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedCard
+import androidx.compose.material3.PlainTooltip
 import androidx.compose.material3.Text
+import androidx.compose.material3.TooltipBox
+import androidx.compose.material3.TooltipDefaults
+import androidx.compose.material3.rememberTooltipState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -68,10 +72,16 @@ fun MiniTool1Item(
                 textAlign = TextAlign.Center
             )
             if (data.experimental) {
-                Icon(
-                    imageVector = Icons.Default.Science,
-                    contentDescription = stringResource(R.string.mini_tool_experimental),
-                )
+                TooltipBox(
+                    positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
+                    tooltip = { PlainTooltip { Text(stringResource(R.string.mini_tool_experimental)) } },
+                    state = rememberTooltipState()
+                ) {
+                    Icon(
+                        imageVector = Icons.Default.Science,
+                        contentDescription = stringResource(R.string.mini_tool_experimental),
+                    )
+                }
             }
         }
     }

diff --git a/app/src/main/java/com/skyd/rays/ui/screen/MainScreen.kt b/app/src/main/java/com/skyd/rays/ui/screen/MainScreen.kt
@@ -1,10 +1,14 @@
 package com.skyd.rays.ui.screen
 
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.WindowInsetsSides
+import androidx.compose.foundation.layout.consumeWindowInsets
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.only
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.safeDrawing
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.PagerState
 import androidx.compose.foundation.pager.rememberPagerState
@@ -20,8 +24,8 @@ import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarItem
 import androidx.compose.material3.NavigationRail
 import androidx.compose.material3.NavigationRailItem
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -38,11 +42,6 @@ import kotlinx.coroutines.launch
 
 const val MAIN_SCREEN_ROUTE = "mainScreen"
 
-@Composable
-fun getMainScreenTopBarWindowInsets(): WindowInsets =
-    if (LocalWindowSizeClass.current.isCompact) TopAppBarDefaults.windowInsets
-    else TopAppBarDefaults.windowInsets.only(WindowInsetsSides.End + WindowInsetsSides.Top)
-
 @Composable
 fun MainScreen() {
     val windowSizeClass = LocalWindowSizeClass.current
@@ -62,14 +61,28 @@ fun MainScreen() {
         ContentPager(modifier = modifier, pagerState = pagerState)
     }
 
-    if (windowSizeClass.isCompact) {
-        Column {
-            contentPager(modifier = Modifier.weight(1f))
-            navigationBarOrRail()
-        }
-    } else {
-        Row {
-            navigationBarOrRail()
+    Scaffold(
+        bottomBar = {
+            if (windowSizeClass.isCompact) {
+                navigationBarOrRail()
+            }
+        },
+        contentWindowInsets = WindowInsets(0, 0, 0, 0),
+    ) { padding ->
+        Row(
+            Modifier
+                .fillMaxSize()
+                .padding(padding)
+                .consumeWindowInsets(padding)
+                .run {
+                    if (!windowSizeClass.isCompact) {
+                        windowInsetsPadding(WindowInsets.safeDrawing.only(WindowInsetsSides.Horizontal))
+                    } else this
+                },
+        ) {
+            if (!windowSizeClass.isCompact) {
+                navigationBarOrRail()
+            }
             contentPager(modifier = Modifier.weight(1f))
         }
     }

diff --git a/app/src/main/java/com/skyd/rays/ui/screen/home/HomeScreen.kt b/app/src/main/java/com/skyd/rays/ui/screen/home/HomeScreen.kt
@@ -1,6 +1,9 @@
 package com.skyd.rays.ui.screen.home
 
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.animateContentSize
+import androidx.compose.animation.core.Spring
+import androidx.compose.animation.core.spring
 import androidx.compose.animation.expandHorizontally
 import androidx.compose.animation.shrinkHorizontally
 import androidx.compose.foundation.basicMarquee
@@ -66,7 +69,6 @@ import com.skyd.rays.R
 import com.skyd.rays.base.LoadUiIntent
 import com.skyd.rays.config.refreshStickerData
 import com.skyd.rays.ext.dateTime
-import com.skyd.rays.ext.screenIsLand
 import com.skyd.rays.ext.showSnackbarWithLaunchedEffect
 import com.skyd.rays.model.bean.StickerWithTags
 import com.skyd.rays.model.preference.StickerScalePreference
@@ -112,17 +114,14 @@ fun HomeScreen(viewModel: HomeViewModel = hiltViewModel()) {
 
     Scaffold(
         snackbarHost = { SnackbarHost(hostState = snackbarHostState) },
-        contentWindowInsets = if (context.screenIsLand) {
-            WindowInsets(
-                left = 0,
-                top = 0,
-                right = ScaffoldDefaults.contentWindowInsets
-                    .getRight(LocalDensity.current, LocalLayoutDirection.current),
-                bottom = 0
-            )
-        } else {
-            WindowInsets(0.dp)
-        }
+        contentWindowInsets = WindowInsets(
+            left = ScaffoldDefaults.contentWindowInsets
+                .getLeft(LocalDensity.current, LocalLayoutDirection.current),
+            top = 0,
+            right = ScaffoldDefaults.contentWindowInsets
+                .getRight(LocalDensity.current, LocalLayoutDirection.current),
+            bottom = ScaffoldDefaults.contentWindowInsets.getBottom(LocalDensity.current),
+        )
     ) { innerPaddings ->
         Row(
             modifier = Modifier
@@ -269,7 +268,14 @@ private fun MainCard(stickerWithTags: StickerWithTags, viewModel: HomeViewModel
         ) {
             Box {
                 RaysImage(
-                    modifier = Modifier.fillMaxWidth(),
+                    modifier = Modifier
+                        .animateContentSize(
+                            animationSpec = spring(
+                                dampingRatio = 1.3f,
+                                stiffness = Spring.StiffnessHigh,
+                            )
+                        )
+                        .fillMaxWidth(),
                     uuid = stickerBean.uuid,
                     contentScale = StickerScalePreference.toContentScale(LocalStickerScale.current),
                 )

diff --git a/app/src/main/java/com/skyd/rays/ui/screen/home/searchbar/RaysSearchBar.kt b/app/src/main/java/com/skyd/rays/ui/screen/home/searchbar/RaysSearchBar.kt
@@ -50,9 +50,9 @@ import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.isTraversalGroup
 import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.traversalIndex
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.zIndex
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.skyd.rays.R
@@ -128,7 +128,6 @@ fun RaysSearchBar(
     Box(
         Modifier
             .semantics { isTraversalGroup = true }
-            .zIndex(1f)
             .fillMaxWidth()
     ) {
         Box(
@@ -137,6 +136,9 @@ fun RaysSearchBar(
                 .padding(horizontal = searchBarHorizontalPadding)
         ) {
             SearchBar(
+                modifier = Modifier
+                    .align(Alignment.TopCenter)
+                    .semantics { traversalIndex = -1f },
                 onQueryChange = onQueryChange,
                 query = query,
                 onSearch = { keyword ->

diff --git a/app/src/main/java/com/skyd/rays/ui/screen/minitool/MiniToolScreen.kt b/app/src/main/java/com/skyd/rays/ui/screen/minitool/MiniToolScreen.kt
@@ -1,27 +1,21 @@
 package com.skyd.rays.ui.screen.minitool
 
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Extension
 import androidx.compose.material.icons.filled.Style
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.ScaffoldDefaults
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
-import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.skyd.rays.R
 import com.skyd.rays.ext.plus
-import com.skyd.rays.ext.screenIsLand
 import com.skyd.rays.model.bean.MiniTool1Bean
 import com.skyd.rays.ui.component.RaysIconButton
 import com.skyd.rays.ui.component.RaysTopBar
@@ -30,7 +24,6 @@ import com.skyd.rays.ui.component.lazyverticalgrid.RaysLazyVerticalGrid
 import com.skyd.rays.ui.component.lazyverticalgrid.adapter.LazyGridAdapter
 import com.skyd.rays.ui.component.lazyverticalgrid.adapter.proxy.MiniTool1Proxy
 import com.skyd.rays.ui.local.LocalNavController
-import com.skyd.rays.ui.screen.getMainScreenTopBarWindowInsets
 import com.skyd.rays.ui.screen.minitool.styletransfer.STYLE_TRANSFER_SCREEN_ROUTE
 
 const val MINI_TOOL_SCREEN_ROUTE = "miniToolScreen"
@@ -39,7 +32,6 @@ const val MINI_TOOL_SCREEN_ROUTE = "miniToolScreen"
 fun MiniToolScreen() {
     val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
     val navController = LocalNavController.current
-    val context = LocalContext.current
 
     Scaffold(
         topBar = {
@@ -50,20 +42,8 @@ fun MiniToolScreen() {
                 navigationIcon = {
                     RaysIconButton(imageVector = Icons.Default.Extension, onClick = { })
                 },
-                windowInsets = getMainScreenTopBarWindowInsets(),
             )
         },
-        contentWindowInsets = if (context.screenIsLand) {
-            WindowInsets(
-                left = 0,
-                top = 0,
-                right = ScaffoldDefaults.contentWindowInsets
-                    .getRight(LocalDensity.current, LocalLayoutDirection.current),
-                bottom = 0
-            )
-        } else {
-            WindowInsets(0.dp)
-        }
     ) {
         val miniToolList = listOf(
             MiniTool1Bean(