Jetpack Compose - Detect size constraint applied through Modifier

user_16099806 0
Viewed 253

How can I detect inside of my composable what height constraint was attached to it via the modifier?

Column1 {
    Text("abc")
    Text("abc")
}
Column2(Modifier.fillMaxHeight()) {
    Text("abc")
    Text("abc")
}
Column3(Modifier.height(200.dp)) {
    Text("abc")
    Text("abc")
}

I want the Text (or other possible Composable) to have a different behaviour depending on whether the height of the Column was not specified, was specified and it is fixed, or was specified and is set to fillMaxHeight. Is this possible?

android-jetpack-compose android
1 Answers

You can use BoxWithConstraints so you can get min/max width or height or Constraints to check if your Composable has fixed or bounded width/height.

For instance this is a dynamic box i use to set dimensions based on size i got from another input so i can make it fit to screen no matter which ratio my required dimensions has.

   BoxWithConstraints(
        modifier = modifier
            .fillMaxWidth()
            .height(120.dp),
        contentAlignment = Alignment.Center
    ) {

        val size = gradientColor.size
        val contentWidth = size.width
        val contentHeight = size.height
        val contentAspectRatio = contentWidth / contentHeight

        var boxHeight: Float = constraints.maxHeight.toFloat()
        var boxWidth: Float = boxHeight * contentAspectRatio

        if (boxWidth > constraints.maxWidth) {
            boxWidth = constraints.maxWidth.toFloat()
            boxHeight = (boxWidth / contentAspectRatio)

        }

       val boxWidthInDp: Dp
       val boxHeightInDp: Dp
       with(LocalDensity.current) {
         boxWidthInDp = boxWidth.toDp()
         boxHeightInDp = boxHeight.toDp()
       }

      Box(
        modifier = Modifier
            .height(boxHeightInDp)
            .width(boxWidthInDp)
            .background(brush, RoundedCornerShape(5.dp))
       )
}

I made a sample that how values are returned in different scenarios from BoxWithConstraints

 @Composable
fun BoxWithConstraintsExamples() {
    Column(modifier = Modifier) {

        BoxWithConstraints(modifier = Modifier.background(Color.Yellow)) {
            val hasBoundedWidth = constraints.hasBoundedWidth
            val hasFixedWidth = constraints.hasFixedWidth
            val minWidth = constraints.minWidth
            val maxWidth = constraints.maxWidth

            val hasBoundedHeight = constraints.hasBoundedHeight
            val hasFixedHeight = constraints.hasFixedHeight
            val minHeight = constraints.minHeight
            val maxHeight = constraints.maxHeight
            Text(
                "minWidth: $minWidth, maxWidth: $maxWidth\n" +
                        "hasBoundedWidth: $hasBoundedWidth, hasFixedWidth: $hasFixedWidth\n" +
                        "minHeight: $minHeight, maxHeight: $maxHeight\n" +
                        "hasBoundedHeight: $hasBoundedHeight, hasFixedHeight: $hasFixedHeight"
            )
        }

        Spacer(modifier = Modifier.height(10.dp))
        BoxWithConstraints(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .background(Color.Red)
        ) {
            val hasBoundedWidth = constraints.hasBoundedWidth
            val hasFixedWidth = constraints.hasFixedWidth
            val minWidth = constraints.minWidth
            val maxWidth = constraints.maxWidth

            val hasBoundedHeight = constraints.hasBoundedHeight
            val hasFixedHeight = constraints.hasFixedHeight
            val minHeight = constraints.minHeight
            val maxHeight = constraints.maxHeight
            Text(
                "minWidth: $minWidth, maxWidth: $maxWidth\n" +
                        "hasBoundedWidth: $hasBoundedWidth, hasFixedWidth: $hasFixedWidth\n" +
                        "minHeight: $minHeight, maxHeight: $maxHeight\n" +
                        "hasBoundedHeight: $hasBoundedHeight, hasFixedHeight: $hasFixedHeight")
        }

        Spacer(modifier = Modifier.height(10.dp))

        BoxWithConstraints(
            modifier = Modifier
                .width(200.dp)
                .height(200.dp)
                .background(Color.Green)
        ) {

            val hasBoundedWidth = constraints.hasBoundedWidth
            val hasFixedWidth = constraints.hasFixedWidth
            val minWidth = constraints.minWidth
            val maxWidth = constraints.maxWidth

            val hasBoundedHeight = constraints.hasBoundedHeight
            val hasFixedHeight = constraints.hasFixedHeight
            val minHeight = constraints.minHeight
            val maxHeight = constraints.maxHeight
            Text(
                "minWidth: $minWidth, maxWidth: $maxWidth, maxWidthDp: $maxWidth\n" +
                        "hasBoundedWidth: $hasBoundedWidth, hasFixedWidth: $hasFixedWidth\n" +
                        "minHeight: $minHeight, maxHeight: $maxHeight\n" +
                        "hasBoundedHeight: $hasBoundedHeight, hasFixedHeight: $hasFixedHeight")
        }


        BoxWithConstraints(
            modifier = Modifier
                .widthIn(200.dp)
                .heightIn(200.dp)
                .background(Color.Magenta)
        ) {

            val hasBoundedWidth = constraints.hasBoundedWidth
            val hasFixedWidth = constraints.hasFixedWidth
            val minWidth = constraints.minWidth
            val maxWidth = constraints.maxWidth

            val hasBoundedHeight = constraints.hasBoundedHeight
            val hasFixedHeight = constraints.hasFixedHeight
            val minHeight = constraints.minHeight
            val maxHeight = constraints.maxHeight
            Text(
                "minWidth: $minWidth, maxWidth: $maxWidth" +
                        "hasBoundedWidth: $hasBoundedWidth, hasFixedWidth: $hasFixedWidth\n" +
                        "minHeight: $minHeight, maxHeight: $maxHeight\n" +
                        "hasBoundedHeight: $hasBoundedHeight, hasFixedHeight: $hasFixedHeight")
        }

    }
}

Result

enter image description here

user_54578530
Related