Layouts

Layouts are object containers that define the position of objects they contain. Use different layouts and their properties to arrange objects in 3D space.

The simplest layout in Kanzi is the stack layout, which you can use to automatically position its children side-by-side towards the desired direction. Layouts are especially useful for managing content that is added or removed during the use of Kanzi application, or loaded into the UI from external sources, for example, files in a directory.

Object specific layout

You can set object positions, rotations and scale with transformations. Two transformation types are available in Kanzi Studio:

• Layer Layout Transformation (Transformation for scenes) is applied prior to the layout procedure, and the layer is aligned using the resulting bounding box.
• Render Transformation is for visual purposes only, and applied after all other layout tasks are done.

Layout containers (for example, stack layouts or grid layouts) apply their own transformations on all immediate child objects who in their part define their own layout considering their own children, layout transformations, margins and alignments.

• Alignment defines the gravity of the layout. For example, set the Horizontal Alignment property to Left to align the object to the left border of its parent layout. By setting alignment properties to Stretch, the object stretches to the dimensions of its parent layout. The content behavior respective to the layout size can be specified for layers using the property Layout Content Stretch.
• Margin enforces the object spacing relative to the border of its parent layout. For example, set the Horizontal Margin property to fine-tune the object's spacing in relation to its parent layout.
• Layout properties override the bounding box size of an object. The default layout size is defined by the size of the object based on its bounding box and margins.

For example, a stack layout set in direction X places two objects next to each other based on the their dimensions (bounding boxes). By using the Layout Width property you can override the width of the bounding box: a value smaller than the actual size of the object creates two nested objects, whereas a larger value extends the space between the two objects.

After all layout tasks are done, final transformations from parent nodes are applied. The Root Layer under the Screen object has special rules for its layout if it is a Viewport Layer or an Empty Layer. It inherits the defined screen size, unless defined by the layout properties.

Kanzi contains these layout types:

• Empty node is a layout of the simplest kind. Child nodes of an empty node are positioned according to their transformation properties.
• Flow layout places 3D objects in rows. When a row is full, it places objects in a new row. See Using flow layouts.
• Grid layout arranges 3D objects in a grid. See Using grid layouts.
• Stack layout arranges its children in 3D space next to each other in a stack on the selected axis. See Using stack layouts.
• Trajectory layout arranges its children along a trajectory path in 3D space. See Using trajectory layouts.

See also

Using flow layouts

Using grid layouts

Using stack layouts

Using trajectory layouts

Optimizing rendering of layouts

Open topic with navigation