Выравнивание элементов пользовательского интерфейса по колонкам

Часто элементы интерфейса, размещаемые в пользовательских панелях, не соответствуют друг другу по размерам, в результате чего общая компоновка панели выглядит не красиво. В качестве наглядного примера создадим пользовательскую панель и разместим на ней кнопку оператора и текстовое поле ввода.

Выровнять размеры кнопки и поля ввода здесь напрашивается само собой.

Код создания такой панели имеет вид:

Формирование внешнего вида панели – расположения кнопок и других элементов, производится в функции draw.

Все элементы интерфейса располагаются на общей подложке layout (self.layout).

Команда row класса UILayout

формирует строку на которой располагаются друг за другом два элемента – текстовый лейбл с надписью “Add mesh” и кнопка оператора для создания в сцене куба.

Свойство “World name” располагается на следующей строчке т.к. вызывается не для созданной строки row а для всего layout.

Для того, чтобы красиво расположить элементы управления и выровнять размеры кнопки и поля свойства, нужно разбить весь layout на две вертикальные колонки. В левой мы будем писать текст, в правой – размещать элементы управления.

Команда split класса UILayout разбивает layout на колонки в пропорциональном соотношении по ширине, определяемым параметром factor. Создадим такое разбиение:

Команда возвращает объект split на котором мы далее сформируем сами колонки:

Получив колонки “col_1” и “col_2” разместим на первой (левой) текстовые лейблы, а на второй (правой) – кнопку и поле.

Для оператора:

и для поля ввода:

В результате элементы управления расположены на нашей панели гораздо аккуратнее.

Финальный код: