Back

addLayout

JS Py
Hello World
Content:
- Linear Layouts
- Absolute Layouts
- Frame Layouts
- Slide Layouts
- Card Layouts
- Dimensions
- Examples
- Properties
- Methods

Adds a layout into your app.

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

There are 5 types of layouts: "Linear", "Absolute", "Frame", "Slide" and "Card". 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.

Card Layouts

Card layouts are used to display surfaces with elevation and a rounder corners to emphasize its contents. This type of layout has default values for padding. You can clear the padding by setting the padding property to 0. If you want to use the material design card implementation, refer to the Card component.

Dimensions

To set the width and height of a layout, pass a width and height argument as a decimal fraction of its parent's width and height.
In some scenarios where you want the layout to occupy the available space, you can add "FillXY" in the options argument to fill the available width and height of its parent. Similarly, when you want to fill the available horizontal space, you can pass "FillX" and "FillY" for filling the available vertical space.

Here are the available methods for the Layout Component.

Examples

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      

Example - Player control using Card layout

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

        // Create a layout of type card
        this.crd = ui.addLayout(this.main, "Card", "Horiz", 0.9, 0.2);
        this.crd.cornerRadius = 12;
        this.crd.elevation = 8;

        // Clear the default padding of the card
        this.crd.padding = 0;

        // Add a layout at the left of the card
        var lay1 = ui.addLayout(this.crd, "Linear", "Left", 0.6, 1);
        lay1.padding = ["1rem", "1rem", "1rem"];

        // Add a text which is slightly bigger to serve as a song title
        var title = ui.addText(lay1, "100 Years", "H5");

        // Add a subheader text for artist
        var subheader = ui.addText(lay1, "Five For Fighting", "textSecondary")

        // Create a layout for the the player actions
        var actionsLay = ui.addLayout(lay1, "Linear", "Horiz,VCenter,Left,FillAxis", 1);

        // Add a previous icon button to the actions layout
        var prevBtn = ui.addButton(actionsLay, "fast_rewind", "Small,Icon");

        // Add a play icon button to the actions layout
        var playBtn = ui.addButton(actionsLay, "play_arrow", "Icon,Large");
        playBtn.margins = ["1rem", 0, "1rem", 0];

        // Add a next icon button to the actions layout
        var nextBtn = ui.addButton(actionsLay, "fast_forward", "Small,Icon");

        // Create another layout and add it to the card
        var lay2 = ui.addLayout(this.crd, "Linear", "", 0.4, 1);

        // Add a cover image to the right layout of the card
        var img = ui.addImage(lay2, "https://picsum.photos/200/200", "", 1, 1);
    }
}
class Main extends App
    onStart()
        # Create a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        # Create a layout of type card
        this.crd = ui.addLayout(this.main, "Card", "Horiz", 0.9, 0.2)
        this.crd.cornerRadius = 12
        this.crd.elevation = 8

        # Clear the default padding of the card
        this.crd.padding = 0

        # Add a layout at the left of the card
        lay1 = ui.addLayout(this.crd, "Linear", "Left", 0.6, 1)
        lay1.padding = ["1rem", "1rem", "1rem"]

        # Add a text which is slightly bigger to serve as a song title
        title = ui.addText(lay1, "100 Years", "H5")

        # Add a subheader text for artist
        subheader = ui.addText(lay1, "Five For Fighting", "textSecondary")

        # Create a layout for the the player actions
        actionsLay = ui.addLayout(lay1, "Linear", "Horiz,VCenter,Left,FillAxis", 1)

        # Add a previous icon button to the actions layout
        prevBtn = ui.addButton(actionsLay, "fast_rewind", "Small,Icon")

        # Add a play icon button to the actions layout
        playBtn = ui.addButton(actionsLay, "play_arrow", "Icon,Large")
        playBtn.margins = ["1rem", 0, "1rem", 0]

        # Add a next icon button to the actions layout
        nextBtn = ui.addButton(actionsLay, "fast_forward", "Small,Icon")

        # Create another layout and add it to the card
        lay2 = ui.addLayout(this.crd, "Linear", "", 0.4, 1)

        # Add a cover image to the right layout of the card
        img = ui.addImage(lay2, "https:# picsum.photos/200/200", "", 1, 1)
