Merge pull request #293 from chattymin/feature/animate-topappbar

[Feature/#275] animated topAppBar
DroidKaigi · Aug 12, 2024 · a7282cd · a7282cd
2 parents 876b88f + 2757aed
commit a7282cd
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 3 deletions.
diff --git a/...rc/commonMain/kotlin/io/github/droidkaigi/confsched/ui/component/AnimatedTextTopAppBar.kt b/...rc/commonMain/kotlin/io/github/droidkaigi/confsched/ui/component/AnimatedTextTopAppBar.kt
@@ -0,0 +1,68 @@
+package io.github.droidkaigi.confsched.ui.component
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarColors
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.TopAppBarScrollBehavior
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.text.style.TextAlign
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AnimatedTextTopAppBar(
+    title: String,
+    modifier: Modifier = Modifier,
+    navigationIcon: @Composable () -> Unit = {},
+    actions: @Composable RowScope.() -> Unit = {},
+    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
+    colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(),
+    scrollBehavior: TopAppBarScrollBehavior? = null,
+) {
+    val scrollFraction = scrollBehavior?.state?.overlappedFraction ?: 0f
+    val transitionFraction = scrollFraction.coerceIn(0f, 1f)
+
+    TopAppBar(
+        title = {
+            Box(modifier = Modifier.fillMaxWidth()) {
+                Text(
+                    text = title,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .graphicsLayer {
+                            alpha = 1f - transitionFraction
+                        },
+                    textAlign = TextAlign.Start,
+                    style = MaterialTheme.typography.headlineSmall,
+                )
+
+                Text(
+                    text = title,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .align(Alignment.Center)
+                        .graphicsLayer {
+                            alpha = transitionFraction
+                        },
+                    textAlign = TextAlign.Center,
+                    style = MaterialTheme.typography.titleMedium,
+                )
+            }
+        },
+        modifier = modifier,
+        navigationIcon = navigationIcon,
+        actions = actions,
+        windowInsets = windowInsets,
+        colors = colors,
+        scrollBehavior = scrollBehavior,
+    )
+}
diff --git a/feature/about/src/commonMain/kotlin/io/github/droidkaigi/confsched/about/AboutScreen.kt b/feature/about/src/commonMain/kotlin/io/github/droidkaigi/confsched/about/AboutScreen.kt
@@ -7,8 +7,6 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
-import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -29,6 +27,7 @@ import io.github.droidkaigi.confsched.model.AboutItem
 import io.github.droidkaigi.confsched.model.AboutItem.Medium
 import io.github.droidkaigi.confsched.model.AboutItem.X
 import io.github.droidkaigi.confsched.model.AboutItem.YouTube
+import io.github.droidkaigi.confsched.ui.component.AnimatedTextTopAppBar
 import org.jetbrains.compose.resources.stringResource
 
 const val aboutScreenRoute = "about"
@@ -72,7 +71,12 @@ fun AboutScreen(
 
     Scaffold(
         modifier = modifier.testTag(AboutScreenTestTag.Screen),
-        topBar = { TopAppBar(title = { Text(stringResource(AboutRes.string.about_droidkaigi)) }) },
+        topBar = {
+            AnimatedTextTopAppBar(
+                title = stringResource(AboutRes.string.about_droidkaigi),
+                scrollBehavior = scrollBehavior,
+            )
+        },
         snackbarHost = { SnackbarHost(hostState = snackbarHostState) },
         contentWindowInsets = WindowInsets(
             left = contentPadding.calculateLeftPadding(layoutDirection),