При разработке интерфейсов на платформе 1С:Предприятие 8.3 программисты часто сталкиваются с тем, что стандартное размещение элементов выглядит неаккуратно. Надписи могут «съезжать», поля ввода — иметь разную ширину, а центрирование текста во второй строке превращается в настоящую проблему. Особенно это заметно при создании парных полей, таких как «Дата начала» и «Дата окончания» (или «Выезд» и «Возврат»). Для этой задачи есть инструмент проектирования кастомных интерфейсов и рабочих столов.
В этой статье мы подробно разберем, как добиться идеального выравнивания элементов, используя стандартные механизмы управляемых форм, и рассмотрим профессиональные приемы, которые помогут сделать интерфейс удобным и красивым.
Проанализируем базовый подход. Если нам нужно, чтобы надписи «Выезд» и «Возврат» располагались строго друг под другом и были центрированы, мы должны пересмотреть структуру групп на форме. Часто разработчики создают вертикальные группы для каждого блока (Дата, Время), но забывают о свойствах самих реквизитов.
Рассмотрим пошагово, как настроить отображение через свойства полей:
ДатаВыезда).ПоложениеЗаголовка в значение Слева.Заголовок введем текст «Выезд».ДатаВозврата, указав заголовок «Возврат».Этот метод позволяет привязать надпись непосредственно к полю ввода. Однако, если поля находятся в разных вертикальных группах, их заголовки могут не совпасть по ширине. Чтобы этого избежать, мы можем использовать свойство группы ОтображатьЗаголовок, сняв эту галочку, чтобы лишние надписи не сбивали разметку.
Выясним причину, почему элементы иногда ведут себя непредсказуемо при изменении размеров окна. В управляемом интерфейсе логика компоновки зависит от вложенности групп. Рассмотрим вариант с перестроением структуры:
Вместо множества мелких вертикальных групп попробуем создать одну родительскую группу. Если нам нужно ходить по полям «сверху вниз», а затем «слева направо» (по нажатию Enter), важно правильно настроить порядок обхода. Посмотрим на пример настройки:
Создадим горизонтальную группу, в которую поместим две вертикальные группы. В левой группе будут располагаться надписи (декорации), а в правой — поля ввода. Однако это создаст сложность с выравниванием по высоте. Поэтому профессиональнее использовать свойство Группировка — Колонки, которое доступно в современных версиях платформы 8.3. Это позволяет элементам внутри группы автоматически выстраиваться в ровные столбцы.
Разберем ситуацию, когда надписи «Выезд» и «Возврат» имеют разную длину. Из-за этого поля ввода будут начинаться на разном расстоянии от левого края. Чтобы выровнять их, воспользуемся следующим приемом:
Для всех элементов, которые должны быть выровнены по одной вертикальной линии, установим одинаковое числовое значение в свойстве ШиринаЗаголовка. Например, установим значение 15. Теперь, независимо от длины текста («Дата» или «Пункт назначения»), само поле ввода начнется строго с 16-й позиции. Это создает эффект таблицы и делает форму визуально чистой. Вносить такие правки на лету позволяет Редактор форм в режиме предприятия.
Проанализируем техническую особенность: стандартное ПолеВвода имеет рамку и внутренние отступы, из-за чего оно визуально выше, чем обычная Декорация-надпись. Если вы просто поставите их рядом, текст в декорации будет «подпрыгивать» вверх относительно текста в поле ввода. Для этой задачи есть расширение для настройки отображения элементов управляемой формы.
Чтобы решить эту проблему, выполним следующие настройки для декорации:
ВертикальноеПоложение в значение Центр.Высота. Иногда ручная установка высоты в значение 1 помогает синхронизировать декорацию с соседним полем.РастягиватьПоГоризонтали = Истина. Она будет работать как пружина, прижимая соседние элементы к нужному краю.Посмотрим на свойство, которое часто игнорируют — ГоризонтальноеПоложениеВГруппе. Оно доступно для большинства элементов формы. Даже если родительская группа настроена как вертикальная, для конкретной надписи (например, нашего «Возврата») можно принудительно выставить Центр.
Это особенно полезно, когда ширина группы фиксирована или растянута по всей форме. В этом случае текст будет позиционироваться относительно границ своей группы, а не относительно всего окна программы.
В самых сложных случаях, когда стандартных настроек Конфигуратора недостаточно, на помощь приходит Программное изменение форм (для разработчиков) — ускоряет улучшенный конструктор для программной работы с интерфейсом. Например, если нужно динамически менять отступы или использовать разные шрифты в одной строке, мы можем использовать ФорматированнуюСтроку или HTML.
Рассмотрим пример, как программно задать выравнивание для декорации:
Элементы.ДекорацияВозврат.Заголовок = Новый ФорматированнаяСтрока("Возврат", Новый Шрифт(,, Истина), ЦветаСтиля.ТекстВторостепеннойНадписи);
Элементы.ДекорацияВозврат.ГоризонтальноеПоложение = ГоризонтальноеПоложение.Центр;
Использование HTML позволяет задавать точные отступы через неразрывные пробелы или стили, но мы рекомендуем прибегать к этому методу только в исключительных ситуациях, так как это может замедлить отрисовку формы и нарушить единообразие интерфейса «Такси».
Подведем итог нашему анализу. Для достижения наилучшего результата при выравнивании надписей на форме придерживайтесь следующих правил:
Применяя эти методы, вы сможете создавать профессиональные и интуитивно понятные интерфейсы, которые будут корректно отображаться на любых мониторах — в этом поможет конструктор макетов и шаблонов форм без программирования.