Skip to content

Auto Layout (Beta)

Auto Layout is a cornerstone feature of The Maverick SDK, designed to enhance the development process by providing a robust and flexible layout management system. It simplifies the creation of responsive user interfaces by automatically adjusting the position and size of UI components based on predefined constraints.

Key Features

  • Alignment: Easily align UI components both horizontally and vertically, reducing the need for complex manual positioning.
  • Spacing: Manage spacing between components with precision, creating visually appealing and organized layouts.
  • Resizing: Automatically adapts elements' size, minimizing the need for manual sizing and providing an optimal user experience.
  • Intuitive Design: Streamlines the layout creation process, allowing developers to focus more on functionality and less on tedious UI adjustments.

Standard Layout Components

The Maverick SDK offers standard auto layout containers where you can seamlessly integrate your UIElement and specify the necessary constraints.

Note

By inheriting from AutoLayout you can easily create your own custom auto layouts.

Name Description
Column Arrange child elements in a vertical stack
Row Arrange child elements in a horizontal stack

Size

Our standard auto layouts adjust their size based on their children, wrapping to fit the content. To override this, simply call setWidth or setHeight to set fixed size.

Column

The Column component is used to arrange child elements in a vertical stack. It automatically manages spacing, alignment, and distribution of its children.

Code Example

Column().add(
    Text().apply {
        setText("Everysight")
    },
    Text().apply {
        setText("Maverick")
        setForegroundColor(EvsColor.Red)
    }
)
.setBackgroundColor(EvsColor.Blue)
.addToScreen(this) // Add column to current screen

Column(verticalArrangement: .top, horizontalAlignment: .left, spacedBy: 0.0).addAll(uiElements: [
        Text()
            .setText(text: "Everysight"),
        Text()
            .setText(text: "Maverick")
            .setForegroundColor(evsColor: .red)
    ])
.setBackgroundColor(evsColor: .blue)
.addToScreen(screen: self) // Add column to current screen

Output

Row

The Row component arranges its children in a horizontal line. Similar to Column, it offers properties to manage spacing, alignment, and distribution.

Code Example

Row(verticalAlignment = AlignV.center, spacedBy = 15f).add(
    Ellipse().apply {
        setEllipseInfo(0f, 0f, 20f)
        setFillColor(EvsColor.White)
    },
    Column(verticalArrangement = AlignV.center, horizontalAlignment = Align.center, spacedBy = 5f).add(
        Text().apply {
            setText("Everysight")
        },
        Text().apply {
            setText("Maverick")
            setForegroundColor(EvsColor.Red)
        }
    )
)
.setBackgroundColor(EvsColor.Blue)
.addToScreen(this) // Add row to current screen

Row(horizontalArrangement: Align.left, verticalAlignment: .center, spacedBy: 15.0).addAll(uiElements: [
        Ellipse()
            .setEllipseInfo(centerX: 0.0, centerY: 0.0, radius: 20.0)
            .setFillColor(evsColor: .white),
        Column(verticalArrangement: .top, horizontalAlignment: .left, spacedBy: 0.0).addAll(uiElements: [
            Text()
                .setText(text: "Everysight"),
            Text()
                .setText(text: "Maverick")
                .setForegroundColor(evsColor: .red)
        ])
    ])
.setBackgroundColor(evsColor: .blue)
.addToScreen(screen: self) // Add column to current screen

Output

Modifiers

Modifiers enable you to enhance or decorate a UIElement.
Each UIElement has a single, lazily initialized modifier.

Code Example

Column().add(
    Rect().apply {
        setFillColor(EvsColor.White)
        setForegroundColor(EvsColor.Red)
        setWidthHeight(50f, 50f)
    },
    Rect().apply {
        modify {
            it.gravity(Align.right)
            it.padding(right = 10f)
        }
        setFillColor(EvsColor.White)
        setForegroundColor(EvsColor.Green)
        setWidthHeight(50f, 50f)
    }
)
.setWidth(150f) // If not set, the column wraps the content's width
.setBackgroundColor(EvsColor.Blue)
.addToScreen(this) // Add column to current screen

Column(verticalArrangement: .top, horizontalAlignment: .left, spacedBy: 0.0).addAll(uiElements: [
        Rect()
            .setFillColor(evsColor: .white)
            .setForegroundColor(evsColor: .red)
            .setWidthHeight(width: 50.0, height: 50.0),
        Rect()
            .modify(modifier: { m in
                m.gravity(horizontalGravity: .right)
                m.padding(left: 0.0, top: 0.0, right: 10.0, bottom: 0.0)
            })
    ])
.setWidth(width: 150.0) // If not set, the column wraps the content's width
.setBackgroundColor(evsColor: .blue)
.addToScreen(screen: self) // Add column to current screen

Output