Skip to content

Instantly share code, notes, and snippets.

@Mikkareem
Created May 28, 2024 12:11
Show Gist options
  • Save Mikkareem/7b94c2b2e09d746d5ef719f7bebaec60 to your computer and use it in GitHub Desktop.
Save Mikkareem/7b94c2b2e09d746d5ef719f7bebaec60 to your computer and use it in GitHub Desktop.
Custom Modifier to debug the incoming constraints at any point in the Modifier chain in Jetpack Compose
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.sizeIn
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.Measurable
import androidx.compose.ui.layout.MeasureResult
import androidx.compose.ui.layout.MeasureScope
import androidx.compose.ui.node.LayoutModifierNode
import androidx.compose.ui.node.ModifierNodeElement
import androidx.compose.ui.platform.InspectorInfo
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Constraints
import androidx.compose.ui.unit.dp
@Preview
@Composable
fun LayoutModifiersTest() {
Box(
modifier = Modifier
.constraintsDebugger(1)
.fillMaxSize()
.constraintsDebugger(2)
.background(Color.Red)
) {
Column(
modifier = Modifier.constraintsDebugger(3)
) {
Box(
modifier = Modifier
.background(Color.Blue)
.constraintsDebugger(4)
.sizeIn(minWidth = 40.dp, maxWidth = 100.dp)
.constraintsDebugger(5)
.size(200.dp)
.constraintsDebugger(6)
)
Box(
modifier = Modifier
.background(Color.Green)
.constraintsDebugger(7)
.sizeIn(minWidth = 40.dp, maxWidth = 100.dp)
.constraintsDebugger(8)
.size(200.dp)
.constraintsDebugger(9)
)
}
}
}
private fun Modifier.constraintsDebugger(order: Int) = this then ConstraintsDebuggerModifier(order)
private data class ConstraintsDebuggerModifier(val order: Int): ModifierNodeElement<ConstraintsDebugger>() {
override fun create(): ConstraintsDebugger = ConstraintsDebugger(order)
override fun update(node: ConstraintsDebugger) { node.order = order }
override fun InspectorInfo.inspectableProperties() {
name = "ConstraintsDebugger"
properties["order"] = order
}
}
private class ConstraintsDebugger(var order: Int): LayoutModifierNode, Modifier.Node() {
override fun MeasureScope.measure(
measurable: Measurable,
constraints: Constraints
): MeasureResult {
val placeable = measurable.measure(constraints)
println("Constraints($order): $constraints")
return layout(placeable.width, placeable.height) {
placeable.place(0,0)
}
}
}
@Mikkareem
Copy link
Author

Mikkareem commented May 28, 2024

Logcat Output

Constraints(6): Constraints(minWidth = 300, maxWidth = 300, minHeight = 600, maxHeight = 600)
Constraints(5): Constraints(minWidth = 120, maxWidth = 300, minHeight = 0, maxHeight = 2769)
Constraints(4): Constraints(minWidth = 0, maxWidth = 1344, minHeight = 0, maxHeight = 2769)
Constraints(9): Constraints(minWidth = 300, maxWidth = 300, minHeight = 600, maxHeight = 600)
Constraints(8): Constraints(minWidth = 120, maxWidth = 300, minHeight = 0, maxHeight = 2169)
Constraints(7): Constraints(minWidth = 0, maxWidth = 1344, minHeight = 0, maxHeight = 2169)
Constraints(3): Constraints(minWidth = 0, maxWidth = 1344, minHeight = 0, maxHeight = 2769)
Constraints(2): Constraints(minWidth = 1344, maxWidth = 1344, minHeight = 2769, maxHeight = 2769)
Constraints(1): Constraints(minWidth = 0, maxWidth = 1344, minHeight = 0, maxHeight = 2769)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment