Prettier visualization for motion mechanics debug.
Bug: 390325138
Test: Manual / demo code only
Change-Id: I1915777d578479c238cd759c9873c47fdf6e16b3
diff --git a/samples/MotionMechanics/src/com/android/mechanics/demo/demos/MagneticOverviewDismiss.kt b/samples/MotionMechanics/src/com/android/mechanics/demo/demos/MagneticOverviewDismiss.kt
index eedf373..fdfdf10 100644
--- a/samples/MotionMechanics/src/com/android/mechanics/demo/demos/MagneticOverviewDismiss.kt
+++ b/samples/MotionMechanics/src/com/android/mechanics/demo/demos/MagneticOverviewDismiss.kt
@@ -25,7 +25,6 @@
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.fillMaxSize
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
@@ -35,8 +34,10 @@
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.MotionScheme
import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalDensity
@@ -145,6 +146,8 @@
}
}
+ override var visualizationInputRange by mutableStateOf(0f..1000f)
+
// Stuff below is only demo helpers - configuration, stuff that should go to libraries etc.
@Composable
diff --git a/samples/MotionMechanics/src/com/android/mechanics/demo/demos/MaterialFadeThrough.kt b/samples/MotionMechanics/src/com/android/mechanics/demo/demos/MaterialFadeThrough.kt
index f474646..549bf95 100644
--- a/samples/MotionMechanics/src/com/android/mechanics/demo/demos/MaterialFadeThrough.kt
+++ b/samples/MotionMechanics/src/com/android/mechanics/demo/demos/MaterialFadeThrough.kt
@@ -40,8 +40,12 @@
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.android.compose.animation.scene.ElementKey
import com.android.compose.modifiers.thenIf
@@ -116,6 +120,9 @@
return remember(fadeRevealSpec) { Config(fadeRevealSpec, showItemBackground = false) }
}
+ override var visualizationInputRange by mutableStateOf(0f..1000f)
+ override val collapsedGraphHeight: Dp = 20.dp
+
@Composable
override fun ColumnScope.ConfigUi(config: Config, onConfigChanged: (Config) -> Unit) {
LabelledCheckbox(
diff --git a/samples/MotionMechanics/src/com/android/mechanics/demo/staging/debug/DebugUi.kt b/samples/MotionMechanics/src/com/android/mechanics/demo/staging/debug/DebugUi.kt
index 4d70918..d16994b 100644
--- a/samples/MotionMechanics/src/com/android/mechanics/demo/staging/debug/DebugUi.kt
+++ b/samples/MotionMechanics/src/com/android/mechanics/demo/staging/debug/DebugUi.kt
@@ -48,6 +48,7 @@
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.graphics.drawscope.rotate
+import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.android.compose.modifiers.height
import com.android.mechanics.debug.DebugMotionValueVisualization
@@ -56,7 +57,13 @@
/** */
@Composable
-fun DebugUi(modifier: Modifier = Modifier, content: @Composable (modifier: Modifier) -> Unit) {
+fun DebugUi(
+ visualizationInputRange: ClosedFloatingPointRange<Float>,
+ expandedGraphHeight: Dp,
+ collapsedGraphHeight: Dp,
+ modifier: Modifier = Modifier,
+ content: @Composable (modifier: Modifier) -> Unit,
+) {
val debuggerState = remember { MotionValueDebuggerState() }
Box(modifier = modifier.fillMaxHeight()) {
@@ -69,10 +76,10 @@
var isExpanded by remember { mutableStateOf(true) }
Card(modifier = Modifier.fillMaxWidth().padding(16.dp).align(Alignment.BottomStart)) {
- Column(modifier = Modifier.padding(16.dp)) {
+ Column(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
Row(
horizontalArrangement = Arrangement.SpaceBetween,
- modifier = Modifier.clickable { isExpanded = !isExpanded },
+ modifier = Modifier.fillMaxWidth().clickable { isExpanded = !isExpanded },
) {
Text(text = "Motion Value Visualization", style = typography.titleMedium)
val rotation by animateFloatAsState(if (isExpanded) 180f else 0f)
@@ -96,11 +103,15 @@
debuggerState.observedMotionValues.forEach {
key(it) {
var rowExpanded by remember { mutableStateOf(false) }
- val height by animateDpAsState(if (rowExpanded) 60.dp else 20.dp)
+ val height by
+ animateDpAsState(
+ if (rowExpanded) expandedGraphHeight
+ else collapsedGraphHeight
+ )
DebugMotionValueVisualization(
it,
- 0f..1000f,
+ visualizationInputRange,
modifier =
Modifier.height { height.toPx().toInt() }
.fillMaxWidth()
diff --git a/samples/MotionMechanics/src/com/android/mechanics/demo/tuneable/Demo.kt b/samples/MotionMechanics/src/com/android/mechanics/demo/tuneable/Demo.kt
index 4001000..207fa4c 100644
--- a/samples/MotionMechanics/src/com/android/mechanics/demo/tuneable/Demo.kt
+++ b/samples/MotionMechanics/src/com/android/mechanics/demo/tuneable/Demo.kt
@@ -34,6 +34,7 @@
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.android.mechanics.demo.staging.debug.DebugUi
@@ -45,6 +46,14 @@
@Composable fun ColumnScope.ConfigUi(config: T, onConfigChanged: (T) -> Unit)
@Composable fun DemoUi(config: T, modifier: Modifier)
+
+ val visualizationInputRange: ClosedFloatingPointRange<Float>
+
+ val expandedGraphHeight: Dp
+ get() = 96.dp
+
+ val collapsedGraphHeight: Dp
+ get() = 48.dp
}
@Composable
@@ -74,7 +83,12 @@
}
}
- DebugUi(modifier = modifier.fillMaxWidth().weight(1f, fill = true)) { contentModifier ->
+ DebugUi(
+ visualizationInputRange,
+ expandedGraphHeight,
+ collapsedGraphHeight,
+ modifier = modifier.fillMaxWidth().weight(1f, fill = true),
+ ) { contentModifier ->
DemoUi(config, contentModifier)
}
}
