ConstraintLayoutBaseScope

ConstraintLayoutBaseScope()

fun applyTo(state: State): Unit

fun constrain(ref: ConstrainedLayoutReference, constrainBlock: ConstrainScope.() -> Unit): ConstrainScope

Specifies the constraints associated to the layout identified with ref.

fun constrain(ref: HorizontalChainReference, constrainBlock: HorizontalChainScope.() -> Unit): HorizontalChainScope

Specifies additional constraints associated to the horizontal chain identified with ref.

fun constrain(ref: VerticalChainReference, constrainBlock: VerticalChainScope.() -> Unit): VerticalChainScope

Specifies additional constraints associated to the vertical chain identified with ref.

fun constrain(
    vararg refs: ConstrainedLayoutReference,
    constrainBlock: ConstrainScope.() -> Unit
): Unit

Convenient way to apply the same constraints to multiple ConstrainedLayoutReferences.

fun createAbsoluteLeftBarrier(
    vararg elements: LayoutReference,
    margin: Dp = 0.dp
): ConstraintLayoutBaseScope.VerticalAnchor

Creates and returns a left barrier, containing the specified elements.

fun createAbsoluteRightBarrier(
    vararg elements: LayoutReference,
    margin: Dp = 0.dp
): ConstraintLayoutBaseScope.VerticalAnchor

Creates and returns a right barrier, containing the specified elements.

fun createBottomBarrier(vararg elements: LayoutReference, margin: Dp = 0.dp): ConstraintLayoutBaseScope.HorizontalAnchor

Creates and returns a bottom barrier, containing the specified elements.

fun createColumn(
    vararg elements: LayoutReference,
    spacing: Dp = 0.dp,
    weights: FloatArray = floatArrayOf()
): ConstrainedLayoutReference

Creates a Grid based helper that lays out its elements in a single Column.

Example:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.Dimension

ConstraintLayout(
    constraintSet =
        ConstraintSet {
            val (a, b, c, d, e) = createRefsFor(0, 1, 2, 3, 4)
            val column =
                createColumn(
                    a,
                    b,
                    c,
                    d,
                    e,
                    spacing = 10.dp,
                    weights = floatArrayOf(3f, 3f, 2f, 2f, 1f),
                )
            constrain(column) {
                width = Dimension.matchParent
                height = Dimension.matchParent
            }

            constrain(a, b, c, d, e) { height = Dimension.fillToConstraints }
        },
    modifier = Modifier.fillMaxSize()
) {
    repeat(5) {
        Text(text = "item$it", modifier = Modifier.layoutId(it).background(Color.LightGray))
    }
}

fun createEndBarrier(vararg elements: LayoutReference, margin: Dp = 0.dp): ConstraintLayoutBaseScope.VerticalAnchor

Creates and returns an end barrier, containing the specified elements.

fun createFlow(
    vararg elements: LayoutReference?,
    flowVertically: Boolean = false,
    verticalGap: Dp = 0.dp,
    horizontalGap: Dp = 0.dp,
    maxElement: Int = 0,
    padding: Dp = 0.dp,
    wrapMode: Wrap = Wrap.None,
    verticalAlign: VerticalAlign = VerticalAlign.Center,
    horizontalAlign: HorizontalAlign = HorizontalAlign.Center,
    horizontalFlowBias: Float = 0.0f,
    verticalFlowBias: Float = 0.0f,
    verticalStyle: FlowStyle = FlowStyle.Packed,
    horizontalStyle: FlowStyle = FlowStyle.Packed
): ConstrainedLayoutReference

Flow helpers allows a long sequence of Composable widgets to wrap onto multiple rows or columns.

fun createFlow(
    vararg elements: LayoutReference?,
    flowVertically: Boolean = false,
    verticalGap: Dp = 0.dp,
    horizontalGap: Dp = 0.dp,
    maxElement: Int = 0,
    paddingHorizontal: Dp = 0.dp,
    paddingVertical: Dp = 0.dp,
    wrapMode: Wrap = Wrap.None,
    verticalAlign: VerticalAlign = VerticalAlign.Center,
    horizontalAlign: HorizontalAlign = HorizontalAlign.Center,
    horizontalFlowBias: Float = 0.0f,
    verticalFlowBias: Float = 0.0f,
    verticalStyle: FlowStyle = FlowStyle.Packed,
    horizontalStyle: FlowStyle = FlowStyle.Packed
): ConstrainedLayoutReference

