fix: scrolling issues in nestedScroll

ch4rl3x · May 5, 2024 · 94b9ca5 · 94b9ca5
1 parent 01633ce
commit 94b9ca5
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 14 deletions.
diff --git a/bottom-drawer-scaffold/build.gradle b/bottom-drawer-scaffold/build.gradle
@@ -8,7 +8,7 @@ apply from: '../buildCompose.gradle'
 
 ext {
     PUBLISH_GROUP_ID = 'de.charlex.compose'
-    PUBLISH_VERSION = '2.0.0-beta01'
+    PUBLISH_VERSION = '2.0.0-beta02'
     PUBLISH_ARTIFACT_ID = 'bottom-drawer-scaffold'
 }
 

diff --git a/...affold/src/main/java/de/charlex/compose/bottomdrawerscaffold/AnchoredDraggableStateExt.kt b/...affold/src/main/java/de/charlex/compose/bottomdrawerscaffold/AnchoredDraggableStateExt.kt
@@ -2,13 +2,17 @@ package de.charlex.compose.bottomdrawerscaffold
 
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.gestures.AnchoredDraggableState
+import androidx.compose.foundation.gestures.Orientation
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
 import androidx.compose.ui.input.nestedscroll.NestedScrollSource
 import androidx.compose.ui.unit.Velocity
 
 @OptIn(ExperimentalFoundationApi::class)
-internal fun <T> AnchoredDraggableState<T>.createPreUpPostDownNestedScrollConnection(topOffset: Int): NestedScrollConnection {
+internal fun <T> AnchoredDraggableState<T>.createPreUpPostDownNestedScrollConnection(
+    orientation: Orientation,
+    onFling: (velocity: Float) -> Unit
+): NestedScrollConnection {
     return object : NestedScrollConnection {
         override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
             val delta = available.toFloat()
@@ -32,9 +36,11 @@ internal fun <T> AnchoredDraggableState<T>.createPreUpPostDownNestedScrollConnec
         }
 
         override suspend fun onPreFling(available: Velocity): Velocity {
-            val toFling = Offset(available.x, available.y).toFloat()
-            return if (toFling < 0 && offset > topOffset) {
-                settle(velocity = toFling)
+            val toFling = available.toFloat()
+            val currentOffset = requireOffset()
+            val minAnchor = anchors.minAnchor()
+            return if (toFling < 0 && currentOffset > minAnchor) {
+                onFling(toFling)
                 // since we go to the anchor with tween settling, consume all for the best UX
                 available
             } else {
@@ -43,12 +49,19 @@ internal fun <T> AnchoredDraggableState<T>.createPreUpPostDownNestedScrollConnec
         }
 
         override suspend fun onPostFling(consumed: Velocity, available: Velocity): Velocity {
-            settle(velocity = Offset(available.x, available.y).toFloat())
+            onFling(available.toFloat())
             return available
         }
 
-        private fun Float.toOffset(): Offset = Offset(0f, this)
+        private fun Float.toOffset(): Offset = Offset(
+            x = if (orientation == Orientation.Horizontal) this else 0f,
+            y = if (orientation == Orientation.Vertical) this else 0f
+        )
 
-        private fun Offset.toFloat(): Float = this.y
+        @JvmName("velocityToFloat")
+        private fun Velocity.toFloat() = if (orientation == Orientation.Horizontal) x else y
+
+        @JvmName("offsetToFloat")
+        private fun Offset.toFloat(): Float = if (orientation == Orientation.Horizontal) x else y
     }
 }
diff --git a/...er-scaffold/src/main/java/de/charlex/compose/bottomdrawerscaffold/BottomDrawerScaffold.kt b/...er-scaffold/src/main/java/de/charlex/compose/bottomdrawerscaffold/BottomDrawerScaffold.kt
@@ -1,6 +1,7 @@
 package de.charlex.compose.bottomdrawerscaffold
 
 import androidx.compose.animation.core.AnimationSpec
+import androidx.compose.animation.core.spring
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.gestures.AnchoredDraggableState
@@ -57,7 +58,7 @@ import kotlin.math.roundToInt
 @Composable
 fun rememberBottomDrawerScaffoldState(
     initialValue: BottomDrawerValue = BottomDrawerValue.Collapsed,
-    positionalThreshold: (totalDistance: Float) -> Float = { distance: Float -> distance * 0.5f },
+    positionalThreshold: ((totalDistance: Float) -> Float)? = null,
     velocityThreshold: (() -> Float)? = null,
     animationSpec: AnimationSpec<Float> = tween(),
     confirmValueChange: (newValue: BottomDrawerValue) -> Boolean = { true }
@@ -67,8 +68,8 @@ fun rememberBottomDrawerScaffoldState(
     return remember {
         AnchoredDraggableState(
             initialValue = initialValue,
-            positionalThreshold = positionalThreshold,
-            velocityThreshold = velocityThreshold ?: { with(density) { 100.dp.toPx() } },
+            positionalThreshold = positionalThreshold ?: { with(density) { 56.dp.toPx() } },
+            velocityThreshold = velocityThreshold ?: { with(density) { 125.dp.toPx() } },
             animationSpec = animationSpec,
             anchors = DraggableAnchors {
                 BottomDrawerValue.Collapsed at maxHeight
@@ -108,6 +109,8 @@ fun BottomDrawerScaffold(
 ) {
     val scope = rememberCoroutineScope()
 
+    val orientation = Orientation.Vertical
+
     Scaffold(
         modifier = modifier,
         contentWindowInsets = WindowInsets.navigationBars.exclude(WindowInsets.statusBars),
@@ -149,11 +152,14 @@ fun BottomDrawerScaffold(
 
             val anchoredDraggableModifier = Modifier
                 .nestedScroll(
-                    bottomDrawerScaffoldState.createPreUpPostDownNestedScrollConnection(topPadding.toInt())
+                    bottomDrawerScaffoldState.createPreUpPostDownNestedScrollConnection(
+                        orientation = orientation,
+                        onFling = { scope.launch { bottomDrawerScaffoldState.settle(it) } }
+                    )
                 )
                 .anchoredDraggable(
                     state = bottomDrawerScaffoldState,
-                    orientation = Orientation.Vertical,
+                    orientation = orientation,
                     enabled = drawerGesturesEnabled ?: gesturesEnabled,
                 )
                 .semantics {

diff --git a/example/src/main/java/de/charlex/compose/bottomdrawerscaffold/sample/MainActivity.kt b/example/src/main/java/de/charlex/compose/bottomdrawerscaffold/sample/MainActivity.kt
@@ -6,6 +6,7 @@ import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
@@ -232,7 +233,13 @@ fun RowEntry(
     label: String,
 ) {
     Row(
-        modifier = Modifier.padding(
+        modifier = Modifier
+            .height(50.dp)
+            .fillMaxWidth()
+            .clickable {
+                println("Click on $label")
+            }
+            .padding(
             start = 40.dp,
             end = 40.dp,
             top = 10.dp,