Главная Мой профиль РегистрацияВыход RSS
Вы вошли как Гость | Группа "Гости"Приветствую Вас, Гость
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Форма входа
Поиск
Архив записей
[ Добавить новость 

Руководство по разработке для 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?
Куда пойти отсюда?