Flow helpers allows a long sequence of Composable widgets to wrap onto multiple rows or columns.

fun createFlow(
    vararg elements: LayoutReference?,
    flowVertically: Boolean = false,
    verticalGap: Dp = 0.dp,
    horizontalGap: Dp = 0.dp,
    maxElement: Int = 0,
    paddingLeft: Dp = 0.dp,
    paddingTop: Dp = 0.dp,
    paddingRight: Dp = 0.dp,
    paddingBottom: Dp = 0.dp,
    wrapMode: Wrap = Wrap.None,
    verticalAlign: VerticalAlign = VerticalAlign.Center,
    horizontalAlign: HorizontalAlign = HorizontalAlign.Center,
    horizontalFlowBias: Float = 0.0f,
    verticalFlowBias: Float = 0.0f,
    verticalStyle: FlowStyle = FlowStyle.Packed,
    horizontalStyle: FlowStyle = FlowStyle.Packed
): ConstrainedLayoutReference

Flow helpers allows a long sequence of Composable widgets to wrap onto multiple rows or columns.

fun createGrid(
    vararg elements: LayoutReference,
    rows: @IntRange(from = 1) Int,
    columns: @IntRange(from = 1) Int,
    isHorizontalArrangement: Boolean = true,
    verticalSpacing: Dp = 0.dp,
    horizontalSpacing: Dp = 0.dp,
    rowWeights: FloatArray = floatArrayOf(),
    columnWeights: FloatArray = floatArrayOf(),
    skips: Array<Skip> = arrayOf(),
    spans: Array<Span> = arrayOf(),
    flags: GridFlag = GridFlag.None
): ConstrainedLayoutReference

Helper that creates a fixed Grid layout.

A grid is defined by a set number of rows and columns. By default the given elements are arranged horizontally first (left to right, then top to bottom).

Either rowWeights or columnWeights may be provided to modify their size in the grid relative to each other.

You may provide Spans to define size of each cell within the grid.

To avoid placing Layouts in specific cells (or an area within the grid), you may provide skips. Note that if the provided Spans and Skips overlap, the Skips will take priority, ignoring the overlapping Span definition.

Here's an example showing how to build a calculator layout using a couple of Spans:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.Dimension
import androidx.constraintlayout.compose.Span
import androidx.constraintlayout.compose.atMost

// For most of the keys we can just use the displayed text as the ID.
val ids =
    arrayOf(
        // Text box will span all 4 columns and the first 2 of rows
        "textBox",
        "C",
        "+/-",
        "%",
        "/",
        "7",
        "8",
        "9",
        "*",
        "4",
        "5",
        "6",
        "-",
        "1",
        "2",
        "3",
        "+",
        // The '0' will span two columns, note that it's on the 24th position in the grid
        "0",
        ".",
        "="
    )
ConstraintLayout(
    constraintSet =
        ConstraintSet {
            val idRefs = Array(ids.size) { createRefFor(ids[it]) }

            val g1 =
                createGrid(
                    elements = idRefs,
                    rows = 7,
                    columns = 4,
                    verticalSpacing = 10.dp,
                    horizontalSpacing = 10.dp,
                    spans =
                        arrayOf(
                            // textBox
                            Span(position = 0, rows = 2, columns = 4),
                            // '0' key
                            Span(position = 24, rows = 1, columns = 2)
                        )
                )

            constrain(g1) {
                width = Dimension.matchParent
                height = Dimension.matchParent
            }

            constrain(*idRefs) {
                // Make all the layouts fill up their space, you may still use coercing methods
                // such as `atMost(Dp)` or `atMostWrapContent()` to further limit their size.
                width = Dimension.fillToConstraints
                height = Dimension.fillToConstraints
            }
        },
    modifier = Modifier.fillMaxSize()
) {
    ids.forEach { id ->
        when (id) {
            "textBox" -> {
                Box(
                    modifier =
                        Modifier.background(Color.Gray)
                            // As usual, IDs should only be assigned on top-level children
                            .layoutId(id),
                    contentAlignment = Alignment.BottomEnd
                ) {
                    Text(text = "100", fontSize = 80.sp)
                }
            }
            else -> {
                Button(onClick = {}, Modifier.layoutId(id)) {
                    Text(text = id, fontSize = 30.sp)
                }
            }
        }
    }
}

Here's another example using Skips to easily lay out the typical Keyboard navigation pad:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.Dimension
import androidx.constraintlayout.compose.Skip
import androidx.constraintlayout.compose.atMost

