mirror of
https://github.com/Insality/druid.git
synced 2025-06-27 10:27:47 +02:00
99 lines
2.8 KiB
Markdown
99 lines
2.8 KiB
Markdown
# 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
|
|
|
|
```lua
|
|
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
|
|
|
|
```lua
|
|
-- 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
|
|
|
|
```lua
|
|
-- Subscribe to layout changes
|
|
layout.on_layout_change:subscribe(function(self)
|
|
print("Layout changed")
|
|
end)
|
|
```
|
|
|
|
## Example
|
|
|
|
```lua
|
|
-- 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
|