Back

addLayout

JS Py

Hello World

Content:
- Properties
- Methods

Adds a layout into your app.

lay = ui.addLayout( parent, type, options, width, height ) → Object: Layout Component

A layout is the basic ui component of an app. It is where you add other ui components such as buttons, textfields, checkboxes, list, images and many more.

To add a layout, simply call the addLayout method of the ui object.

There are 4 types of layouts: Linear, Absolute, Frame, and Slide.

Layouts are transparent by default but you can set a background color or a background image.

You can add child objects to the Layout by passing the layout as parent when initializing a control.

By default, Layouts will auto-size to wrap and fit their contents but you have 3 more options as to how layout sizes within it's parent: FillXY, FillX, and FillY.

### Linear Layouts
Linear layouts are probably the most common type and are used to organize controls in the Vertical or Horizontal orientation on the screen.

You can also pass alignment options. For vertical alignment you can pass Top, VCenter, and Bottom. For horizontal alignment you can pass Left, Center, and Right. These will align your children accordingly.

For children spacing, see childSpacing property below.

### Absolute Layouts
Absolute layouts ignore all alignment options and allow the absolute positioning of controls by calling the setPosition method of each child control. However, you are encouraged to use linear layouts for most of your programs, unless it is absolutely necessary.

### Frame Layouts
Frame layouts are used to display objects in front or behind each other. Everytime a child control is added, the new control is placed in a new layer in front of the previously added control at the top left of the frame. You can then use setPosition method of the child control to position it relative to the frame.

### Slide Layouts
Slide layouts are used to display carousels or swipeable contents. The same as the Frame layout, this will add a new layer when a new control is added with a swipeable behaviour. You can pass alignment options to align your children within the Slide layout layer. Please note that Vertical and Horizontal options will be the direction of the swipe.

If your parent layout is of type Slide, do not add setOnTouch callback handler in order for the slide layout to work perfectly.

Properties

These are the setter and getter properties for the addLayout Component.

absHeight

absLeft

absTop

absWidth

alignment

backColor

backImage

border

borderColor

borderStyle

childMargins

childSpacing

cornerRadius

currentSlide

disabled

fontFile

height

isVisible

left

margins

opacity

options

orientation

padding

parent

position

rotation

textColor

textSize

top

type

verticalAlignment

visibility

width

Example - Main layout

class Main extends App
{
    onStart()
    {
        // Create a fullscreen linear layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter", 1, 1)

        // Add a callback hanlder when the layout is touched
        this.main.setOnTouch( this.onTouch )

        // Add a button control to the main layout
        this.btn = ui.addButton(this.main, "Button", "primary")

        // Add a callback handler when the button is touched
        this.btn.setOnTouch( this.btnTouch )
    }

    onTouch()
    {
        ui.showPopup( "You click the layout!" )
    }

    btnTouch()
    {
        if(this.main.backColor == "yellow")
        {
            this.main.backColor = "white"
        }
        else
        {
            this.main.backColor = "yellow"
        }
    }
}

from hybrid import ui

def OnStart():
    global main
    # Create a fullscreen linear layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "VCenter", 1, 1)

    # Add a callback hanlder when the layout is touched
    main.setOnTouch(onTouch)

    # Add a button control to the main layout
    btn = ui.addButton(main, "Button", "primary")

    # Add a callback handler when the button is touched
    btn.setOnTouch(btnTouch)

def onTouch(event):
    ui.showPopup("You click the layout!")

def btnTouch(event):
    if main.backColor == "yellow":
        main.backColor = "white"
    else:
        main.backColor = "yellow"

Copy All Run

Example - Bottom aligned with margins

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen main layout with objects aligned at the bottom
        this.main = ui.addLayout("main", "Linear", "Bottom,FillXY")

        // Set margins for children controls
        this.main.setChildMargins(0, 0.05, 0, 0.05)

        // Add buttons to the main layout
        this.btn1 = ui.addButton( this.main, "Button 1", "Primary" )
        this.btn2 = ui.addButton( this.main, "Button 2", "Secondary" )
        this.btn3 = ui.addButton( this.main, "Button 3", "Primary,Outlined" )
    }
}

from hybrid import ui

