← На главную

При переходе с обычных форм на управляемые многие разработчики сталкиваются с трудностями при позиционировании элементов. В управляемом интерфейсе мы не можем просто «приклеить» поле к определенным координатам пиксельной сетки. Платформа сама решает, как располагать элементы, исходя из заданных правил группировки. Однако добиться идеального выравнивания, когда все надписи находятся строго друг под другом, а поля ввода начинаются с одной вертикальной линии, вполне возможно. Разберем основные методики и технические приемы для достижения этой цели.

Метод 1: Использование свойства «Объединенная» в группах

Первый и самый простой способ заставить 1С выравнивать колонку заголовков и колонку полей ввода — это правильная настройка свойств родительской группы. Рассмотрим, как работает механизм «умного» выравнивания платформы. Проанализируем стандартное поведение: когда мы помещаем элементы в группу с вертикальной группировкой, платформа по умолчанию пытается скомпоновать их максимально компактно.

Чтобы выровнять элементы «как в таблице», выполним следующие шаги:

1. Выделим группу, в которой находятся наши поля (или создадим новую группу элементов).
2. В палитре свойств найдем параметр «Группировка» и установим значение «Вертикальная».
3. Найдем флаг «Объединенная». По умолчанию он может быть включен. Нам необходимо снять эту галочку.

Когда свойство Объединенная выключено, платформа 1С начинает рассматривать заголовки элементов и сами элементы управления (поля ввода, переключатели) как две отдельные логические колонки внутри этой группы. В результате все заголовки будут выровнены по левому краю, а все поля ввода начнутся сразу после самого длинного заголовка в этой группе. Это позволяет добиться ровной «лесенки» без лишних усилий.

Метод 2: Ручная установка ширины заголовка

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

Рассмотрим алгоритм настройки ширины заголовка:

1. Выделим в дереве элементов формы сразу несколько полей ввода, которые должны быть выровнены по одной линии.
2. В палитре свойств найдем поле «Ширина заголовка».
3. Установим числовое значение (например, 15 или 20). Это значение измеряется в средних символах шрифта.

После установки этого свойства платформа зарезервирует ровно указанное место под текст надписи для каждого элемента. Если текст надписи короче, останется пустое пространство. Если все выбранные элементы имеют одинаковую ширину заголовка, то их поля ввода гарантированно начнутся с одной и той же вертикальной позиции.

Метод 3: Разделение на две вертикальные подгруппы

Для создания сложных интерфейсов, где стандартных свойств недостаточно, применим метод «ручного» разделения колонок. Этот способ дает максимальный контроль над визуальным представлением формы. Разберем ситуацию по шагам:

1. Создадим общую родительскую группу и установим ей свойство «Группировка» — «Горизонтальная».
2. Внутри этой группы создадим две вложенные группы с вертикальной группировкой. Назовем их условно «ГруппаЛево» и «ГруппаПраво».
3. В «ГруппуЛево» добавим элементы типа «Декорация — надпись». Это будут наши заголовки.
4. В «ГруппуПраво» добавим соответствующие «Поля ввода», установив у них свойство «Положение заголовка» в значение «Нет».

Такой подход позволяет нам независимо управлять шириной колонки надписей и шириной колонки полей. Это особенно полезно, когда нужно сделать очень сложную верстку с разным количеством элементов в разных частях формы. Однако стоит помнить, что при таком методе нужно следить за тем, чтобы высота декораций совпадала с высотой полей ввода, иначе строки «разъедутся» по вертикали.

Метод 4: Свойство «Выравнивание заголовков» у родителя

Платформа 1С предоставляет еще один мощный инструмент — свойство «Выравнивание заголовков» на уровне группы или всей формы. Проанализируем, как оно упрощает жизнь разработчику.

Если мы установим у родительской группы значение свойства ВыравниваниеЗаголовков в положение «Общее», система просканирует все вложенные элементы (даже если они находятся в подгруппах) и автоматически вычислит ширину по самому длинному заголовку. Это избавляет от необходимости вручную прописывать ШиринаЗаголовка для каждого реквизита. Все поля ввода во всех подгруппах этой группы выстроятся в одну линию.

Метод 5: Управление растягиванием и выравниванием внутри группы

Часто поля выглядят неровными из-за того, что они имеют разную ширину или по-разному растягиваются. Чтобы форма выглядела монолитно, проанализируем настройки растяжения:

Если нам нужно, чтобы все поля были строго одной длины, следует отключить свойство «Растягивать по горизонтали» у элементов и задать фиксированную «Ширину». Если же форма должна адаптироваться под размер окна, то у всех элементов, стоящих друг под другом, свойство РастягиватьПоГоризонтали должно быть установлено в значение «Да». При этом важно, чтобы они находились в одной вертикальной группе, тогда платформа распределит ширину между ними равномерно.

Также обратим внимание на свойство «Выравнивание в группе» для самих элементов. Мы можем принудительно выровнять элементы по левому краю, чтобы избежать их «разбегания» при изменении размеров окна пользователем.

Дополнительные советы для мобильных интерфейсов

Если вы разрабатываете форму, которая будет открываться в мобильном клиенте, помните, что жесткое выравнивание через фиксированную ширину заголовков может привести к тому, что на узких экранах текст просто не поместится. В таких случаях рассмотрим альтернативный вариант: установка свойства «Положение заголовка» в значение «Верх». В этом случае надпись располагается над полем ввода. Это автоматически решает проблему горизонтального выравнивания — все поля ввода всегда будут начинаться от левого края формы, что выглядит аккуратно на устройствах с любым разрешением экрана.

Используя комбинацию этих методов — управление флагом «Объединенная», настройку «Ширины заголовка» и грамотное использование вложенных групп — мы можем создавать профессиональные и эстетичные интерфейсы в 1С, которые будут удобны для конечного пользователя.