Разработка удобного и эстетичного интерфейса в 1С:Предприятии — задача, с которой ежедневно сталкивается каждый разработчик. Одной из наиболее частых проблем при проектировании управляемых форм является размещение элементов в две параллельные колонки так, чтобы строки располагались идеально ровно друг напротив друга. Часто элементы имеют разную высоту (например, классическое текстовое поле ввода выше, чем обычный флажок или надпись), из-за чего строки начинают смещаться и «плыть» вниз по форме, образуя некрасивую «лесенку».
В этой статье мы подробно разберем, как решить эту проблему раз и навсегда. Выясним причину такого поведения платформы и рассмотрим современный стандартный механизм автоматического выравнивания элементов, который позволяет обойтись без создания громоздких горизонтальных групп для каждой отдельной строки.
Для начала проанализируем ситуацию и поймем, как работает движок компоновки интерфейса 1С. Когда мы создаем две вертикальные группы (левую и правую колонки) внутри одной горизонтальной группы, платформа рассчитывает высоту каждого элемента независимо.
Высота поля ввода, флажка (галки), декоративной надписи или кнопки различается на несколько пикселей. Платформа складывает высоту элементов внутри каждой колонки последовательно. В результате уже на уровне второй или третьей строки мы получаем заметный визуальный перекос по горизонтали. Попытки жестко зафиксировать высоту элементов вручную приводят к потере адаптивности интерфейса при изменении масштаба или разрешения экрана.
Для того чтобы элементы выравнивались по строкам автоматически, мы должны правильно выстроить иерархию элементов формы и настроить их ключевые свойства. Рассмотрим этот процесс по шагам.
ГруппаШапка). Для нее устанавливаем свойство Группировка в значение Горизонтальная (или «Горизонтальная если возможно»).ГруппаЛевая). Размещаем ее внутри родительской группы. Устанавливаем свойство Группировка в значение Вертикальная.ГруппаПравая). Размещаем ее также внутри родительской группы, справа от левой колонки. Устанавливаем свойство Группировка в значение Вертикальная.Объединенная установлено в значение Истина.
Когда это свойство активно, платформа воспринимает каждую колонку как единый неделимый блок. Нам необходимо зайти в палитру свойств для ГруппаЛевая и ГруппаПравая и снять флажок «Объединенная» (установить в значение Ложь).
Что это дает? После отключения этого свойства платформа перестает воспринимать группы как монолитные блоки. Алгоритм компоновки начинает сопоставлять элементы внутри групп построчно: первый элемент левой группы сравнивается с первым элементом правой группы. Платформа определяет, какой из них выше, и автоматически устанавливает эту максимальную высоту для обоих элементов, выравнивая их по одной горизонтальной оси. Затем процедура повторяется для вторых, третьих и последующих элементов.
ГруппаШапка (или самой формы). Свойство Сквозное выравнивание должно быть установлено в значение Использовать. Это заставит платформу выравнивать элементы по невидимой вертикальной сетке, делая границы полей ввода одинаковыми во всех колонках.Для лучшего понимания работы механизмов платформы рассмотрим, как можно создать аналогичную структуру элементов динамически при помощи встроенного языка 1С. Напишем код, который можно разместить, например, в процедуре ПриСозданииНаСервере:
// 1. Создаем родительскую горизонтальную группу с включенным сквозным выравниванием
НоваяГруппаШапка = Элементы.Добавить("ГруппаШапка", Тип("ГруппаФормы"), Элементы.Форма);
НоваяГруппаШапка.Вид = ВидГруппыФормы.ОбычнаяГруппа;
НоваяГруппаШапка.Группировка = ГруппировкаПодчиненныхЭлементовФормы.Горизонтальная;
НоваяГруппаШапка.СквозноеВыравнивание = ИспользованиеСквозногоВыравнивания.Использовать;
НоваяГруппаШапка.ОтображатьЗаголовок = Ложь;
// 2. Создаем левую вертикальную колонку и отключаем свойство Объединенная
ГруппаЛевая = Элементы.Добавить("ГруппаЛевая", Тип("ГруппаФормы"), НоваяГруппаШапка);
ГруппаЛевая.Вид = ВидГруппыФормы.ОбычнаяГруппа;
ГруппаЛевая.Группировка = ГруппировкаПодчиненныхЭлементовФормы.Вертикальная;
ГруппаЛевая.Объединенная = Ложь; // Отключаем монолитность группы
ГруппаЛевая.ОтображатьЗаголовок = Ложь;
// 3. Создаем правую вертикальную колонку аналогичным образом
ГруппаПравая = Элементы.Добавить("ГруппаПравая", Тип("ГруппаФормы"), НоваяГруппаШапка);
ГруппаПравая.Вид = ВидГруппыФормы.ОбычнаяГруппа;
ГруппаПравая.Группировка = ГруппировкаПодчиненныхЭлементовФормы.Вертикальная;
ГруппаПравая.Объединенная = Ложь; // Отключаем монолитность группы
ГруппаПравая.ОтображатьЗаголовок = Ложь;
При верстке форм в современном интерфейсе «Такси» важно учитывать особенности масштабирования элементов. Чтобы форма выглядела аккуратно на любых мониторах, придерживайтесь следующих правил настройки ширины:
0 (автоматический расчет), а свойство АвтоМаксимальнаяШирина устанавливать в значение Да. В этом случае стандартная ширина полей составит оптимальные 40 единиц.Да.ГруппаШапка свойство РастягиватьПоГоризонтали установить в значение Нет. В противном случае платформа может сильно растянуть саму группу, из-за чего заголовки полей «прижмутся» к левому краю, а поля ввода улетят далеко вправо, создав некрасивый пустой разрыв посреди формы.Иногда возникает ситуация, когда в левой колонке нам нужно разместить, например, четыре элемента, а в правой — всего три. Поскольку мы отключили свойство Объединенная, платформа попытается сопоставить четвертый элемент левой колонки с «пустотой» в правой, что может привести к нежелательному смещению элементов вверх или нарушению логической структуры строк.
Чтобы избежать подобных проблем, выполним простой прием: в ту колонку, где элементов меньше, добавим вспомогательный элемент Декорация с типом Надпись на место недостающего элемента. Заголовок декорации оставим абсолютно пустым. Таким образом, платформа корректно сопоставит пустую декорацию с элементом из соседней колонки, сохранив ровную сетку строк, а пользователь увидит аккуратное пустое пространство.
Использование связки из горизонтальной группы с включенным сквозным выравниванием и вложенных вертикальных колонок с отключенным свойством Объединенная является наиболее лаконичным, производительным и правильным решением для построения сложных интерфейсов в управляемом приложении 1С.