addLayout

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 click to expand contents

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"
        }
    }
}

Copy All

Example - Bottom aligned with margins click to expand contents

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" )
    }
}

Copy All

Example - Orientation and spacing click to expand contents

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")
    }
}

Copy All

Example - Slide Layout click to expand contents

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 );
    }
}

Copy All

Example - Player control using Card layout click to expand contents

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);
    }
}