User interface elements alignment by columns

Interface elements in custom user panels often do not correspond to each other in size. As a result – the overall panel layout does not look beautiful. As an example, let’s create a custom panel and place an operator button and an input text field on it.

Can we make it more accurate?

Code for creating this panel:

The location of buttons, labels and other elements is formed in the “draw” function.

All interface elements are located on a single layout “layout” (self.layout).

The row command of the “UILayout” class

makes a line on which two elements are located one after another – a text label “Add mesh” and an operator button for creating a cube.

The “World name” property is located on the next line because it is called not from the “row” element but the entire layout.

To nicely arrange the controls and align their sizes, we need to break the entire layout vertically into two columns. On the left we will place the text, on the right – we will place the controls.

The “split” command of the “UILayout” class divides the layout into columns proportionally by the “factor” parameter. Let’s make such split:

The command returns a split object on which we will make the columns themselves:

Having received the “col_1” and “col_2” columns we will place text labels on the first (left) and the button and field on the second (right) one.

For the operator:

and for the input field:

Finally, the controls are located on our panel much more accurately.

Complete code:


Author: Nikita

Blender add-ons developer and articles writer.