LayoutViews
Table of contents
Prior knowledge
All layout views inherit from ComponentView. It is therefore helpful to read this documentation first as the features from this superclass doesn’t get repeated here.
Introduction
LayoutViews are used to arrange /components. There are two available LayoutViews: Pane and GridPane.
Pane
The Pane arranges its contents in a new coordinate space in the size of the Pane. Elements added to the Pane align themselves relative to the top-left corner of the Pane. This can be used to group a set of /components to move them simultaneously by altering the Pane’s position. A Pane is therefore quite similar to an Area but can be used in MenuScenes.
Note that a Pane is not a Container and therefore not draggable. Use an Area to combine /components to a drag group.
GridPane
The GridPane arranges its contents in rows and columns. All rows and columns adjust their size automatically based on the largest element in this row / column. This implies that empty rows and column get width / height of 0. Fixed sizes can be specified as well as a spacing between rows and columns.
Constructor
The grid needs an initial row and column count. These can be altered as described later. By default, the grid gets anchored at its center. This means that posX and posY refer to the grids center point and the grid expands equally in all directions. This can be altered by passing layoutFromCenter = false to the constructor.
Adding and removing elements
The Grid can be array-like indexed with grid[columnIndex, rowIndex] for all get and set operations.
val content = grid[0,2]
will retrieve the content of cell [0,2]. Empty cells contain null.
grid[0,2] = Button(text="Hello")
will replace the content of cell [0,2] with a button. To remove elements use
grid[0,2] = null
Adding rows / columns
Rows and columns can be added by calling addRows and addColumns. In both cases the desired index to insert and the amount of rows / columns to add can be passed.
To grow the grid in all directions use grow.
Removing rows / columns
Rows and columns can be removed by calling removeRow and removeColumn. In both cases the desired index to delete has to be passed.
To automatically remove all empty rows / columns use removeEmptyRows and removeEmptyColumns.
Using trim removes all empty outer rows and columns.
Iterating grid /components
The grid implements the Iterable interface which means that it can be iterated by using its iterator, in foreach loops, and in streams.
The iterator returns GridIteratorElements that contain the component and the current columnIndex and rowIndex. Note that the iterator iterates through all cells including those that are empty. Therefore, the returned GridIteratorElement may contain null as component.
Setting fixed row heights and widths
By default, all rows and columns get rendered automatically according to the largest element in this row or column. To set fixed values use setRowHeight / setRowHeights and setColumnWidth / setColumnWidths.
To restore automatic behaviour pass AUTO_ROW_HEIGHT / AUTO_COLUMN_WIDTH or use setAutoRowHeight / setAutoRowHeights and setAutoColumnWidth / setAutoColumnWidths
Changing centering behaviour
By default, /components get centered in their cells if the cell’s size is larger than the component. This can be changed for each cell by calling setCellCenterMode.
To change behaviour for entire rows or columns use setRowCenterMode and setColumnCenterMode.
To set centering behaviour for the entire grid use setCenterMode.
CameraPane
A pane representing a camera view that can be used to display a target layout view.
Example
val targetLayout = Pane<*>(width = 1000, height = 1000)
val cameraPane = CameraPane(width = 500, height = 500 ,target = targetLayout)
// Zoom in by setting the zoom factor to 2
cameraPane.zoom = 2.0
// Make the camera pane interactive
cameraPane.interactive = true
// Pan the camera to specific coordinates
cameraPane.pan(100, 200)
// Pan the camera by offset values
cameraPane.panBy(-50, 100)
In the example above, a CameraPane is created with a pane as its target. The zoom factor is set to 2, making the view twice as large. The camera pane is set to be interactive, allowing zooming and panning with the mouse. The camera is then panned to specific coordinates and panned again by offset values.
Note how the CameraPane is smaller than the pane it is displaying. A CameraPane is especially useful if you want to display larger content in a smaller area.