Обновление вашего приложения для iPhone X

Как вы наверняка знаете, 3 ноября Apple наконец-то выпустит iPhone X во многих странах, что вызвало беспрецедентный спрос со стороны покупателей. В TheFork, ведущей европейской службе бронирования ресторанов, мы потратили некоторое время на обновление нашего приложения для iOS, чтобы оно было полностью совместимо с новым устройством к моменту его выпуска.

В ходе этого процесса мы нашли много интересных советов и уловок, которыми хотели бы поделиться с вами.

Чем отличается iPhone X?

В iPhone X появилось несколько новых важных изменений интерфейса по сравнению с предыдущими версиями iPhone:

высота строки состояния не 20 пунктов, впервые с момента появления оригинального iPhone в 2007 году.
новый размер экрана с разрешением 2436 на 1125 пикселей и соотношением сторон около 19: 9, отличающийся от формата 16: 9 в iPhone предыдущего поколения.
это соответствует области пикселей 812 на 375, то есть такой же ширине экрана в пунктах, что и у iPhone 6, но с новой плотностью пикселей, для которой потребуются изображения с разрешением «@ 3x».
наличие новых областей вверху и внизу экрана, в которых печально известная «выемка» iPhone и другие элементы пользовательского интерфейса могут совпадать с элементами вашего приложения. Сюда входит ручка, которая заменяет кнопку "Домой".

Какие проблемы?

В результате большинству разработчиков потребуется выполнить ряд вмешательств для адаптации своих приложений - вмешательств, которые могут напомнить вам те, которые потребовались для iOS 7 в 2013 году.

В частности, с самыми сложными проблемами столкнутся те, кто полагается на жестко запрограммированные 20-точечные размеры строки состояния и / или на настраиваемые компоненты представления, которые не принимают во внимание верхнюю и нижнюю направляющие макета. По правде говоря, topLayoutGuide и bottomLayoutGuide теперь устарели в iOS 11, но если ваше приложение уже использует этот API, работа, необходимая для того, чтобы ваше приложение соответствовало iPhone X будет менее громоздким.

Как

Как уже упоминалось, topLayoutGuide и bottomLayoutGuide теперь являются историей, и теперь Apple предлагает «использовать свойство safeAreaLayoutGuide вместо UIView».

Через Раскадровки

Чтобы включить safeAreaLayoutGuides на раскадровках, дважды проверьте, включен ли параметр «Использовать руководства по макету безопасной области» на панели инспектора файлов.

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

Если вы хотите изменить существующее ограничение, просто выберите его и выберите Safe Area.Bottom (или Area.Top) в качестве первого или второго элемента, как показано на изображении ниже.

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

Программно

Использование автоматического раскладки

Если ваше приложение использует AutoLayout, лучший способ обеспечить соблюдение безопасных областей - использовать якоря, предоставляемые safeAreaLayoutGuide.

Предположим, у вас есть кнопка в нижней части окна просмотра, которую вы не хотите, чтобы ее перекрывал собственный «дескриптор». Затем вы можете написать:

myButton.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, multiplier: 1.0)

Поскольку safeAreaLayoutGuide недоступен в iOS 10 или более ранней версии, мы добавим расширение в UIViewController и / или UIView, чтобы предоставить API, который можно использовать как в более старых, так и в новых версиях iOS.

Динамические изменения

Бывают случаи, когда вы можете захотеть обновить свои вставки после события. Например, когда ваше представление еще не загружено, safeAreaInsets все еще может быть пустым. Кроме того, когда ваш интерфейс вращается, вставки будут меняться в соответствии с положением «выемки». Вы также можете настроить динамическое изменение safeAreaInsets в своем коде с помощью additionalSafeAreaInsets.

Во всех вышеупомянутых сценариях будет вызываться метод обратного вызова viewSafeAreaInsetsDidChange в UIViewController или safeAreaInsetsDidChange в UIView. Затем вы можете проверить новое значение и соответствующим образом обновить свои ограничения или рамки.

Ручной макет

Если вы не выбрали AutoLayout, вы все равно можете использовать свойство safeAreaInsets в UIView и при необходимости размещать свои вложенные представления.

Если ваш код должен быть обратно совместим и реализацией макета является viewController, вы можете добавить расширение к UIViewController и добавить вычисляемое свойство CompatibleSafeInsets, которое:

в случае iOS 11 или более поздней версии возвращает safeAreaInsets представления
в случае iOS 10 или более ранней версии возвращает пользовательские наборы UIEdgeInsets, созданные со значениями topLayoutGuide и bottomLayoutGuide.

Например, вы можете использовать приведенный выше фрагмент следующим образом:

Мы используем здесь viewDidLayoutSubviews вместо viewSafeAreaInsetsDidChange, чтобы сохранить совместимость со старыми системами, поскольку последние не будут вызываться в iOS 10 или более ранней версии.

Обратите внимание, что в отличие от safeAreaInsets, которое является свойством UIView, старый API layoutGuide доступен только в UIViewController. .

Заключение

Мы надеемся, что ваш переход на новый экран iPhone X пройдет максимально гладко. В нашем случае потребовалось 5 полных дней, включая тестирование, для настройки 20+ различных экранов при сохранении совместимости с устройствами iOS 10.