Art: simplify app bar scroll behavior

Author: cliuff

api_viewing/src/main/kotlin/com/madness/collision/unit/api_viewing/ui/list/AppList.kt

@@ -34,6 +34,7 @@ import androidx.compose.foundation.layout.calculateStartPadding
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.grid.LazyGridState
 import androidx.compose.foundation.lazy.grid.rememberLazyGridState
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material.icons.Icons
@@ -42,6 +43,7 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.TopAppBarState
 import androidx.compose.material3.rememberTopAppBarState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -53,6 +55,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.unit.dp
@@ -260,8 +263,9 @@ fun AppList(eventHandler: AppListEventHandler, paddingValues: PaddingValues) {
     AppListScaffold(
         listState = rememberAppListState(viewModel),
         eventHandler = rememberCompOptionsEventHandler(viewModel),
+        appBarState = appBarState,
+        listScrollState = scrollState,
         paddingValues = paddingValues,
-        contentOffsetProgress = { -headerState.headerOffsetY },
         onAppBarOpacityChange = eventHandler::onAppBarOpacityChange,
     ) { contentPadding ->
         AppListGrid(
@@ -303,33 +307,43 @@ interface AppListState {
 private fun AppListScaffold(
     listState: AppListState,
     eventHandler: CompositeOptionsEventHandler,
-    paddingValues: PaddingValues,
-    contentOffsetProgress: () -> Int,
+    appBarState: TopAppBarState = rememberTopAppBarState(),
+    listScrollState: LazyGridState = rememberLazyGridState(),
+    paddingValues: PaddingValues = PaddingValues(),
     onAppBarOpacityChange: (Float) -> Unit = {},
     content: @Composable (PaddingValues) -> Unit
 ) {
     var showListOptions by remember { mutableIntStateOf(0) }
+    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(appBarState)
     Scaffold(
+        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
         topBar = {
             val density = LocalDensity.current
-            val toolbarOpacity by remember(density) {
+            val toolbarOpacity by remember(density, appBarState) {
                 val toolbarHeight = with(density) { 100.dp.toPx() }
                 val headerHeight = (toolbarHeight * 1.8f).roundToInt()
                 derivedStateOf {
-                    ((contentOffsetProgress() - headerHeight) / toolbarHeight)
-                        .coerceIn(0f, 0.96f).mapIf({ it <= 0.06f }, { 0f })
+                    val fraction = if (listScrollState.firstVisibleItemIndex == 0) {
+                        // use first item offset when scrolled to top
+                        (listScrollState.firstVisibleItemScrollOffset - headerHeight) / toolbarHeight
+                    } else {
+                        (-appBarState.contentOffset - headerHeight) / toolbarHeight
+                    }
+                    fraction.coerceIn(0f, 0.96f).mapIf({ it <= 0.06f }, { 0f })
                 }
             }
             LaunchedEffect(toolbarOpacity) {
                 onAppBarOpacityChange(toolbarOpacity)
             }
 
+            val containerColor = MaterialTheme.colorScheme.surface.copy(alpha = toolbarOpacity)
             AppListBar(
                 isRefreshing = listState.isRefreshing,
                 windowInsets = paddingValues.asInsets()
                     .only(WindowInsetsSides.Horizontal + WindowInsetsSides.Top),
                 colors = TopAppBarDefaults.topAppBarColors(
-                    containerColor = MaterialTheme.colorScheme.surface.copy(alpha = toolbarOpacity))
+                    containerColor = containerColor, scrolledContainerColor = containerColor),
+                scrollBehavior = scrollBehavior,
             ) {
                 AppListBarAction(
                     icon = Icons.Outlined.CheckCircle,
@@ -358,6 +372,7 @@ private fun AppListScaffold(
     )
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @PreviewCombinedColorLayout
 @Composable
 private fun AppListPreview() {
@@ -373,8 +388,6 @@ private fun AppListPreview() {
         AppListScaffold(
             listState = listState,
             eventHandler = remember { PseudoCompOptionsEventHandler() },
-            paddingValues = PaddingValues(),
-            contentOffsetProgress = { 50 },
             content = { _ -> Box(Modifier.fillMaxSize().background(Color.DarkGray)) }
         )
     }

api_viewing/src/main/kotlin/com/madness/collision/unit/api_viewing/ui/list/AppListAppBar.kt

@@ -50,6 +50,7 @@ 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.material3.minimumInteractiveComponentSize
 import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
@@ -74,6 +75,7 @@ fun AppListBar(
     isRefreshing: Boolean,
     windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
     colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(),
+    scrollBehavior: TopAppBarScrollBehavior? = null,
     primaryAction: @Composable () -> Unit,
 ) {
     TopAppBar(
@@ -110,6 +112,7 @@ fun AppListBar(
         },
         windowInsets = windowInsets,
         colors = colors,
+        scrollBehavior = scrollBehavior,
     )
 }
 

api_viewing/src/main/kotlin/com/madness/collision/unit/api_viewing/ui/list/AppListHeader.kt

@@ -17,9 +17,6 @@
 package com.madness.collision.unit.api_viewing.ui.list
 
 import androidx.activity.compose.BackHandler
-import androidx.compose.animation.core.LinearEasing
-import androidx.compose.animation.core.animateIntOffsetAsState
-import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
@@ -31,7 +28,6 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -64,14 +60,12 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.madness.collision.chief.app.BoundoTheme
@@ -81,13 +75,10 @@ import racra.compose.smooth_corner_rect_library.AbsoluteSmoothCornerShape
 
 @Stable
 interface ListHeaderState {
-    var headerHeight: Int
-    val headerOffsetY: Int
     val devInfoLabel: String
     val devInfoDesc: String
     var statsSize: Int
     fun setTerminalCat(cat: ListSrcCat)
-    fun updateOffsetY(scrollY: Int)
     fun showStats(options: AppListOptions)
     fun showSystemModules()
     fun onQueryChange(query: String)
@@ -100,17 +91,7 @@ fun AppListSwitchHeader(
     appSrcState: AppSrcState,
     headerState: ListHeaderState,
 ) {
-    val headerOffset by animateIntOffsetAsState(
-        targetValue = IntOffset(0, headerState.headerOffsetY),
-        animationSpec = tween(easing = LinearEasing, durationMillis = 0),
-        label = "HeaderOffsetAnim",
-    )
-    Column(
-        modifier = Modifier
-            .onSizeChanged { headerState.headerHeight = it.height }
-            .offset { headerOffset }
-            .then(modifier)
-    ) {
+    Column(modifier = modifier) {
         var isQuerying: Boolean by remember { mutableStateOf(false) }
         AppListHeader(
             modifier = Modifier.padding(horizontal = 12.dp, vertical = 10.dp),

api_viewing/src/main/kotlin/com/madness/collision/unit/api_viewing/ui/list/AppListState.kt

@@ -26,7 +26,6 @@ import androidx.activity.result.contract.ActivityResultContracts
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.Stable
-import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
@@ -116,13 +115,9 @@ class ListHeaderStateImpl(
     private val viewModel: AppListViewModel,
     private val context: Context,
 ) : ListHeaderState {
-    private var scrollY by mutableIntStateOf(0)
-    override var headerHeight: Int by mutableIntStateOf(0)
-    override val headerOffsetY: Int by derivedStateOf { -(scrollY.coerceIn(0, headerHeight)) }
     override var statsSize: Int by mutableIntStateOf(0)
 
     override fun setTerminalCat(cat: ListSrcCat) = viewModel.setListSrcCat(cat)
-    override fun updateOffsetY(scrollY: Int) { this.scrollY = scrollY }
     override fun showSystemModules() = context.showPage<SystemModulesFragment>()
     override fun showStats(options: AppListOptions) {
         getStatsFragment(options)?.let(context::showPage)