View

The base view class for building UI layouts in Ceramic.

View extends Layer and adds sophisticated layout capabilities:

• Flexible sizing with fixed, percentage, fill, and auto modes
• Padding and offset support
• Border rendering with customizable colors and sizes
• Automatic layout computation and propagation
• Integration with the view layout system

Views can be composed hierarchically to create complex UI layouts. The layout system automatically computes sizes based on constraints and propagates changes through the view tree.

Key concepts:

• viewWidth/viewHeight: Define how the view should be sized
• computedSize: The actual size after layout computation
• padding: Inner spacing that affects content placement
• offset: Position adjustment relative to default layout position
• flex: Relative sizing weight for flexible layouts

var container = new View();
container.viewSize(ViewSize.fill(), 200); // Full width, 200px height
container.padding(10); // 10px padding on all sides
container.borderSize = 2;
container.borderColor = Color.WHITE;

Static Members #

Request a layout update for all views in the next frame. This is called automatically when view properties change. Multiple calls are batched into a single layout pass.

view.width = 200; // Automatically calls requestLayout()
View.requestLayout(); // Manual call if needed

Instance Members #

Same as children but typed as a list of View instances instead of Visual. Only contains children that are of View type, making it convenient for layout operations that only affect View children.

ComputedSize after being computed by View layout engine from constraints and viewWidth/viewHeight. This represents the actual dimensions the view will have after layout computation, which may differ from explicitly set dimensions due to constraints.

Width that will be processed by View layout engine. Options:

• Numeric value: Fixed width in pixels
• ViewSize.percent(n): Percentage of parent width
• ViewSize.fill(): Fill available parent width
• ViewSize.auto(): Size based on content Default: ViewSize.auto()

Height that will be processed by View layout engine. Options:

• Numeric value: Fixed height in pixels
• ViewSize.percent(n): Percentage of parent height
• ViewSize.fill(): Fill available parent height
• ViewSize.auto(): Size based on content Default: ViewSize.auto()

Left padding in pixels. Space between the left edge and content. Default: 0

Right padding in pixels. Space between the right edge and content. Default: 0

Top padding in pixels. Space between the top edge and content. Default: 0

Bottom padding in pixels. Space between the bottom edge and content. Default: 0

Horizontal offset in pixels. This offset is added to the view's X position after layout computation. Only affects views in layouts that support offsets (LinearLayout, LayersLayout). Default: 0

Vertical offset in pixels. This offset is added to the view's Y position after layout computation. Only affects views in layouts that support offsets (LinearLayout, LayersLayout). Default: 0

Flex weight for flexible layouts. Determines how much space this view should take relative to siblings. Only used in layouts that support flex distribution (e.g., LinearLayout).

// Three views in a horizontal layout:
view1.flex = 1; // Takes 1/6 of space
view2.flex = 2; // Takes 2/6 of space
view3.flex = 3; // Takes 3/6 of space

Default: 1

Controls whether this view participates in layout updates. Set to false to temporarily prevent layout computation. Useful for optimization when making multiple changes. Default: true (after initialization)

Indicates whether this view needs layout recomputation. Automatically set to true when properties affecting layout change. The layout system will process dirty views in the next update cycle.

Z-depth of the border visual. Controls rendering order relative to view content. Default: 0

Alpha transparency of the border (0.0 to 1.0). Default: 1 (fully opaque)

Position of the border relative to view bounds.

• INSIDE: Border is drawn inside the view bounds
• OUTSIDE: Border is drawn outside the view bounds
• CENTER: Border is centered on the view edge Default: INSIDE

Border thickness in pixels for all sides. Set to 0 to hide the border. Individual side sizes can override this value. Default: 0

Top border thickness in pixels. Set to -1 to use borderSize value. Default: -1

Bottom border thickness in pixels. Set to -1 to use borderSize value. Default: -1

Left border thickness in pixels. Set to -1 to use borderSize value. Default: -1

Right border thickness in pixels. Set to -1 to use borderSize value. Default: -1

Border color for all sides. Individual side colors can override this value. Default: Color.GRAY

Top border color. Set to Color.NONE to use borderColor value. Default: Color.NONE

Bottom border color. Set to Color.NONE to use borderColor value. Default: Color.NONE

Left border color. Set to Color.NONE to use borderColor value. Default: Color.NONE

Right border color. Set to Color.NONE to use borderColor value. Default: Color.NONE

The parent View of this view. Returns customParentView if set, otherwise checks if the visual parent is a View. This property is crucial for layout propagation.

Set viewWidth and viewHeight in a single call.

Set padding using CSS-style shorthand. Padding creates space inside the view between its edges and content.

Offset this view position by x and y. This offset is added to the view's resulting position from its default layout. This has only effect when the view is layouted by a layout class that handle offsets: LinearLayout, LayersLayout. Useful for fine-tuning positions without breaking the layout flow.

Creates a new Autorun instance with the given callback associated with the current entity.

Remove all child views from this view. This is more efficient than removing views one by one. Only affects View children, not other Visual types.

Compute the view's size based on its sizing modes and constraints. This forces a size computation even if the view is not dirty.

Compute the view's size only if it hasn't been computed for the current context. More efficient than autoComputeSize() as it avoids redundant calculations.

Apply the computed size to the view's actual width and height. This is equivalent to size(computedSize.computedWidth, computedSize.computedHeight). Does nothing if no computed size is available.

Compute size while maintaining aspect ratio of intrinsic bounds. Useful for images, videos, or any content with a natural aspect ratio.

Core size computation method. Calculates the view's dimensions based on its sizing mode and parent constraints.

Bind this view's size to the screen dimensions. The view will automatically resize when the screen size changes.

Bind this view's size to the target resolution defined in settings. Useful for maintaining consistent UI across different screen sizes. The view will automatically resize when target settings change.

Create a percentage-based ViewSize value.

Create a fill ViewSize value. The view will fill all available space in its parent.

Create an auto ViewSize value. The view will size itself based on its content.

Create a new View. Initializes the view with sensible defaults and registers it with the ViewSystem. Layout computation is deferred until after initialization to prevent premature calculations.

Private Members #

Internal border visual component. Created on demand when border properties are set.

Custom parent view override. Used by containers like ScrollView to establish parent-child relationships without actual visual hierarchy changes.

Emitted when the view's layout is computed. This happens after size computation and before visual positioning.

Check if any border should be displayed based on size settings.

Create and initialize the border visual component. Called automatically when border properties are set.

Update or create the border visual based on current properties. Handles border creation, updates, and cleanup when no border is needed.

Called just before emitting the layout event. Updates borders and calls the layout() method.

Perform layout operations for this view. Override this method in subclasses to implement custom layout logic. Called after size computation and before the layout event is emitted.

Common operations in layout():

• Position child views
• Update visual components
• Apply computed dimensions

Metadata #