[optimize]优化首页布局；优化“风格转移”页面FAB样式和行为

SkyD666 · Sep 22, 2023 · 58da1b7 · 58da1b7
1 parent 75b8113
commit 58da1b7
Show file tree

Hide file tree

Showing 20 changed files with 374 additions and 114 deletions.
diff --git a/app/build.gradle b/app/build.gradle
@@ -21,8 +21,8 @@ android {
         applicationId "com.skyd.rays"
         minSdk 24
         targetSdk 34
-        versionCode 30
-        versionName "1.5-beta05"
+        versionCode 31
+        versionName "1.5-beta06"
         flavorDimensions = ["versionName"]
 
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"

diff --git a/app/src/main/java/com/skyd/rays/ext/WindowExt.kt b/app/src/main/java/com/skyd/rays/ext/WindowExt.kt
@@ -0,0 +1,13 @@
+package com.skyd.rays.ext
+
+import androidx.compose.material3.windowsizeclass.WindowSizeClass
+import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
+
+val WindowSizeClass.isCompact: Boolean
+    get() = widthSizeClass == WindowWidthSizeClass.Compact
+
+val WindowSizeClass.isMedium: Boolean
+    get() = widthSizeClass == WindowWidthSizeClass.Medium
+
+val WindowSizeClass.Expanded: Boolean
+    get() = widthSizeClass == WindowWidthSizeClass.Expanded
diff --git a/app/src/main/java/com/skyd/rays/ui/component/RaysFloatingActionButton.kt b/app/src/main/java/com/skyd/rays/ui/component/RaysFloatingActionButton.kt
@@ -8,9 +8,12 @@ import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.FloatingActionButtonDefaults
 import androidx.compose.material3.FloatingActionButtonElevation
 import androidx.compose.material3.LargeFloatingActionButton
-import androidx.compose.material3.PlainTooltipBox
+import androidx.compose.material3.PlainTooltip
 import androidx.compose.material3.SmallFloatingActionButton
 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.runtime.remember
 import androidx.compose.ui.Modifier
@@ -68,11 +71,58 @@ fun RaysFloatingActionButton(
     if (contentDescription.isNullOrEmpty()) {
         floatingActionButton(modifier = modifier)
     } else {
-        PlainTooltipBox(
+        TooltipBox(
             modifier = modifier,
-            tooltip = { Text(contentDescription) }
+            positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
+            tooltip = {
+                PlainTooltip {
+                    Text(contentDescription)
+                }
+            },
+            state = rememberTooltipState()
         ) {
-            floatingActionButton(modifier = Modifier.tooltipAnchor())
+            floatingActionButton(modifier = Modifier)
         }
     }
 }
+
+@Composable
+fun RaysExtendedFloatingActionButton(
+    modifier: Modifier = Modifier,
+    text: @Composable () -> Unit,
+    icon: @Composable () -> Unit,
+    onClick: () -> Unit,
+    expanded: Boolean = true,
+    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
+    contentDescription: String? = null,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+) {
+    val floatingActionButton: @Composable (modifier: Modifier) -> Unit = {
+        ExtendedFloatingActionButton(
+            text = text,
+            icon = icon,
+            modifier = it,
+            onClick = onClick,
+            expanded = expanded,
+            elevation = elevation,
+            interactionSource = interactionSource,
+        )
+    }
+
+    if (contentDescription.isNullOrEmpty()) {
+        floatingActionButton(modifier = modifier)
+    } else {
+        TooltipBox(
+            modifier = modifier,
+            positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
+            tooltip = {
+                PlainTooltip {
+                    Text(contentDescription)
+                }
+            },
+            state = rememberTooltipState()
+        ) {
+            floatingActionButton(modifier = Modifier)
+        }
+    }
+}
diff --git a/app/src/main/java/com/skyd/rays/ui/component/RaysIconButton.kt b/app/src/main/java/com/skyd/rays/ui/component/RaysIconButton.kt
@@ -73,11 +73,17 @@ fun RaysIconButton(
     if (contentDescription.isNullOrEmpty()) {
         iconButton(modifier = modifier)
     } else {
-        PlainTooltipBox(
+        TooltipBox(
             modifier = modifier,
-            tooltip = { Text(contentDescription) }
+            positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
+            tooltip = {
+                PlainTooltip {
+                    Text(contentDescription)
+                }
+            },
+            state = rememberTooltipState()
         ) {
-            iconButton(modifier = Modifier.tooltipAnchor())
+            iconButton(modifier = Modifier)
         }
     }
 }

diff --git a/app/src/main/java/com/skyd/rays/ui/component/RaysTopBar.kt b/app/src/main/java/com/skyd/rays/ui/component/RaysTopBar.kt
@@ -2,10 +2,16 @@ package com.skyd.rays.ui.component
 
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.rounded.ArrowBack
-import androidx.compose.material3.*
+import androidx.compose.material.icons.automirrored.rounded.ArrowBack
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.LargeTopAppBar
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -26,6 +32,7 @@ fun RaysTopBar(
     title: @Composable () -> Unit,
     contentPadding: @Composable () -> PaddingValues = { PaddingValues() },
     navigationIcon: @Composable () -> Unit = { BackIcon() },
+    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
     actions: @Composable RowScope.() -> Unit = {},
     scrollBehavior: TopAppBarScrollBehavior? = null,
 ) {
@@ -42,26 +49,31 @@ fun RaysTopBar(
                 modifier = topBarModifier,
                 navigationIcon = navigationIcon,
                 actions = actions,
+                windowInsets = windowInsets,
                 colors = colors,
                 scrollBehavior = scrollBehavior
             )
         }
+
         RaysTopBarStyle.Large -> {
             LargeTopAppBar(
                 modifier = topBarModifier,
                 title = title,
                 navigationIcon = navigationIcon,
                 actions = actions,
+                windowInsets = windowInsets,
                 colors = colors,
                 scrollBehavior = scrollBehavior
             )
         }
+
         RaysTopBarStyle.CenterAligned -> {
             CenterAlignedTopAppBar(
                 modifier = topBarModifier,
                 title = title,
                 navigationIcon = navigationIcon,
                 actions = actions,
+                windowInsets = windowInsets,
                 colors = colors,
                 scrollBehavior = scrollBehavior
             )
@@ -114,7 +126,7 @@ fun BackIcon() {
 @Composable
 fun BackIcon(onClick: () -> Unit = {}) {
     TopBarIcon(
-        imageVector = Icons.Rounded.ArrowBack,
+        imageVector = Icons.AutoMirrored.Rounded.ArrowBack,
         contentDescription = stringResource(id = R.string.back),
         onClick = onClick
     )

diff --git a/app/src/main/java/com/skyd/rays/ui/component/shape/CloverShape.kt b/app/src/main/java/com/skyd/rays/ui/component/shape/CloverShape.kt
@@ -0,0 +1,50 @@
+package com.skyd.rays.ui.component.shape
+
+import android.graphics.Matrix
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Outline
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.asAndroidPath
+import androidx.compose.ui.graphics.asComposePath
+import androidx.compose.ui.unit.Density
+import androidx.compose.ui.unit.LayoutDirection
+
+val CloverShape: Shape = object : Shape {
+    override fun createOutline(
+        size: Size,
+        layoutDirection: LayoutDirection,
+        density: Density
+    ): Outline {
+        val baseWidth = 200f
+        val baseHeight = 200f
+
+        val path = Path().apply {
+            moveTo(12f, 100f)
+            cubicTo(12f, 76f, 0f, 77.6142f, 0f, 50f)
+            cubicTo(0f, 22.3858f, 22.3858f, 0f, 50f, 0f)
+            cubicTo(77.6142f, 0f, 76f, 12f, 100f, 12f)
+            cubicTo(124f, 12f, 122.3858f, 0f, 150f, 0f)
+            cubicTo(177.6142f, 0f, 200f, 22.3858f, 200f, 50f)
+            cubicTo(200f, 77.6142f, 188f, 76f, 188f, 100f)
+            cubicTo(188f, 124f, 200f, 122.3858f, 200f, 150f)
+            cubicTo(200f, 177.6142f, 177.6142f, 200f, 150f, 200f)
+            cubicTo(122.3858f, 200f, 124f, 188f, 100f, 188f)
+            cubicTo(76f, 188f, 77.6142f, 200f, 50f, 200f)
+            cubicTo(22.3858f, 200f, 0f, 177.6142f, 0f, 150f)
+            cubicTo(0f, 122.3858f, 12f, 124f, 12f, 100f)
+            close()
+        }
+
+        return Outline.Generic(
+            path
+                .asAndroidPath()
+                .apply {
+                    transform(Matrix().apply {
+                        setScale(size.width / baseWidth, size.height / baseHeight)
+                    })
+                }
+                .asComposePath()
+        )
+    }
+}
diff --git a/app/src/main/java/com/skyd/rays/ui/component/shape/SquircleShape.kt b/app/src/main/java/com/skyd/rays/ui/component/shape/SquircleShape.kt
@@ -0,0 +1,42 @@
+package com.skyd.rays.ui.component.shape
+
+import android.graphics.Matrix
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Outline
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.asAndroidPath
+import androidx.compose.ui.graphics.asComposePath
+import androidx.compose.ui.unit.Density
+import androidx.compose.ui.unit.LayoutDirection
+
+val SquircleShape: Shape = object : Shape {
+    override fun createOutline(
+        size: Size,
+        layoutDirection: LayoutDirection,
+        density: Density
+    ): Outline {
+        val baseWidth = 1000f
+        val baseHeight = 1000f
+
+        val path = Path().apply {
+            moveTo(0f, 500f)
+            cubicTo(0f, 88.25f, 88.25f, 0f, 500f, 0f)
+            cubicTo(911.75f, 0f, 1000f, 88.25f, 1000f, 500f)
+            cubicTo(1000f, 911.75f, 911.75f, 1000f, 500f, 1000f)
+            cubicTo(88.25f, 1000f, 0f, 911.75f, 0f, 500f)
+            close()
+        }
+
+        return Outline.Generic(
+            path
+                .asAndroidPath()
+                .apply {
+                    transform(Matrix().apply {
+                        setScale(size.width / baseWidth, size.height / baseHeight)
+                    })
+                }
+                .asComposePath()
+        )
+    }
+}