def OnStart():
    # Creates a fullscreen main layout with objects aligned at the bottom
    main = ui.addLayout("main", "Linear", "Bottom,FillXY")

    # Set margins for children controls
    main.setChildMargins(0, 0.05, 0, 0.05)

    # Add buttons to the main layout
    btn1 = ui.addButton(main, "Button 1", "Primary")
    btn2 = ui.addButton(main, "Button 2", "Secondary")
    btn3 = ui.addButton(main, "Button 3", "Primary,Outlined")

Copy All Run

Example - Orientation and spacing

class Main extends App
{
    onStart()
    {
        // Create a fullscreen main layout with objects centered horizontally
        this.main = ui.addLayout("main", "Linear", "VCenter,Horizontal", 1, 1)

        // Set the children spacing
        this.main.childSpacing = "even"

        // Add buttons to the main layout.
        this.btn1 = ui.addButton(this.main, "Button 1", "Primary")
        this.btn2 = ui.addButton(this.main, "Button 2", "Secondary")
        this.btn3 = ui.addButton(this.main, "Button 3", "Primary,Outlined")
    }
}

from hybrid import ui

def OnStart():
    # Create a fullscreen main layout with objects centered horizontally
    main = ui.addLayout("main", "Linear", "VCenter,Horizontal", 1, 1)

    # Set the children spacing
    main.childSpacing = "even"

    # Add buttons to the main layout.
    btn1 = ui.addButton(main, "Button 1", "Primary")
    btn2 = ui.addButton(main, "Button 2", "Secondary")
    btn3 = ui.addButton(main, "Button 3", "Primary,Outlined")

Copy All Run

Example - Slide Layout

class Main extends App
{
    onStart()
    {
        // Create a fullscreen slide layout with objects vertically centered
        // You can pass `Vertical` option to make a vertical slide
        this.main = ui.addLayout( "main", "Slide", "VCenter,FillXY" )

        // Adds an onSlide event handler to the layout
        this.main.setOnSlide( this.onSlide )

        // Adds a yellow-colored Linear first layout to the slide
        var lay1 = ui.addLayout(this.main, "Linear", "VCenter", 0.8, 0.5)
        lay1.backColor = "yellow"
        ui.addText(lay1, "First Page")

        // Adds a green-colored Linear second layout to the slide
        var lay2 = ui.addLayout(this.main, "Linear", "VCenter", 0.8, 0.5)
        lay2.backColor = "green"
        ui.addText(lay2, "Second Page")

        // Adds a red-colored Linear third layout to the slide
        var lay3 = ui.addLayout(this.main, "Linear", "VCenter", 0.8, 0.5)
        lay3.backColor = "red"
        ui.addText(lay3, "Third Page")

        // Adds a blue-colored Linear fourth layout to the slide
        var lay4 = ui.addLayout(this.main, "Linear", "VCenter", 0.8, 0.5)
        lay4.backColor = "blue"
        ui.addText(lay4, "Fourth Page")

        ui.showPopup("Swipe horizontally", "Long");
    }

    onSlide( ctrl, index ) {
        ui.showPopup( index, "", 350 );
    }
}

from hybrid import ui

def OnStart():
    # Create a fullscreen slide layout with objects vertically centered
    # You can pass `Vertical` option to make a vertical slide
    main = ui.addLayout("main", "Slide", "VCenter,FillXY")

    # Adds an onSlide event handler to the layout
    main.setOnSlide(onSlide)

    # Adds a yellow-colored Linear first layout to the slide
    lay1 = ui.addLayout(main, "Linear", "VCenter", 0.8, 0.5)
    lay1.backColor = "yellow"
    ui.addText(lay1, "First Page")

    # Adds a green-colored Linear second layout to the slide
    lay2 = ui.addLayout(main, "Linear", "VCenter", 0.8, 0.5)
    lay2.backColor = "green"
    ui.addText(lay2, "Second Page")

    # Adds a red-colored Linear third layout to the slide
    lay3 = ui.addLayout(main, "Linear", "VCenter", 0.8, 0.5)
    lay3.backColor = "red"
    ui.addText(lay3, "Third Page")

    # Adds a blue-colored Linear fourth layout to the slide
    lay4 = ui.addLayout(main, "Linear", "VCenter", 0.8, 0.5)
    lay4.backColor = "blue"
    ui.addText(lay4, "Fourth Page")

    ui.showPopup("Swipe horizontally", "Long");

def onSlide(ctrl, index):
    ui.showPopup(index, "", 350)

Copy All Run

Methods

The following methods are available on the Layout object:

animate( anim, duration )

bringForward( zIndex )

