← На главную

При разработке мобильных приложений на платформе 1С:Предприятие 8.3, особенно для Android-устройств в режиме "Такси", разработчики часто сталкиваются с проблемой некорректного центрирования элементов управления на формах. Несмотря на то, что в конфигураторе форма может отображаться с идеально отцентрированными кнопками и другими элементами, в пользовательском режиме на мобильном устройстве они могут сдвигаться влево. Рассмотрим эту проблему подробнее и выясним, какие подходы и решения мы можем применить.

Анализируем проблему: почему элементы не центрируются?

Основная сложность, с которой мы сталкиваемся, заключается в расхождении между визуальным представлением формы в конфигураторе и ее реальным поведением на мобильном клиенте. Автор темы отмечает, что даже при использовании очевидных свойств для центрирования, таких как ГоризонтальноеПоложениеПодчиненных, желаемый результат не достигается. Это может быть вызвано несколькими факторами:

1. Особенности рендеринга мобильной платформы: Мобильные клиенты 1С, особенно на Android, могут иметь свои собственные нюансы в отрисовке форм и расположении элементов, которые отличаются от настольного клиента.
2. Версия платформы 1С: В разных версиях платформы (например, 8.3.18, как у автора, по сравнению с более новыми 8.3.20+) могли быть внесены исправления и улучшения, влияющие на поведение управляемых форм на мобильных устройствах.
3. Свойства элементов и их иерархия: Неправильное применение свойств или их наследование в сложной иерархии групп и элементов может приводить к неожиданным результатам.
4. Жестко заданные размеры: Наличие жестко заданной ширины у групп или самих элементов может препятствовать автоматическому центрированию.

Стандартные методы центрирования и их нюансы

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

1. Свойство группы ГоризонтальноеПоложениеПодчиненных:

   Это основное свойство, которое мы должны применять для центрирования группы элементов. Установив его значение в "Центр", мы ожидаем, что все дочерние элементы будут выровнены по центру своей группы. Для этого:

   • Поместите все кнопки и элементы, которые мы хотим отцентрировать, в отдельную группу.
   • Для этой группы установите свойство Группировка в "Горизонтальная" или "ГоризонтальнаяАвто".
   • Затем для этой же группы установите свойство ГоризонтальноеПоложениеПодчиненных в "Центр".

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

2. Свойство элемента РастягиватьПоГоризонтали:

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

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

3. Правильное использование свойств в иерархии:

   Один из важных моментов, на который мы должны обратить внимание, это рекомендация устанавливать свойство ГоризонтальноеПоложениеПодчиненных в "Центр" только для родительской группы, которая содержит центрируемые элементы. Для остальных элементов (особенно для элементов внутри центрируемой группы), мы должны оставить свойство расположения в значении "Авто". Переопределение этого свойства у каждого элемента может привести к конфликтам и некорректному отображению.

   Проверяем:

   1. Выделите группу, внутри которой находятся кнопки. Убедитесь, что ее свойство ГоризонтальноеПоложениеПодчиненных установлено в "Центр".
   2. Для каждой кнопки, которая должна быть отцентрирована, убедитесь, что свойство РастягиватьПоГоризонтали выключено.
   3. Для других элементов, если они не являются частью центрируемой группы или не требуют специфического выравнивания, оставляем свойства расположения в "Авто".

Альтернативные подходы и обходные решения (workarounds)

Когда стандартные методы не приносят желаемого результата, особенно на мобильных платформах, мы можем рассмотреть менее элегантные, но иногда эффективные обходные пути.

1. Использование декораций (картинок или пустых полей) для отступов

   Этот метод, хоть и считается "диким" и не масштабируемым в современной разработке, исторически часто использовался и, как мы видим из обсуждения, даже присутствует в типовых конфигурациях (например, РабочееМестоРаботникаСклада). Суть метода заключается в следующем:

   Мы размещаем по бокам от центрируемого элемента управления (например, кнопки) декорации. Эти декорации могут быть:

   • Элементом формы с видом "Декорация" и пустым текстом.
   • Элементом формы с видом "Декорация" и пустой картинкой.

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

   Пример структуры (в группе с горизонтальной группировкой):

   Скопировать код

   
   Группа (Группировка: Горизонтальная, ГоризонтальноеПоложениеПодчиненных: Авто)
       ДекорацияОтступСлева (Вид: Обычная, Ширина: задать вручную или программно)
       КнопкаДействия
       ДекорацияОтступСправа (Вид: Обычная, Ширина: задать вручную или программно)
   

   Такой подход чрезвычайно трудоемок для форм с большим количеством элементов (как у автора темы, более 50 кнопок) и практически не масштабируем.

2. Программное управление размерами и позициями

   Когда стандартные свойства не срабатывают, мы можем попытаться управлять расположением элементов программно. Это более сложный путь, который может включать:

   • Вычисление доступной ширины формы или родительской группы.
   • Вычисление суммарной ширины центрируемых элементов.
   • Расчет необходимой ширины для "пустых" элементов-заполнителей (например, тех же декораций), которые будут расположены по бокам, чтобы "отодвинуть" нужные кнопки к центру.
   • Установку рассчитанной ширины этим декорациям в обработчиках событий формы (например, ПриСозданииНаСервере или ПриОткрытии), возможно, с учетом ориентации экрана.

   Хотя такой подход дает максимальный контроль, он значительно увеличивает сложность разработки и поддержки формы.

3. Явное задание одинаковой ширины кнопкам

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

   Для этого в свойствах каждой кнопки мы устанавливаем свойство Ширина в одинаковое числовое значение.

Рекомендации и дальнейшие шаги

Если после применения стандартных методов и их нюансов проблема центрирования на Android-устройствах все еще сохраняется, мы рекомендуем выполнить следующие действия:

1. Обновите платформу 1С:Предприятие: Разработчики платформы постоянно вносят исправления и улучшения. Возможно, в более свежих версиях платформы (например, 8.3.20 и выше) были решены проблемы с рендерингом управляемых форм на мобильных клиентах. Проверьте актуальные релизы и рассмотрите возможность обновления вашей платформы.

2. Тщательно анализируйте иерархию формы: Используйте окно "Элементы" в конфигураторе, чтобы детально изучить структуру вашей формы. Мы должны убедиться, что свойства центрирования (ГоризонтальноеПоложениеПодчиненных = Центр) установлены на правильной "родительской" группе, которая непосредственно содержит элементы, нуждающиеся в центрировании.

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

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

4. Тестируйте на реальном устройстве: Всегда тестируйте форму на реальном Android-устройстве, так как эмуляторы или предварительный просмотр в конфигураторе могут не полностью воспроизводить поведение мобильного клиента.

5. Рассмотрите изменения в типовой конфигурации: Если ваша задача состоит в доработке типовой конфигурации (например, КА 2.4.13.103) и вы видите, что типовое решение использует декорации, то возможно, на момент создания этой конфигурации это был единственный надежный способ добиться нужного расположения. Если вы работаете в расширении, вам может потребоваться программно изменять свойства декораций или использовать другие динамические методы, чтобы обойти ограничения расширений на удаление элементов.

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