Unspecified ItemType padding (#2075)

--------- Co-authored-by: yschimke <yschimke@users.noreply.github.com>
google · Feb 28, 2024 · f079ef4 · f079ef4
1 parent 24ea0a4
commit f079ef4
Show file tree

Hide file tree

Showing 22 changed files with 167 additions and 53 deletions.
diff --git a/compose-layout/api/current.api b/compose-layout/api/current.api
@@ -65,6 +65,7 @@ package com.google.android.horologist.compose.layout {
     method @androidx.compose.runtime.Composable public androidx.compose.ui.Modifier listTextPadding(androidx.compose.ui.Modifier);
     method @androidx.compose.runtime.Composable public kotlin.jvm.functions.Function0<androidx.compose.foundation.layout.PaddingValues> padding(optional com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults.ItemType first, optional com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults.ItemType last, optional float horizontalPercent);
     method @com.google.android.horologist.annotations.ExperimentalHorologistApi public com.google.android.horologist.compose.layout.ScalingLazyColumnState.Factory responsive(optional boolean firstItemIsFullWidth, optional float additionalPaddingAtBottom, optional androidx.compose.foundation.layout.Arrangement.Vertical verticalArrangement, optional float horizontalPaddingPercent, optional com.google.android.horologist.compose.layout.ScalingLazyColumnState.RotaryMode? rotaryMode, optional boolean hapticsEnabled, optional boolean reverseLayout, optional boolean userScrollEnabled);
+    method public androidx.wear.compose.foundation.lazy.ScalingParams responsiveScalingParams(float screenWidthDp);
     method @com.google.android.horologist.annotations.ExperimentalHorologistApi public com.google.android.horologist.compose.layout.ScalingLazyColumnState.Factory scalingLazyColumnDefaults(optional com.google.android.horologist.compose.layout.ScalingLazyColumnState.RotaryMode rotaryMode, optional int initialCenterIndex, optional int initialCenterOffset, optional androidx.compose.foundation.layout.Arrangement.Vertical verticalArrangement, optional androidx.compose.ui.Alignment.Horizontal horizontalAlignment, optional androidx.compose.foundation.layout.PaddingValues contentPadding, optional androidx.wear.compose.foundation.lazy.AutoCenteringParams? autoCentering, optional int anchorType, optional boolean hapticsEnabled, optional boolean reverseLayout);
     field public static final com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults INSTANCE;
   }

diff --git a/...t/src/main/java/com/google/android/horologist/compose/layout/ScalingLazyColumnDefaults.kt b/...t/src/main/java/com/google/android/horologist/compose/layout/ScalingLazyColumnDefaults.kt
@@ -34,6 +34,7 @@ import androidx.compose.ui.util.lerp
 import androidx.wear.compose.foundation.lazy.AutoCenteringParams
 import androidx.wear.compose.foundation.lazy.ScalingLazyColumnDefaults
 import androidx.wear.compose.foundation.lazy.ScalingLazyListAnchorType
+import androidx.wear.compose.foundation.lazy.ScalingParams
 import androidx.wear.compose.material.ChipDefaults
 import com.google.android.horologist.annotations.ExperimentalHorologistApi
 import com.google.android.horologist.compose.layout.ScalingLazyColumnState.RotaryMode
@@ -169,22 +170,6 @@ public object ScalingLazyColumnDefaults {
         reverseLayout: Boolean = false,
         userScrollEnabled: Boolean = true,
     ): ScalingLazyColumnState.Factory {
-        fun calculateVerticalOffsetForChip(
-            viewportDiameter: Float,
-            horizontalPaddingPercent: Float,
-        ): Dp {
-            val childViewHeight: Float = ChipDefaults.Height.value
-            val childViewWidth: Float = viewportDiameter * (1.0f - (2f * horizontalPaddingPercent))
-            val radius = viewportDiameter / 2f
-            return (
-                radius -
-                    sqrt(
-                        (radius - childViewHeight + childViewWidth * 0.5f) * (radius - childViewWidth * 0.5f),
-                    ) -
-                    childViewHeight * 0.5f
-                ).dp
-        }
-
         return object : ScalingLazyColumnState.Factory {
             @Composable
             override fun create(): ScalingLazyColumnState {
@@ -216,22 +201,7 @@ public object ScalingLazyColumnDefaults {
                         bottom = bottomPaddingDp,
                     )
 
-                    val sizeRatio =
-                        ((screenWidthDp - 192) / (233 - 192).toFloat()).coerceIn(0f, 1.5f)
-                    val presetRatio = 0f
-
-                    val minElementHeight = lerp(0.2f, 0.157f, sizeRatio)
-                    val maxElementHeight =
-                        lerp(0.6f, 0.472f, sizeRatio).coerceAtLeast(minElementHeight)
-                    val minTransitionArea = lerp(0.35f, lerp(0.35f, 0.393f, presetRatio), sizeRatio)
-                    val maxTransitionArea = lerp(0.55f, lerp(0.55f, 0.593f, presetRatio), sizeRatio)
-
-                    val scalingParams = ScalingLazyColumnDefaults.scalingParams(
-                        minElementHeight = minElementHeight,
-                        maxElementHeight = maxElementHeight,
-                        minTransitionArea = minTransitionArea,
-                        maxTransitionArea = maxTransitionArea,
-                    )
+                    val scalingParams = responsiveScalingParams(screenWidthDp)
 
                     val screenHeightPx =
                         with(density) { screenHeightDp.dp.roundToPx() }
@@ -260,6 +230,42 @@ public object ScalingLazyColumnDefaults {
         }
     }
 
+    internal fun calculateVerticalOffsetForChip(
+        viewportDiameter: Float,
+        horizontalPaddingPercent: Float,
+    ): Dp {
+        val childViewHeight: Float = ChipDefaults.Height.value
+        val childViewWidth: Float = viewportDiameter * (1.0f - (2f * horizontalPaddingPercent))
+        val radius = viewportDiameter / 2f
+        return (
+            radius -
+                sqrt(
+                    (radius - childViewHeight + childViewWidth * 0.5f) * (radius - childViewWidth * 0.5f),
+                ) -
+                childViewHeight * 0.5f
+            ).dp
+    }
+
+    fun responsiveScalingParams(screenWidthDp: Float): ScalingParams {
+        val sizeRatio =
+            ((screenWidthDp - 192) / (233 - 192).toFloat()).coerceIn(0f, 1.5f)
+        val presetRatio = 0f
+
+        val minElementHeight = lerp(0.2f, 0.157f, sizeRatio)
+        val maxElementHeight =
+            lerp(0.6f, 0.472f, sizeRatio).coerceAtLeast(minElementHeight)
+        val minTransitionArea = lerp(0.35f, lerp(0.35f, 0.393f, presetRatio), sizeRatio)
+        val maxTransitionArea = lerp(0.55f, lerp(0.55f, 0.593f, presetRatio), sizeRatio)
+
+        val scalingParams = ScalingLazyColumnDefaults.scalingParams(
+            minElementHeight = minElementHeight,
+            maxElementHeight = maxElementHeight,
+            minTransitionArea = minTransitionArea,
+            maxTransitionArea = maxTransitionArea,
+        )
+        return scalingParams
+    }
+
     internal val Padding12Pct = 0.1248f
     internal val Padding16Pct = 0.1664f
     internal val Padding20Pct = 0.2083f
@@ -291,12 +297,40 @@ public object ScalingLazyColumnDefaults {
         last: ItemType = ItemType.Unspecified,
         horizontalPercent: Float = 0.052f,
     ): @Composable () -> PaddingValues {
+        val configuration = LocalConfiguration.current
+        val screenWidthDp = configuration.screenWidthDp.toFloat()
+        val screenHeightDp = configuration.screenHeightDp.toFloat()
+
         return {
-            val height = LocalConfiguration.current.screenWidthDp.dp
-            val horizontalPadding = LocalConfiguration.current.screenWidthDp.dp * horizontalPercent
+            val height = screenHeightDp.dp
+            val horizontalPadding = screenWidthDp.dp * horizontalPercent
+
+            val topPadding = if (first != ItemType.Unspecified) {
+                first.topPaddingDp * height + first.paddingCorrection
+            } else {
+                if (configuration.isScreenRound) {
+                    calculateVerticalOffsetForChip(screenWidthDp, horizontalPercent)
+                } else {
+                    32.dp
+                }
+            }
+
+            val bottomPadding = if (last != ItemType.Unspecified) {
+                last.bottomPaddingDp * height + first.paddingCorrection
+            } else {
+                if (configuration.isScreenRound) {
+                    calculateVerticalOffsetForChip(
+                        screenWidthDp,
+                        horizontalPercent,
+                    ) + 10.dp
+                } else {
+                    0.dp
+                }
+            }
+
             PaddingValues(
-                top = first.topPaddingDp * height + first.paddingCorrection,
-                bottom = last.bottomPaddingDp * height + first.paddingCorrection,
+                top = topPadding,
+                bottom = bottomPadding,
                 start = horizontalPadding,
                 end = horizontalPadding,
             )

diff --git a/...yout/src/main/java/com/google/android/horologist/compose/layout/ScalingLazyColumnState.kt b/...yout/src/main/java/com/google/android/horologist/compose/layout/ScalingLazyColumnState.kt
@@ -34,7 +34,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.util.lerp
 import androidx.wear.compose.foundation.ExperimentalWearFoundationApi
 import androidx.wear.compose.foundation.lazy.AutoCenteringParams
 import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
@@ -44,6 +43,7 @@ import androidx.wear.compose.foundation.lazy.ScalingLazyListState
 import androidx.wear.compose.foundation.lazy.ScalingParams
 import androidx.wear.compose.foundation.rememberActiveFocusRequester
 import com.google.android.horologist.annotations.ExperimentalHorologistApi
+import com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults.responsiveScalingParams
 import com.google.android.horologist.compose.layout.ScalingLazyColumnState.RotaryMode
 import com.google.android.horologist.compose.rotaryinput.rememberDisabledHaptic
 import com.google.android.horologist.compose.rotaryinput.rememberRotaryHapticHandler
@@ -159,22 +159,7 @@ public fun rememberResponsiveColumnState(
     val screenWidthDp = configuration.screenWidthDp.toFloat()
     val screenHeightDp = configuration.screenHeightDp.toFloat()
 
-    val sizeRatio =
-        ((screenWidthDp - 192) / (233 - 192).toFloat()).coerceIn(0f, 1.5f)
-    val presetRatio = 0f
-
-    val minElementHeight = lerp(0.2f, 0.157f, sizeRatio)
-    val maxElementHeight =
-        lerp(0.6f, 0.472f, sizeRatio).coerceAtLeast(minElementHeight)
-    val minTransitionArea = lerp(0.35f, lerp(0.35f, 0.393f, presetRatio), sizeRatio)
-    val maxTransitionArea = lerp(0.55f, lerp(0.55f, 0.593f, presetRatio), sizeRatio)
-
-    val scalingParams = androidx.wear.compose.foundation.lazy.ScalingLazyColumnDefaults.scalingParams(
-        minElementHeight = minElementHeight,
-        maxElementHeight = maxElementHeight,
-        minTransitionArea = minTransitionArea,
-        maxTransitionArea = maxTransitionArea,
-    )
+    val scalingParams = responsiveScalingParams(screenWidthDp)
 
     val contentPaddingCalculated = contentPadding()
 

diff --git a/sample/src/main/java/com/google/android/horologist/spec/BottomComposables.kt b/sample/src/main/java/com/google/android/horologist/spec/BottomComposables.kt
@@ -121,6 +121,25 @@ fun BottomOtherCards() {
     }
 }
 
+@Composable
+fun BottomUnspecified() {
+    SampleMenu(
+        columnState = rememberResponsiveColumnState(
+            contentPadding = padding(
+                last = ItemType.Unspecified,
+            ),
+        ),
+        borders = null,
+    ) {
+        item {
+            MessagesCard()
+        }
+        item {
+            BofACard()
+        }
+    }
+}
+
 // @WearCustomPreviews
 @Composable
 fun BottomOtherText() {

diff --git a/sample/src/main/java/com/google/android/horologist/spec/Composables.kt b/sample/src/main/java/com/google/android/horologist/spec/Composables.kt
@@ -148,6 +148,17 @@ fun SampleOtherChips() {
     )
 }
 
+@Composable
+fun SampleUnspecified() {
+    SampleMenu(
+        columnState = rememberResponsiveColumnState(
+            contentPadding = ScalingLazyColumnDefaults.padding(
+                first = ItemType.Unspecified,
+            ),
+        ),
+    )
+}
+
 // @WearCustomPreviews
 @Composable
 fun SampleOtherCards() {

diff --git a/sample/src/test/kotlin/com/google/android/horologist/spec/ScalingLazyColumnExamplesTest.kt b/sample/src/test/kotlin/com/google/android/horologist/spec/ScalingLazyColumnExamplesTest.kt
@@ -85,6 +85,13 @@ class ScalingLazyColumnExamplesTest(device: Device) : ScreenSizeTest(
         }
     }
 
+    @Test
+    fun titleUnspecified() {
+        runTest {
+            SampleUnspecified()
+        }
+    }
+
     @Test
     fun titleOtherCards() {
         runTest {
@@ -144,6 +151,15 @@ class ScalingLazyColumnExamplesTest(device: Device) : ScreenSizeTest(
         }
     }
 
+    @Test
+    fun bottomUnspecified() {
+        runTest(preScreenshotInteractions = {
+            scrollToBottom(1)
+        }) {
+            BottomUnspecified()
+        }
+    }
+
     @Test
     fun bottomOtherText() {
         runTest(preScreenshotInteractions = {

diff --git a/....spec_ScalingLazyColumnExamplesTest_bottomUnspecified[0]_mobvoiticwatchpro5.png b/....spec_ScalingLazyColumnExamplesTest_bottomUnspecified[0]_mobvoiticwatchpro5.png
diff --git a/...spec_ScalingLazyColumnExamplesTest_bottomUnspecified[1]_samsunggalaxywatch5.png b/...spec_ScalingLazyColumnExamplesTest_bottomUnspecified[1]_samsunggalaxywatch5.png
diff --git a/...ScalingLazyColumnExamplesTest_bottomUnspecified[2]_samsunggalaxywatch6large.png b/...ScalingLazyColumnExamplesTest_bottomUnspecified[2]_samsunggalaxywatch6large.png
diff --git a/...st.spec_ScalingLazyColumnExamplesTest_bottomUnspecified[3]_googlepixelwatch.png b/...st.spec_ScalingLazyColumnExamplesTest_bottomUnspecified[3]_googlepixelwatch.png
diff --git a/...t.spec_ScalingLazyColumnExamplesTest_bottomUnspecified[4]_genericsmallround.png b/...t.spec_ScalingLazyColumnExamplesTest_bottomUnspecified[4]_genericsmallround.png
diff --git a/...t.spec_ScalingLazyColumnExamplesTest_bottomUnspecified[5]_genericlargeround.png b/...t.spec_ScalingLazyColumnExamplesTest_bottomUnspecified[5]_genericlargeround.png
diff --git a/...spec_ScalingLazyColumnExamplesTest_bottomUnspecified[6]_smalldevicebigfonts.png b/...spec_ScalingLazyColumnExamplesTest_bottomUnspecified[6]_smalldevicebigfonts.png
diff --git a/...ec_ScalingLazyColumnExamplesTest_bottomUnspecified[7]_largedevicesmallfonts.png b/...ec_ScalingLazyColumnExamplesTest_bottomUnspecified[7]_largedevicesmallfonts.png
diff --git a/...t.spec_ScalingLazyColumnExamplesTest_titleUnspecified[0]_mobvoiticwatchpro5.png b/...t.spec_ScalingLazyColumnExamplesTest_titleUnspecified[0]_mobvoiticwatchpro5.png
diff --git a/....spec_ScalingLazyColumnExamplesTest_titleUnspecified[1]_samsunggalaxywatch5.png b/....spec_ScalingLazyColumnExamplesTest_titleUnspecified[1]_samsunggalaxywatch5.png
diff --git a/..._ScalingLazyColumnExamplesTest_titleUnspecified[2]_samsunggalaxywatch6large.png b/..._ScalingLazyColumnExamplesTest_titleUnspecified[2]_samsunggalaxywatch6large.png
diff --git a/...ist.spec_ScalingLazyColumnExamplesTest_titleUnspecified[3]_googlepixelwatch.png b/...ist.spec_ScalingLazyColumnExamplesTest_titleUnspecified[3]_googlepixelwatch.png
diff --git a/...st.spec_ScalingLazyColumnExamplesTest_titleUnspecified[4]_genericsmallround.png b/...st.spec_ScalingLazyColumnExamplesTest_titleUnspecified[4]_genericsmallround.png
diff --git a/...st.spec_ScalingLazyColumnExamplesTest_titleUnspecified[5]_genericlargeround.png b/...st.spec_ScalingLazyColumnExamplesTest_titleUnspecified[5]_genericlargeround.png
diff --git a/....spec_ScalingLazyColumnExamplesTest_titleUnspecified[6]_smalldevicebigfonts.png b/....spec_ScalingLazyColumnExamplesTest_titleUnspecified[6]_smalldevicebigfonts.png
diff --git a/...pec_ScalingLazyColumnExamplesTest_titleUnspecified[7]_largedevicesmallfonts.png b/...pec_ScalingLazyColumnExamplesTest_titleUnspecified[7]_largedevicesmallfonts.png