childToFront( child )

destroy()

getChildOrder( child ) → Number

getCurrentSlide() → Number

getPosition( options ) → Object

gone()

goto( index )

hasChild( child ) → Boolean

hide()

next()

previous()

removeChild( child )

sendBackward( zIndex )

setBorder( width, clr, style )

setChildMargins( left, top, right, bottom, mode )

setCornerRadius( tl, tr, bl, br, mode )

setMargins( left, top, right, bottom, mode )

setOnContextMenu( callback )

setOnTouch( callback )

setPadding( left, top, right, bottom, mode )

setPosition( left, top, mode )

setScale( x, y )

setSize( width, height )

show()

Boolean: Sets or returns the disabled state of the control.

Boolean: Returns whether the control is visible or not.

Number: Fraction of the screen width. [0-1]

Number: The time in milliseconds.

Number: The z-index. A negative value behaves like `sendBackward` method.

Number: Index of a given layout.

Number: The z-index. A positve value behaves like `bringForward` method.

Number: Border-left thickness in pixels.

Number: Left margin.

Number: Top margin.

Number: Right margin.

Number: Bottom margin.

Number: Top-Left border radius in pixels.

Number: Top-Right border radius in pixels.

Number: Bottom-Left border radius in pixels.

Number: Bottom-Right border radius in pixels.

Number: Fraction of the parent width.

Number: Fraction of the parent height.

Number: Fraction of the component width.

Number: Fraction of the component height. [0-1]

Number: Fraction of the component width. [0-1]

Number: Fraction of the parent width. [0-1]

Number: Fraction of the screen height. [0-1]

Number: The x-scale of the component.Values less than `0` is smaller than the normal. While values greater than `1` is greater than the normal.

Number: The y-scale of the component. Values less than `1` is smaller than the normal. While vaues greater than `1` is greater than the normal.

Number: Fraction of the parent height. [0-1]

Number: Returns the absolute height of the control in pixels.

Number: Returns the absolute distance of the control from the left in pixels.

Number: Returns the absolute distance of the control from the top in pixels.

Number: Returns the absolute width of the control in pixels.

Number: Sets or returns the border thickness in pixels.

Number: Sets or returns the corner radius in pixels.

Number: Sets or returns the index of the current slide.

Number: Sets or returns the height of the control as a fraction of the parent control.

Number: Returns the distance of the control from the left.

Number: Sets or returns the opacity of the control.

Number: Sets or returns the angle of rotation in degrees.

Number: Sets or returns the size of the text within the control.

Number: Returns the distance of the control from the top.

Number: Sets or returns the width of the control as a fraction of the parent control.

String: “The layout type. Values can be `Linear` `Absolute` `Frame` `Slide`”

String: “Layout options. Values can be
Orientation: `Horizontal` `Vertical`
`Horizontal Alignment: `Left` `Center` `Right`
`Vertical Alignment: `Top` `VCenter` `Bottom`
`Dimensions`: `FillX` `FillY`
`Scroll`: `ScrollX` `ScrollY` `ScrollXY` `NoScrollBar`
`Utils`: `BackColor` to apply light or dark background rather than transparent.”