val keys =
    arrayOf("Insert", "Home", "Page Up", "Delete", "End", "Page Down", "↑", "←", "↓", "→")
ConstraintLayout(
    constraintSet =
        ConstraintSet {
            val keyRefs = Array(keys.size) { createRefFor(keys[it]) }

            val g1 =
                createGrid(
                    elements = keyRefs,
                    rows = 5,
                    columns = 3,
                    verticalSpacing = 8.dp,
                    horizontalSpacing = 8.dp,
                    skips =
                        arrayOf(
                            // These positions follow the expected Grid cells indexing
                            // Arranged horizontally by default:
                            //   - 0 is top-left
                            //   - 14 is bottom-right (5 rows x 3 columns - 1)
                            Skip(position = 6, rows = 1, columns = 3),
                            Skip(position = 9, rows = 1, columns = 1),
                            Skip(position = 11, rows = 1, columns = 1)
                        )
                )
            constrain(g1) {
                width = Dimension.matchParent
                height = Dimension.matchParent
            }

            constrain(*keyRefs) {
                width = Dimension.fillToConstraints.atMost(100.dp)
                height = Dimension.fillToConstraints.atMost(100.dp)
            }
        },
    modifier = Modifier.fillMaxSize()
) {
    keys.forEachIndexed { index, key ->
        Box(
            modifier = Modifier.layoutId(key).background(Color.LightGray),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = key,
                textAlign = TextAlign.Center,
                // Make fontSize bigger for the arrow keys
                fontSize = if (index >= 6) 24.sp else TextUnit.Unspecified
            )
        }
    }
}

fun createGuidelineFromAbsoluteLeft(fraction: Float): ConstraintLayoutBaseScope.VerticalAnchor

Creates a guideline at a width fraction from the left of the ConstraintLayout. A fraction of 0f will correspond to the left of the ConstraintLayout, while 1f will correspond to the right.

fun createGuidelineFromAbsoluteLeft(offset: Dp): ConstraintLayoutBaseScope.VerticalAnchor

Creates a guideline at a specific offset from the left of the ConstraintLayout.

fun createGuidelineFromAbsoluteRight(fraction: Float): ConstraintLayoutBaseScope.VerticalAnchor

Creates a guideline at a width fraction from the right of the ConstraintLayout. A fraction of 0f will correspond to the right of the ConstraintLayout, while 1f will correspond to the left.

fun createGuidelineFromAbsoluteRight(offset: Dp): ConstraintLayoutBaseScope.VerticalAnchor

Creates a guideline at a specific offset from the right of the ConstraintLayout.

fun createGuidelineFromBottom(fraction: Float): ConstraintLayoutBaseScope.HorizontalAnchor

Creates a guideline at a height percentage from the bottom of the ConstraintLayout. A fraction of 0f will correspond to the bottom of the ConstraintLayout, while 1f will correspond to the top.

fun createGuidelineFromBottom(offset: Dp): ConstraintLayoutBaseScope.HorizontalAnchor

Creates a guideline at a specific offset from the bottom of the ConstraintLayout.

fun createGuidelineFromEnd(fraction: Float): ConstraintLayoutBaseScope.VerticalAnchor

Creates a guideline at a width fraction from the end of the ConstraintLayout. A fraction of 0f will correspond to the end of the ConstraintLayout, while 1f will correspond to the start.

fun createGuidelineFromEnd(offset: Dp): ConstraintLayoutBaseScope.VerticalAnchor

Creates a guideline at a specific offset from the end of the ConstraintLayout.

fun createGuidelineFromStart(fraction: Float): ConstraintLayoutBaseScope.VerticalAnchor

Creates a guideline at a specific offset from the start of the ConstraintLayout. A fraction of 0f will correspond to the start of the ConstraintLayout, while 1f will correspond to the end.

fun createGuidelineFromStart(offset: Dp): ConstraintLayoutBaseScope.VerticalAnchor

Creates a guideline at a specific offset from the start of the ConstraintLayout.

fun createGuidelineFromTop(fraction: Float): ConstraintLayoutBaseScope.HorizontalAnchor

Creates a guideline at a height fraction from the top of the ConstraintLayout. A fraction of 0f will correspond to the top of the ConstraintLayout, while 1f will correspond to the bottom.

fun createGuidelineFromTop(offset: Dp): ConstraintLayoutBaseScope.HorizontalAnchor

Creates a guideline at a specific offset from the top of the ConstraintLayout.

