Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Руководство по разработке для iPhone X

  1. Чем отличается?
  2. Начиная
  3. Разработка нового приложения
  4. Использовать автоматическое расположение
  5. Используйте стандартные элементы интерфейса
  6. Статус бар
  7. iPhone X Simulator против устройства
  8. Включение безопасной зоны
  9. Интеграция панели поиска
  10. Куда пойти отсюда?
  11. яблоко

Все в восторге от iPhone X, «iPhone, который полностью экран» - и какой экран! Плюс Face ID, TrueDepth селфи / анимоджи камера, 12-мегапиксельная широкоугольная и телеобъективная камеры заднего вида, чип B11ic с нейронным двигателем и беспроводная зарядка.

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

Затем вы узнаете, как исправить приложение, созданное незадолго до анонса iPhone X: достаточно ли просто включить безопасную область? Читай дальше что бы узнать.

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

Во-первых, краткое изложение того, что отличается от экрана iPhone X:

  • Размер экрана составляет 375 x 812 точек, поэтому соотношение сторон составляет 9: 19,5 вместо 9:16. Это на 145 пунктов больше, чем у 4,7 ″ экрана iPhone 6/7/8, но в строке состояния используется 44 пункта, а индикатор «home» почти удваивает высоту панели инструментов.
  • Разрешение экрана 3х: 1125 х 2436 пикселей.
  • Конструкция экрана должна учитывать корпус датчика, индикатор дома и закругленные углы.

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

  • В портретном режиме строки состояния и навигации занимают 88 пунктов, или 140 пунктов для больших заголовков. Панель инструментов 83 балла вместо 44 баллов. В альбомной ориентации размер панели инструментов составляет 53, а поля макета - 64, а не 20.
  • В портретном режиме строка состояния выше - 44, а не 20 - и использует пространство, не используемое приложением, по обе стороны от корпуса датчика. И это не меняет размер, чтобы указать телефон, отслеживание местоположения и другие фоновые задачи.

Джефф Хэкворт Средняя статья имеет супер-полезные диаграммы новой анатомии экрана, любезно его Адаптивность приложение.

Начиная

Скачать стартовый пакет и распакуйте его.

Во-первых, убедитесь, что происходит, когда вы загружаете изображение 9:16 на экран iPhone X. Откройте AspectRatioSample , затем откройте Main.storyboard . Установите View как на iPhone X и выберите вид изображения. В инспекторе атрибутов переключите режим содержимого между подбором по формату и заполнением по аспекту :

В инспекторе атрибутов переключите режим содержимого между подбором по формату и заполнением по аспекту :

Изображение 8Plus было создано путем объединения двух изображений, создания и запуска в имитаторе iPhone 8 Plus, а затем создания снимка экрана. Таким образом, соотношение сторон изображения составляет 9:16.

Ограничения вида изображения установлены так, чтобы заполнить безопасную область, поэтому его соотношение сторон составляет 9: 19,5.

В Aspect Fit черный вид фона отображается выше и ниже изображения (почтовый бокс). Заполнение аспектом покрывает вид, но обрезает края изображения.

В альбомной ориентации Aspect Fit будет вставлять изображение в столбец (показывать фоновый вид по бокам), а Aspect Fill обрезает верх и низ.

Предполагая, что вы не хотите создавать разные изображения только для iPhone X, и вы хотите закрыть вид, тогда вы получите обрезку.

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

Разработка нового приложения

Закройте AspectRatioSample и откройте NewCandySearch . Сборка и запуск на симуляторе iPhone X:

Это приложение мастер-подробно со списком конфет. Подробный вид показывает изображение выбранной конфеты.

Я подожду, пока вы получите свою любимую закуску! ;]

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

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

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

Откройте Main.storyboard , выберите один из контроллеров представления и покажите инспектор файлов:

Новые проекты, созданные в Xcode 9, по умолчанию используют Auto Layout и Safe Layout Guides. Это самый простой способ сократить объем работы, необходимой для дизайна iPhone X.

Правила:

  • Используйте направляющие для безопасной зоны.
  • Используйте направляющие для полей.
  • Центрировать контент или вставлять его симметрично.

Используйте стандартные элементы интерфейса

Теперь вы собираетесь добавить панель поиска с областью видимости. И вы могли бы также выбрать новый большой заголовок тоже.

Выберите мастер-сцену / панель навигации , откройте инспектор атрибутов и установите флажок « Предпочитать большие заголовки» :

Выберите мастер-сцену / панель навигации , откройте инспектор атрибутов и установите флажок « Предпочитать большие заголовки» :

Пока вы здесь, выберите ячейку табличного представления и установите его цвет фона на светло-серый:

Пока вы здесь, выберите ячейку табличного представления и установите его цвет фона на светло-серый:

Затем откройте MasterViewController.swift : он уже содержит большую часть кода контроллера поиска. Вам просто нужно заменить комментарий TODO в setupSearchController () следующим образом:

// В iOS 11 интегрируем контроллер поиска в панель навигации, если #available (iOS 11.0, *) {self.navigationItem.searchController = searchController // Панель поиска всегда видна self.navigationItem.hidesSearchBarWhenScrolling = false} else {tableView.tableHeaderView = searchController.searchBar}

Если устройство работает под управлением iOS 11, вы устанавливаете свойство searchController элемента навигации; в противном случае вы помещаете панель поиска в представление заголовка таблицы табличного представления.

Сборка и запуск на симуляторе iPhone X Полюбуйтесь большим заголовком, затем поверните симулятор в альбомную ориентацию и коснитесь поля поиска, чтобы отобразить панель области действия:

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

Рекомендация: используйте стандартные элементы интерфейса.

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

Создайте и запустите приложение на симуляторе iPhone 8, чтобы увидеть, что оно там тоже отлично выглядит:

Создайте и запустите приложение на симуляторе iPhone 8, чтобы увидеть, что оно там тоже отлично выглядит:

Примечание: iPhone X имеет компактную ширину в горизонтальной ориентации, поэтому он ведет себя как iPhone 8, а не 8 Plus.

Примечание: iPhone X имеет компактную ширину в горизонтальной ориентации, поэтому он ведет себя как iPhone 8, а не 8 Plus

Вот некоторые другие рекомендации:

Статус бар

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

Разрешение экрана 3x

  • Используйте PDF для плоских векторных иллюстраций; предоставьте @ 3x и @ 2x растрового изображения.
  • Приложение не использует 3x, если оно не имеет LaunchScreen.storyboard.

Главная Индикатор Особые случаи

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

iPhone X Simulator против устройства

  • Используйте симулятор, чтобы проверить книжную и альбомную планировку.
  • Используйте устройство iPhone X для проверки широкоформатных изображений, Металл, фронтальную камеру.

Другие вещи

  • Не используйте Touch ID на iPhone X. Не используйте Face ID на устройствах, которые поддерживают Touch ID.
  • Не дублируйте предоставляемые системой функции клавиатуры, такие как кнопки Emoji / Globe и Dictation.

Обновление существующего приложения

Что если вы хотите обновить существующее приложение для iPhone X? Во-первых, обновите свои активы, включая фоновые изображения, в PDF или добавьте @ 3x изображения. Затем убедитесь, что у него есть LaunchScreen.storyboard , и включите Безопасную область . Направляющие макета безопасной области изменяют ограничения сверху, снизу и по краям, поэтому проверьте их и исправьте при необходимости.

Проверьте наличие любого макета, который зависит от строки состояния на 20 пунктов или панели инструментов на 44 точки, и измените ее, чтобы учесть различную высоту. Или, если ваше приложение скрывает строку состояния, рассмотрите возможность скрыть ее для iPhone X.

Затем установите View как на iPhone X и проверьте каждую конфигурацию макета. Отодвиньте органы управления от краев, углов, корпуса датчика и индикатора дома.

Рассмотрите возможность интеграции контроллеров представления поиска в панель навигации.

Создайте и запустите приложение на симуляторе iPhone X и проверьте каждую конфигурацию макета. В альбомной ориентации убедитесь, что содержимое ячейки табличного представления и заголовка раздела вставлено, но фон распространяется до краев.

Вот простой пример для проработки. Загрузите (оригинальное) готовое приложение-образец от Учебник по UISearchController , Это приложение было построено с бета-версией Xcode 9 до того, как Apple анонсировала iPhone X, поэтому Том Эллиотт не смог протестировать его на симуляторе iPhone X.

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

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

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

Чтобы увидеть больше проблем, отмените панель области, затем поверните в альбомную ориентацию:

Чтобы увидеть больше проблем, отмените панель области, затем поверните в альбомную ориентацию:

Изображение заголовка слегка обрезано, а корпус сенсора немного отсекается от нижнего левого угла панели поиска. Но представление таблицы не настроено, поэтому содержимое его ячеек хорошо видно на корпусе датчика.

Снова нажмите в поле поиска, чтобы показать панель области:

Теперь закругленные углы обрезают панель поиска.

Примечание:

вы, вероятно, заметили, что при отображении панели областей действия скрывается первая ячейка представления таблицы Chocolate Bar . Хотя этого не произошло в NewCandySearch, это не причина для перемещения панели поиска в панель навигации. Это ошибка iOS 11, которую Том Эллиотт сообщили в Apple 2 августа 2017 года. На момент написания этого урока его статус оставался открытым.

Включение безопасной зоны

Откройте Main.storyboard , выберите один из контроллеров представления и покажите инспектор файлов:

Это приложение не использует безопасные направляющие Поэтому установите этот флажок, а затем проверьте, что ограничения теперь относятся к безопасной области:

Создайте и запустите, и посмотрите, как это выглядит в альбомной ориентации, с помощью области видимости:

Это еще хуже! Представление заголовка таблицы выходит далеко за пределы его суперпредставления, хотя представление нижнего колонтитула таблицы в порядке. Возможно, это еще одна ошибка iOS 11, которая может быть исправлена ​​к моменту прочтения этого урока.

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

Интеграция панели поиска

Ну, это легко - просто скопируйте код NewCandySearch, который устанавливает searchController панели навигации в CandySearch. Откройте MasterViewController.swift в обоих проектах и ​​скопируйте эти строки из NewCandySearch:

// заменим присвоение tableHeaderView этим if #available (iOS 11.0, *) {self.navigationItem.searchController = searchController // Панель поиска всегда видна self.navigationItem.hidesSearchBarWhenScrolling = false} else {tableView.tableHeaderView = searchController.searchBar}

В MasterViewController.swift of CandySearch вставьте эти строки в viewDidLoad () и закомментируйте эту строку:

tableView.tableHeaderView = searchController.searchBar

Теперь откройте AppDelegate.swift и найдите следующие строки:

UISearchBar.appearance (). BarTintColor = .candyGreen UISearchBar.appearance (). TintColor = .white UITextField.appearance (whenContainedInInstancesOf: [UISearchBar.self]). TintColor = .candyGreen

Удалите или закомментируйте первую строку: строка поиска получит цветовой оттенок от панели навигации.

Создайте и запустите, и нажмите в поле поиска, чтобы отобразить панель области:

Создайте и запустите, и нажмите в поле поиска, чтобы отобразить панель области:

Так что это исправило цвет фона строки состояния, но теперь текстовое поле также зеленое, что затрудняет просмотр текста и значка подсказки в поле поиска. Панель вставки также зеленого цвета, но вы можете это исправить - измените третий параметр внешнего вида в AppDelegate.swift на:

UITextField.appearance (whenContainedInInstancesOf: [UISearchBar.self]). TintColor = .white

Ниже добавьте следующую строку:

UITextField.appearance (whenContainedInInstancesOf: [UISearchBar.self]). BackgroundColor = .white

Это должно сделать фон текстового поля белым, но на момент написания этого урока он не работал, что предполагает еще одну ошибку iOS 11. В качестве временного исправления вы можете изменить цвет текста и значков поля поиска. Например, чтобы сделать текст приглашения белым, добавьте следующий код в AppDelegate.swift в приложении (_: didFinishLaunchingWithOptions :):

let placeholderAttributes: [NSAttributedStringKey: Any] = [NSAttributedStringKey (rawValue: NSAttributedStringKey.foregroundColor.rawValue): UIColor.white, NSAttributedStringKey (rawValue: NSAttributedStringKeyystemontontFifjectSignIFF_ExjectFIFF) UTF NSAttributedString = NSAttributedString (строка: «Поиск», атрибуты: placeholderAttributes) UITextField.appearance (whenContainedInInstancesOf: [UISearchBar.self]). AttributetedPlaceholder = attributetedPlaceholder

Чтобы сделать значок поиска и кнопку очистки белым, добавьте следующий код для viewDidLoad () в MasterViewController.swift :

пусть textField = searchController.searchBar.value (forKey: "searchField") как! UITextField позволяет glassIconView = textField.leftView как! UIImageView glassIconView.image = glassIconView.image? .WithRenderingMode (.alwaysTemplate) glassIconView.tintColor = .white let clearButton = textField.value (forKey: "clearButton") как! UIButton clearButton.setImage (clearButton.imageView? .Image? .WithRenderingMode (.alwaysTemplate), для: .normal) clearButton.tintColor = .white

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

Опять же, это не работает во время написания этого урока, но оно может быть исправлено к тому времени, когда вы прочитаете это

Куда пойти отсюда?

Теперь у вас есть хорошее представление о том, как создавать приложения, которые отлично смотрятся на iPhone X, а также на других iPhone. Вот комплект из двух примеров проектов со всем кодом из этого урока. Если вы хотите копать глубже, проверьте эти ресурсы:

яблоко

raywenderlich.com

Если вы новичок в автоматическом макете или вам просто нужно освежить в памяти, посмотрите наш учебник и видеокурс:

Я надеюсь, что скоро у вас будут прекрасно работать ваши приложения на iPhone X. Если у вас есть какие-либо вопросы или комментарии, пожалуйста, присоединяйтесь к обсуждению на форуме ниже!

Чем отличается?
Затем вы узнаете, как исправить приложение, созданное незадолго до анонса iPhone X: достаточно ли просто включить безопасную область?
Чем отличается?
Image?
ImageView?
Image?
Куда пойти отсюда?