String: “The type of animation. Here are the available values
`bounce` `flash` `pulse` `rubberBand` `shakeX` `shakeY` `headShake` `swing` `tada` `wobble` `jello` `heartBeat`
`Back Entrances `backInDown` `backInLeft` `backInRight` `backInUp`
`Back Exits `backOutDown` `backOutLeft` `backOutRight` `backOutUp`
`Bouncing Entrances `bounceIn` `bounceInDown` `bounceInLeft` `bounceInRight` `bounceInUp`
`Bouncing exits `bounceOut` `bounceOutDown` `bounceOutLeft` `bounceOutRight` `bounceOutUp`
`Fading entrances `fadeIn` `fadeInDown` `fadeInDownBig` `fadeInLeft` `fadeInLeftBig` `fadeInRight` `fadeInRightBig` `fadeInUp` `fadeInUpBig` `fadeInTopLeft` `fadeInTopRight` `fadeInBottomLeft` `fadeInBottomRight`
`Fading exits `fadeOut` `fadeOutDown` `fadeOutDownBig` `fadeOutLeft` `fadeOutLeftBig` `fadeOutRight` `fadeOutRightBig` `fadeOutUp` `fadeOutUpBig` `fadeOutTopLeft` `fadeOutTopRight` `fadeOutBottomRight` `fadeOutBottomLeft`
`Flippers `flip` `flipInX` `flipInY` `flipOutX` `flipOutY`
`Lightspeed `lightSpeedInRight` `lightSpeedInLeft` `lightSpeedOutRight` `lightSpeedOutLeft`
`Rotating Entrances `rotateIn` `rotateInDownLeft` `rotateInDownRight` `rotateInUpLeft` `rotateInUpRight`
`Rotating Exits `rotateOut` `rotateOutDownLeft` `rotateOutDownRight` `rotateOutUpLeft` `rotateOutUpRight`
`Specials `hinge` `jackInTheBox` `rollIn` `rollOut`
`Zooming Entrances `zoomIn` `zoomInDown` `zoomInLeft` `zoomInRight` `zoomInUp`
`Zooming Exits `zoomOut` `zoomOutDown` `zoomOutLeft` `zoomOutRight` `zoomOutUp`
`Sliding Entrances `slideInDown` `slideInLeft` `slideInRight` `slideInUp`
`Sliding Exits `slideOutDown` `slideOutLeft` `slideOutRight` `slideOutUp`.”

String: “The mode of the measurements. Values can be `px` or `%`”

String: “Border color in hexadecimal form `#rrggbb`”

String: “Border-styles. Values can be `dotted` `dashed` `solid` `double` `groove` `ridge` `inset` and `outset`. Default is `solid`”

String: “`px`. Default is a fraction of viewport.”

String: “Unit. Values are `px` `rem` or `%`.”

String: “`px` or `%`”

String: “The size thickness mode. Can be `px`”

String: “Unit of measurement. Can be `px` or `%` or any css unit of measurement.”

String: Sets or returns the horizontal alignment of the control in a Linear Layout. Values can be Left Center and Right

String: A hexadecimal color of the form #rrggbb

String: The path to your image file.

String: Sets or returns the border color. Color is in hexadecimal form #rrggbb

String: Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.

String: Sets or returns the spacing of the child control in a Linear Layout. Values can be Around Between Even

String: Sets or returns the relative path to the font-family use.

String: Sets or returns the options of the control.

String: Sets or returns the orientation of the controls in a Linear Layout. Values can be Horizontal or Vertical

String: Sets or returns the color of the text.

String: Returns the type of the control.

String: Sets or returns the vertical alignment of the controls in a Linear Layout. Values can be Top VCenter or Bottom

String: Sets or returns the visibility of the control.

Object: The parent layout where to add this component. Pass a string `main` for the main layout of your app.

Object: Fraction of the screen height. [0-1]

Object: The child object of the layout.

Object: The child component of the layout.

Object: The child component to check.

Object: The child component to be remove.

Object: The pointer event object.

Object: The click event object.

Object: Returns the parent layout control.

Object: Returns the position of the control. The returned object has left top right and bottom props.

List: Sets or returns the margins of child components. The array is of the form [left, top, right, bottom].

List: Sets or returns the margin of the control. Works on controls with Linear parent only. You can also pass a number to set equal margins for all sides.

List: Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.

function( event )

lay.animate
Animate the component

lay.bringForward
Bring this component forward by a given z-index

lay.childToFront
Move the child to the front

lay.destroy
Destroy the component

lay.getChildOrder
Returns the index of the child from the layout children stack in order

lay.getCurrentSlide
Returns the index of the current Slide Layout

lay.getPosition
Returns the position of the component. The return object is of the form `{ left, top, right, bottom

lay.gone
Destroy the component

lay.goto
Transition to the given index

lay.hasChild
Check whether a component is a child of this layout

lay.hide
Hide the component

lay.next
Transition to the next slide

lay.previous
Transition to the previous slide

lay.removeChild
Removes a child from this layout

lay.sendBackward
Bring this component backward by a given z-index

lay.setBorder
Sets the border line for the component container

lay.setChildMargins
Sets a default margins for the children of the layout component

lay.setCornerRadius
Sets the corner radius of the component

lay.setMargins
Sets the margin of the component

lay.setOnContextMenu
Adds a callback function on right click

lay.setOnTouch
Adds a callback handler when the component is touch

lay.setPadding
Sets the padding component container

lay.setPosition
Sets the position of the component relative to its parent dimensions

lay.setScale
Sets the x and y scaling of the component

lay.setSize
Sets the size of the component

lay.show
Makes the layout visible