Druid Layout Component

Description

The Layout component provides automatic positioning and sizing of UI elements based on predefined layout rules. It helps create responsive UIs that adapt to different screen sizes and orientations.

Features

Automatic positioning of nodes based on layout rules
Support for different layout types (static, dynamic, fixed)
Anchoring nodes to different parts of the screen
Automatic adjustment when screen size changes
Pivot-based positioning
Margin and padding support

Basic Usage

local layout = self.druid:new_layout("layout_node")

Parameters

node: The node or node_id of the layout container

Layout Types

The Layout component supports several layout types:

Static Layout: Fixed position relative to parent
Dynamic Layout: Position based on parent size and node anchor
Fixed Layout: Position based on screen size and node anchor

Methods

-- Set layout type
layout:set_static_layout() -- Fixed position relative to parent
layout:set_dynamic_layout() -- Position based on parent size
layout:set_fixed_layout() -- Position based on screen size

-- Update layout size
layout:set_size(width, height)

-- Set node anchor (position relative to parent)
layout:set_anchor(anchor_type)
-- Available anchor types: ANCHOR.CENTER, ANCHOR.TOP, ANCHOR.BOTTOM, etc.

-- Set node pivot (position relative to node itself)
layout:set_pivot(pivot_type)
-- Available pivot types: PIVOT.CENTER, PIVOT.N, PIVOT.S, etc.

-- Set margins (distance from anchor point)
layout:set_margin(left, top, right, bottom)

-- Set padding (internal spacing)
layout:set_padding(left, top, right, bottom)

-- Manually update layout
layout:update()

-- Reset to initial state
layout:reset()

Events

-- Subscribe to layout changes
layout.on_layout_change:subscribe(function(self)
    print("Layout changed")
end)

Example

-- Create a layout that anchors to the top right of the screen
local layout = self.druid:new_layout("panel")
layout:set_fixed_layout()
layout:set_anchor(druid.const.ANCHOR.TOP_RIGHT)
layout:set_pivot(druid.const.PIVOT.NE)
layout:set_margin(0, 50, 50, 0) -- 50px from top, 50px from right

-- Create a dynamic layout that centers in its parent
local layout = self.druid:new_layout("content")
layout:set_dynamic_layout()
layout:set_anchor(druid.const.ANCHOR.CENTER)
layout:set_pivot(druid.const.PIVOT.CENTER)

Notes

The layout component automatically adjusts when the screen size changes
You can nest layouts to create complex UI structures
The layout component works well with other components like Grid and Scroll
For responsive UIs, use fixed layouts for screen-anchored elements and dynamic layouts for elements that should adapt to their parent's size
The layout component respects the node's initial position as an offset from the calculated position

2.8 KiB Raw Blame History