The XdevVerticalSplitPanel is a container that separates the available area into two areas, top and bottom, using a vertically movable splitter. You will need to insert a layout or an UI component in both areas. The element is then automatically stretched over the full size of the respective area. The position of the splitter that is set in the draft later becomes the initial position at runtime.
- Layout - Any number of UI components can be displayed in the respective area.
- UI Component - Only one UI component can be displayed in the respective area. This component is automatically stretched over the full size of the respective area.
- Add an XdevVerticalSplitPanel in an empty view.
- Add an XdevGridLayout in the top area of the XdevVerticalSplitPanel and insert some XdevButtons in the XdevGridLayout.
- Add an XdevGridLayout in the bottom area of the XdevVerticalSplitPanel and insert some XdevButtons in the XdevGridLayout.
Result:
In the GUI builder
Important properties:
Split Position - The value of the splitter position in the unit, set in Split Position Unit. At runtime, the set value is taken as a starting position (default value).
Split Position Unit - Unit of the value set for the position of the splitter in Split Position. The available units are pixels and percentages.
Examples:
Set splitter position dynamically
Transfer the position as decimal number
Position in pixel
verticalSplitPanel.setSplitPosition(200.0f, Unit.PIXELS);
Position in centimeters
verticalSplitPanel.setSplitPosition(200.0f, Unit.CM);
Position in percentage
verticalSplitPanel.setSplitPosition(200.0f, Unit.PERCENTAGE);