ТестированиеМобильное тестированиеИнженер по тестированию мобильных приложений

На устройстве с вырезом интерактивная кнопка частично перекрыта системной областью. Как установить, что экр...

На устройстве с вырезом интерактивная кнопка частично перекрыта системной областью. Как установить, что экран неправильно учитывает безопасную область?

Проходите собеседования с ИИ помощником Hintsage

Краткий ответ

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

Исторический контекст

Мобильные экраны долгое время представлялись как простой прямоугольник, поэтому интерфейс можно было размещать относительно его краёв. Появление вырезов, отверстий под камеру, закруглённых углов, статус-баров и жестовых областей сделало такое предположение ненадёжным.

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

Постановка проблемы

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

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

Подробное решение

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

Проверку следует повторить на нескольких конфигурациях:

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

Ожидаемое корректное поведение — содержимое может визуально доходить до края экрана, но интерактивные элементы и важный текст не должны попадать под системные области. Обычно фон допускается размещать от края до края, а контейнеры с кнопками и текстом должны учитывать актуальные safe area или window insets.

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

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

Ситуация из практики

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

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

Выбрали второй вариант. Тестировщик проверил положение кнопки относительно системных областей в портретной и альбомной ориентациях, на устройствах с вырезом и без него, а также после изменения режима навигации. После обновления компоновки кнопка перестала перекрываться, а лишние отступы на обычных устройствах не появились.

Что кандидаты часто упускают

  1. Достаточно ли проверить только устройство с вырезом?

Нет. Дефект может зависеть не только от выреза, но и от ориентации, жестовой навигации, системных панелей и режима отрисовки от края до края. Минимальная проверка должна включать разные формы экрана и состояния системного интерфейса.

  1. Почему визуально видимая кнопка всё равно может быть непригодна для использования?

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

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

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