fun createHorizontalChain(
    vararg elements: LayoutReference,
    chainStyle: ChainStyle = ChainStyle.Spread
): HorizontalChainReference

Creates a horizontal chain including the referenced layouts.

Use constrain with the resulting HorizontalChainReference to modify the start/left and end/right constraints of this chain.

fun createRow(
    vararg elements: LayoutReference,
    spacing: Dp = 0.dp,
    weights: FloatArray = floatArrayOf()
): ConstrainedLayoutReference

Creates a Grid based helper that lays out its elements in a single Row.

Example:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.Dimension

ConstraintLayout(
    constraintSet =
        ConstraintSet {
            val (a, b, c, d, e) = createRefsFor(0, 1, 2, 3, 4)
            val row =
                createRow(
                    a,
                    b,
                    c,
                    d,
                    e,
                    spacing = 10.dp,
                    weights = floatArrayOf(3f, 3f, 2f, 2f, 1f),
                )
            constrain(row) {
                width = Dimension.matchParent
                height = Dimension.matchParent
            }

            constrain(a, b, c, d, e) { width = Dimension.fillToConstraints }
        },
    modifier = Modifier.fillMaxSize()
) {
    repeat(5) {
        Text(text = "item$it", modifier = Modifier.layoutId(it).background(Color.LightGray))
    }
}

fun createStartBarrier(vararg elements: LayoutReference, margin: Dp = 0.dp): ConstraintLayoutBaseScope.VerticalAnchor

Creates and returns a start barrier, containing the specified elements.

fun createTopBarrier(vararg elements: LayoutReference, margin: Dp = 0.dp): ConstraintLayoutBaseScope.HorizontalAnchor

Creates and returns a top barrier, containing the specified elements.

fun createVerticalChain(
    vararg elements: LayoutReference,
    chainStyle: ChainStyle = ChainStyle.Spread
): VerticalChainReference

Creates a vertical chain including the referenced layouts.

Use constrain with the resulting VerticalChainReference to modify the top and bottom constraints of this chain.

open operator fun equals(other: Any?): Boolean

open fun hashCode(): Int

open fun reset(): Unit

fun LayoutReference.withChainParams(
    startMargin: Dp = 0.dp,
    topMargin: Dp = 0.dp,
    endMargin: Dp = 0.dp,
    bottomMargin: Dp = 0.dp,
    startGoneMargin: Dp = 0.dp,
    topGoneMargin: Dp = 0.dp,
    endGoneMargin: Dp = 0.dp,
    bottomGoneMargin: Dp = 0.dp,
    weight: Float = Float.NaN
): LayoutReference

Sets the parameters that are used by chains to customize the resulting layout.

Use margins to customize the space between widgets in the chain.

Use weight to distribute available space to each widget when their dimensions are not fixed.

Similarly named parameters available from ConstrainScope.linkTo are ignored in Chains.

Since margins are only for widgets within the chain: Top, Start and End, Bottom margins are ignored when the widget is the first or the last element in the chain, respectively.

fun LayoutReference.withHorizontalChainParams(
    startMargin: Dp = 0.dp,
    endMargin: Dp = 0.dp,
    startGoneMargin: Dp = 0.dp,
    endGoneMargin: Dp = 0.dp,
    weight: Float = Float.NaN
): LayoutReference

Sets the parameters that are used by horizontal chains to customize the resulting layout.

Use margins to customize the space between widgets in the chain.

Use weight to distribute available space to each widget when their horizontal dimension is not fixed.

Similarly named parameters available from ConstrainScope.linkTo are ignored in Chains.

Since margins are only for widgets within the chain: Start and End margins are ignored when the widget is the first or the last element in the chain, respectively.

fun LayoutReference.withVerticalChainParams(
    topMargin: Dp = 0.dp,
    bottomMargin: Dp = 0.dp,
    topGoneMargin: Dp = 0.dp,
    bottomGoneMargin: Dp = 0.dp,
    weight: Float = Float.NaN
): LayoutReference

Sets the parameters that are used by vertical chains to customize the resulting layout.

Use margins to customize the space between widgets in the chain.

Use weight to distribute available space to each widget when their vertical dimension is not fixed.

Similarly named parameters available from ConstrainScope.linkTo are ignored in Chains.

Since margins are only for widgets within the chain: Top and Bottom margins are ignored when the widget is the first or the last element in the chain, respectively.

protected val tasks: MutableList<(State) -> Unit>