Как добавить кнопку-картинку в мобильном приложении 1С без белых рамок и размытия?

← На главную

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

Способ 1. Создание кнопки через команду с видом «Гиперссылка»

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

Создадим новую команду формы (например, КомандаКнопкаКартинка).
Перетащим созданную команду на форму, чтобы платформа автоматически создала элемент управления Кнопка.
Перейдем в свойства созданного элемента формы и найдем раздел Оформление.
Установим свойство Отображение в значение Картинка.
В свойстве ИмяКартинки выберем нужное нам изображение из библиотеки картинок конфигурации.
Главный шаг для мобильной платформы: в свойстве Вид элемента выберем значение Гиперссылка вместо Кнопка.

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

Способ 2. Использование декорации-картинки в качестве кнопки

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

Добавим на форму новый элемент с типом Декорация и видом Картинка.
В свойствах декорации укажем нужную картинку в поле Картинка.
Для того чтобы декорация реагировала на касания пользователя, обязательно установим свойство Гиперссылка в значение Да (Истина).
В событиях декорации найдем событие Нажатие и создадим для него процедуру-обработчик на клиенте.

Пример кода для обработки нажатия на декорацию-картинку:


&НаКлиенте
Процедура ДекорацияКартинкаНажатие(Элемент)
    // Опишем логику при нажатии на картинку
    ПоказатьПредупреждение(, "Переход по кнопке-декорации выполнен успешно!");
КонецПроцедуры

Важный нюанс: декорация-картинка в режиме гиперссылки на некоторых мобильных устройствах не дает привычного пользователю «отклика» (визуальной подсветки при нажатии). Если вам важна тактильная обратная связь, лучше использовать первый способ с кнопкой-командой.

Как избавиться от белой рамки и фонового выделения?

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

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

Борьба с размытостью изображения (DPI на мобильных устройствах)

При использовании вида Гиперссылка картинка может выглядеть слегка размытой. Это связано с высокой плотностью пикселей (Retina, Super AMOLED) современных смартфонов. Обычные растровые картинки (PNG/JPG) низкого разрешения будут интерполироваться и терять четкость. Рассмотрим, как этого избежать:

Переход на векторный формат SVG: Мобильная платформа 1С отлично поддерживает векторную графику. Использование SVG-картинок полностью решает проблему размытия, так как вектор масштабируется под любое разрешение экрана без потери качества.
Создание коллекции картинок: Если использовать SVG невозможно, загрузите в конфигурацию не одиночный файл PNG, а Коллекцию картинок, содержащую варианты иконки под разный масштаб экрана (100%, 150%, 200%, 300%). Платформа автоматически выберет наиболее подходящий файл под плотность пикселей текущего устройства.
Свойство «Размер картинки»: В свойствах элемента формы найдем параметр Размер картинки (Picture Size). Значение Реальный размер отключает программное растягивание и сохраняет исходную четкость пикселей, но в таком случае размер файла должен быть заранее подготовлен дизайнером под целевой интерфейс.

Настройка отступов и позиционирования кнопки на экране

В мобильной версии 1С отсутствуют привычные веб-разработчикам свойства внешних и внутренних отступов (margin и padding) в пикселях. Чтобы красиво расположить кнопку в углу экрана или сделать отступы справа и снизу, применим технологию вспомогательной верстки с помощью групп:

Создание невидимого контейнера: Поместим нашу кнопку внутрь элемента Группа с типом Обычная группа. В свойствах группы укажем Отображение — Нет (чтобы скрыть границы группы).
Использование пустых декораций: Чтобы отодвинуть кнопку от края экрана или других элементов управления, добавим внутрь группы пустую Декорацию - Надпись без текста.
Установим этой декорации фиксированную ширину или высоту (например, 1 или 2 шага) — она будет играть роль невидимого распорного элемента.
Используя свойства Растягивать по горизонтали у пустых декораций, мы можем легко «прижимать» нашу кнопку-картинку к правому или левому краю экрана мобильного устройства.

Комбинируя эти несложные правила верстки, правильные форматы графики (SVG) и параметры отображения элементов («Гиперссылка» без выделения фона), мы сможем создавать современные, эстетичные и быстрые мобильные интерфейсы на платформе 1С, которые будут выглядеть нативно как на Android, так и на iOS.