Skip to content

UIPaddingContainer

Container that wraps a single UI element and applies padding.

Description

UIPaddingContainer adds padding/margin around a single child element without organizing multiple elements. Useful for adding spacing to individual elements or nesting layouts with custom padding.

This container is simpler than UIPanel (no background/border) and focuses only on spacing.

Namespace

namespace pixelroot32::graphics::ui {
    class UIPaddingContainer : public UIElement {
        // ...
    };
}

Inheritance

  • Inherits from: UIElement
  • Inherited by: Your custom padding containers (if needed)

Constructors

UIPaddingContainer(float x, float y, float w, float h)

Constructs a new UIPaddingContainer.

Parameters: - x (float): X position of the container - y (float): Y position of the container - w (float): Width of the container - h (float): Height of the container

Example: 

#include "graphics/ui/UIPaddingContainer.h"

// Create padding container
pixelroot32::graphics::ui::UIPaddingContainer* padded = 
    new pixelroot32::graphics::ui::UIPaddingContainer(
        10.0f, 10.0f,
        108.0f, 108.0f
    );
padded->setPadding(8.0f);  // 8px padding on all sides

Public Methods

void setChild(UIElement* element)

Sets the child element.

Parameters: - element (UIElement*): Pointer to the UI element to wrap

Returns: - void

Notes: - Child element is positioned with padding applied - Can wrap any UI element (button, label, layout, etc.)

Example: 

padded->setChild(button);

UIElement* getChild() const

Gets the child element.

Returns: - UIElement*: Pointer to the child element, or nullptr if none set

void setPadding(float p)

Sets uniform padding on all sides.

Parameters: - p (float): Padding value in pixels

Returns: - void

Notes: - Applies same padding to all sides - Child position is automatically updated

Example: 

padded->setPadding(10.0f);  // 10px padding all around

void setPadding(float left, float right, float top, float bottom)

Sets asymmetric padding.

Parameters: - left (float): Left padding in pixels - right (float): Right padding in pixels - top (float): Top padding in pixels - bottom (float): Bottom padding in pixels

Returns: - void

Example: 

padded->setPadding(10.0f, 5.0f, 8.0f, 12.0f);  // Different padding per side

float getPaddingLeft() const

Gets the left padding.

Returns: - float: Left padding in pixels

float getPaddingRight() const

Gets the right padding.

Returns: - float: Right padding in pixels

float getPaddingTop() const

Gets the top padding.

Returns: - float: Top padding in pixels

float getPaddingBottom() const

Gets the bottom padding.

Returns: - float: Bottom padding in pixels

void setPosition(float newX, float newY)

Sets the position of the container. Also updates the child element's position.

Parameters: - newX (float): New X coordinate - newY (float): New Y coordinate

Returns: - void

Notes: - Child element position is updated automatically with padding applied

void update(unsigned long deltaTime) override

Updates the container and child element.

Parameters: - deltaTime (unsigned long): Time elapsed in milliseconds

Returns: - void

Notes: - Updates child element if set - Called automatically by Scene

void draw(Renderer& renderer) override

Draws the child element.

Parameters: - renderer (pixelroot32::graphics::Renderer&): Reference to the renderer

Returns: - void

Notes: - Only draws child element (no background/border) - Child is drawn at padded position

Usage Example

#include "graphics/ui/UIPaddingContainer.h"

class MenuScene : public pixelroot32::core::Scene {
public:
    void init() override {
        // Create button
        auto* button = new UIButton("Start", 0, 0, 0, 100.0f, 30.0f, 
                                    [this]() { startGame(); });

        // Wrap button with padding
        auto* paddedButton = new pixelroot32::graphics::ui::UIPaddingContainer(
            64.0f, 50.0f,  // position
            120.0f, 50.0f  // size (button + padding)
        );
        paddedButton->setPadding(10.0f);  // 10px padding
        paddedButton->setChild(button);

        addEntity(paddedButton);
    }
};

Nesting with Layouts

// Create layout
auto* layout = new UIVerticalLayout(10, 10, 108, 108);

// Wrap layout with padding
auto* paddedLayout = new UIPaddingContainer(0, 0, 128, 128);
paddedLayout->setPadding(10.0f, 10.0f, 20.0f, 20.0f);  // Asymmetric
paddedLayout->setChild(layout);

Performance Considerations

  • Rendering: Very efficient (just draws child)
  • Position calculation: Fast (simple addition)
  • Memory: Minimal overhead

ESP32 Considerations

  • Memory: Very lightweight
  • Update frequency: Position only recalculates when padding/position changes

See Also