Copy All       Run      

Properties

The following properties are available on the Layout object:

absHeight → Number
absLeft → Number
absTop → Number
absWidth → Number
alignment → String
backColor → String
backImage → String
border → Number
borderColor → String
borderStyle → String
childMargins → List
children → List
childSpacing → String
cornerRadius → Number
currentSlide → Number
disabled → Boolean
el → Object
elevation → Number
elStyle → String
fontFile → String
height → Number
isVisible → Boolean
layoutType → String
left → Number
margins → List
opacity → Number
options → String
orientation → String
padding → List
parent → Object
position → Object
rotation → Number
textColor → String
textSize → Number
top → Number
type → String
variant → String
verticalAlignment → String
visibility → String
width → Number

Methods

The following methods are available on the Layout object:

animate( anim, duration )
bringForward( zIndex )
childToFront( child )
clear()
destroy()
getChildOrder( child ) → Number
getPosition( options ) → Object
gone()
goto( index )
hasChild( child ) → Boolean
hide()
next()
previous()
removeChild( child )
sendBackward( zIndex )
setBorder( left?, top?, right?, bottom?, clr?, style? )
setChildMargins( left?, top?, right?, bottom?, mode='px' )
setCornerRadius( tl?, tr?, br?, bl?, mode? )
setMargins( left?, top?, right?, bottom?, mode? )
setOnContextMenu( callback )
setOnLongTouch( callback )
setOnSlide( callback )
setOnTouch( callback )
setPadding( left?, top?, right?, bottom?, mode? )
setPosition( left, top, mode )
setScale( x, y )
setSize( width, height, mode )
show()
Number: Fraction of the parent width `[0-1]`.
Number: Fraction of the parent height `[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: Border-top thickness in pixels.
Number: Border-right thickness in pixels.
Number: Border-bottom thickness in pixels.
Number: Left margin. You can also pass string e.g. `12rem`
Number: Top margin. You can also pass string e.g. `12rem`
Number: Right margin. You can also pass string e.g. `12rem`
Number: Bottom margin. You can also pass string e.g. `12rem`
Number: Top-Left border radius.
Number: Top-Right border radius.
Number: Bottom-Right border radius.
Number: Bottom-Left border radius.
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 parent 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.
String: “The layout type. Values can be `"Linear"`”, “ `"Absolute"`”, “ `"Frame"`”, “ `"Slide"`”, “ `"Card"`”
String: “A comma separated options.
Orientation: `Horizontal`”, “ `Vertical`
Horizontal Alignment: `Left`”, “ `Center`”, “ `Right`
Vertical Alignment: `Top`”, “ `VCenter`”, “ `Bottom`
Dimensions: `FillXY`”, “ `FillX`”, “ `FillY`”, “ `FillAxis`
Scroll: `ScrollX`”, “ `ScrollY`”, “ `ScrollXY`”, “ `NoScrollBar`
Utils:
`BackColor` to apply theme background color rather than transparent.
`NoScrollBar` to remove scrollbar when scroll options is passed.
`TouchThrough` to enable touch events to propagate behind the layers in frame layouts.
`"Touchable"` enable touch in card layout.
`"Outlined"` card variant is outlined.
`"Square"` card rounded corners is remove.”
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 format `#rrggbb`.”
String: “Border-styles. Values can be `dotted`”, “ `dashed`”, “ `solid`”, “ `double`”, “ `groove`”, “ `ridge`”, “ `inset` and `outset`. Default is `solid`”
String: “Unit of measurement.
`px` for pixels
`%` relative to its parent dimension.
`v` relative to viewport dimension”, “
`rem`”
String: “Unit of measurement. Values are `px` `rem` or `%`.”
String: “Unit of measurement.
`rem` for root em.
`px` for pixels
`%` relative to its parent dimension.
`v` relative to viewport dimension.”
String: “Unit of measurement.
`rem` for root em.
`px` for pixels
`%` relative to its parent dimensions
`v` relative to viewport dimensions.”
String: “Unit of measurment. Can be "px"”, “ "rem"”, “ "%"”, “ "v" for viewport width/height or any css supported unit.”
Object: The parent layout where to add this component. Pass a string `main` for the main layout of your app.
Object: The child object of the layout.
Object: The child component of the layout.
Object: The child component to check.
Object: The child control to be remove.
Object: The pointer event object.
Object: The position of the touch event.
Object: The control component.
function( event )
function( pos )
function( component , index )
lay.absHeight
Returns the absolute height of the control in pixels.
lay.absLeft
Returns the absolute distance of the control from the left in pixels.
lay.absTop
Returns the absolute distance of the control from the top in pixels.
lay.absWidth
Returns the absolute width of the control in pixels.
lay.alignment
Sets or returns the horizontal alignment of the control in a Linear Layout. Values can be "Left" "Center" and "Right"
lay.animate
Animate the component.
lay.backColor
A hexadecimal color of the form #rrggbb
lay.backImage
The path to your image file.
lay.border
Sets or returns the border thickness in pixels.
lay.borderColor
Sets or returns the border color. Color is in hexadecimal form #rrggbb
lay.borderStyle
Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.
lay.bringForward
Bring this component forward by a given z-index.
lay.childMargins
Sets or returns the margins of child components. The array is of the form [left, top, right, bottom].
lay.children
Returns all the children added to this layout.
lay.childSpacing
Sets or returns the spacing of the child control in a Linear Layout. Values can be "Around" "Between" "Even"
lay.childToFront
Move the child to the front.
lay.clear
Clear the content of the layout.
lay.cornerRadius
Sets or returns the corner radius in pixels.
lay.currentSlide
Sets or returns the index of the current slide.
lay.destroy
Destroy the component.
lay.disabled
Sets or returns the disabled state of the control.
lay.el
Returns the html container element for the control.
lay.elevation
Sets or returns the elevation of a card layout.
lay.elStyle
Sets the style of the html container element.
lay.fontFile
Sets or returns the relative path to the font-family use.
lay.getChildOrder
Returns the index of the child from the layout children stack in order.
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.height
Sets or returns the height of the control as a fraction of the parent control.
lay.hide
Hide the component.
lay.isVisible
Returns whether the control is visible or not.
lay.layoutType
Sets or returns the layout type. Note: You cannot change the layout type of "Card" and "Slide" to another type.
lay.left
Returns the distance of the control from the left.
lay.margins
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.
lay.next
Transition to the next slide.
lay.opacity
Sets or returns the opacity of the control.
lay.options
Sets or returns the options of the control.
lay.orientation
Sets or returns the orientation of the controls in a Linear Layout. Values can be 'Horizontal' or "Vertical"
lay.padding
Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.
lay.parent
Returns the parent layout control.
lay.position
Returns the position of the control. The returned object has left top right and bottom props.
lay.previous
Transition to the previous slide.
lay.removeChild
Removes a given child from this layout.
lay.rotation
Sets or returns the angle of rotation in degrees.
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.setOnLongTouch
Adds a callback handler when the layout is long touch. The touch timer is about 500 milliseconds.
lay.setOnSlide
Adds a callback function to be called when slide event is triggered.
lay.setOnTouch
Adds a callback handler when the layout is touch.
lay.setPadding
Sets the padding of the component's 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. This will ignore the positioning and flow of controls in the layout.
lay.setSize
Sets the size of the component.
lay.show
Show the component.
lay.textColor
Sets or returns the color of the text.
lay.textSize
Sets or returns the size of the text within the control.
lay.top
Returns the distance of the control from the top.
lay.type
Returns the type of the control.
lay.variant
Sets or returns the card variant. Can be "elevation" or "outlined"
lay.verticalAlignment
Sets or returns the vertical alignment of the controls in a Linear Layout. Values can be "Top" "VCenter" or "Bottom"
lay.visibility
Sets or returns the visibility of the control.
lay.width
Sets or returns the width of the control as a fraction of the parent control.