В этом руководстве будут рассмотрены шаги, необходимые для обеспечения того, чтобы ваши приложения iOS продолжали отлично выглядеть при отображении на новом экране iPhone 5.
Загрузите последние инструменты
Чтобы создавать приложения, совместимые с iOS 6 и iPhone 5, вам необходимо убедиться, что на вашем компьютере для разработки установлен Xcode 4.5 (или более поздней версии) и iOS 6 SDK. С открытым Xcode выберите Xcode> About Xcode из меню, чтобы проверить текущую установленную версию.
Чтобы получить новейшие инструменты, вам нужно пойти в Центр разработчиков Apple после регистрации в качестве разработчика Apple.
Я бы порекомендовал сделать дополнительный шаг по установке симуляторов iOS 5.1 и iOS 5.0 и «инструментов командной строки» после установки последней версии Xcode. Для этого выберите Xcode> Preferences и перейдите на вкладку Downloads . Установите дополнительные опции в списке. Когда вы это сделаете, окно должно выглядеть так:
Использовать образ запуска iPhone 5 по умолчанию
Вам нужно будет включить изображение с именем [email protected] в свой проект, чтобы в полной мере использовать возможности дисплея iPhone 5. Это может показаться произвольным, но наличие этого файла определяет, будет ли ваше приложение работать в режиме почтового ящика (то есть с черными полосами над и под содержимым) или в полноэкранном режиме.
Конечно, у файла [email protected] есть и другая цель: это будет изображение по умолчанию, отображаемое при загрузке приложения на iPhone 5. Это выполняет ту же функцию, что и файл Default.png для iPhone без сетчатки. / устройства iPod touch и файл [email protected] для iPhone 4 / 4S.
При запуске проекта в Xcode 4.5 без файла [email protected] вы можете получить автоматическое всплывающее окно, подобное следующему:
Если это так, продолжайте и нажмите «Добавить», чтобы Xcode создал сплошную черную панель запуска для вас, просто не забудьте изменить ее позже на что-то более подходящее для вашего приложения.
Если вы не видите всплывающее окно Xcode, вы можете сохранить это изображение на своем компьютере, а затем перетащить его в область навигатора проекта Xcode, чтобы добавить его в свой проект. Простой черный стартовый образ не идеален, но он удовлетворит требование и переведет ваше приложение в полноэкранный режим.
Создайте и запустите свой проект на iPhone 5. В идеале, вы должны быть хороши, не внося никаких изменений! Однако есть ряд причин, по которым ваше приложение может выглядеть неправильно в новом разрешении. Вторая половина этого учебника будет посвящена отладочным приложениям, которые не отображаются должным образом после выполнения этого шага.
Переход к динамическим макетам
Разработчики iOS были несколько избалованы по сравнению со своими коллегами по Android, когда речь заходит о программировании макетов. Начнем с того, что все начальные экраны iPhone и iPod touch имели одинаковое разрешение экрана: 320×480 пикселей. Когда дисплей сетчатки, используемый iPhone 4 и 4S, был представлен в 2010 году, разрешение дисплея удвоилось до 640×960 пикселей, но разработчики все еще могли ссылаться на размер экрана в коде как 320×480. Почему? Потому что с iOS 4 Apple ввела понятие «логических точек» в UIKit. Эти точки могут динамически отображаться на физические пиксели через свойство contentScaleFactor класса UIView . Затем contentScaleFactor был настроен на логическое отражение изменения разрешения по умолчанию: 1,0 для iPhone 3G / 3GS и 2,0 для 4 / 4S.
Цитата из руководства Apple по рисованию и печати для iOS :
В iOS существует различие между координатами, которые вы указываете в своем коде рисования, и пикселями базового устройства. При использовании собственных технологий рисования, таких как Quartz, UIKit и Core Animation, координатное пространство рисования и координатное пространство вида являются логическими координатными пространствами с расстояниями, измеренными в точках. Эти логические системы координат отделены от пространства координат устройства, используемого системными структурами для управления пикселями на экране.
Система автоматически отображает точки в координатном пространстве вида на пиксели в координатном пространстве устройства, но это отображение не всегда взаимно однозначное. Такое поведение приводит к важному факту, который вы всегда должны помнить:
Одна точка не обязательно соответствует одному физическому пикселю.
Цель использования точек (и логической системы координат) состоит в том, чтобы обеспечить постоянный размер вывода, который не зависит от устройства. Для большинства целей фактический размер точки не имеет значения. Цель очков — предоставить относительно непротиворечивую шкалу, которую вы можете использовать в своем коде, чтобы указать размер и положение представлений и отображаемого контента. То, как точки на самом деле отображаются в пикселях, является деталью, которая обрабатывается системными структурами. Например, на устройстве с экраном высокого разрешения линия шириной в одну точку может фактически привести к линии шириной два физических пикселя. В результате, если вы рисуете один и тот же контент на двух одинаковых устройствах, и только у одного из них экран высокого разрешения, контент на обоих устройствах кажется примерно одинакового размера.
Так что, как разработчики iOS, нам было довольно легко благодаря этому нововведению. Однако с введением в iPhone 5 разрешения 640x1136px использование вертикального размера 480 точек больше не будет заполнять все доступное вертикальное пространство.
Чтобы увидеть это в действии, предположим, что программист пытается программно добавить пользовательское фоновое представление в корневой контроллер своего приложения. Представьте, что программист написал этот код для того, чтобы сделать это:
|
1
2
3
4
5
6
|
UIView *customBackgroundView = [[UIView alloc]
initWithFrame:
CGRectMake(0.0f, 0.0f, 320.0f, 480.0f)];
customBackgroundView.backgroundColor = [UIColor redColor];
customBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight |
[self.view addSubview:customBackgroundView];
|
До iPhone 5 вышеуказанный блок кода работал бы просто отлично. Логические точки 320×480 будут соответствовать 640×960 со стандартным масштабным коэффициентом 2.0 для iPhone 4 / 4S. Тем не менее, на iPhone 5 высота будет по-прежнему отображаться на 960 пикселей и будет меньше:
Решение этой проблемы довольно просто:
|
1
2
3
4
5
6
|
UIView *customBackgroundView = [[UIView alloc]
initWithFrame:
CGRectMake(0.0f, 0.0f, self.view.frame.size.width, self.view.frame.size.height)];
customBackgroundView.backgroundColor = [UIColor redColor];
customBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight |
[self.view addSubview:customBackgroundView];
|
В этом сценарии нам просто нужно было динамически изменить размер текущего корневого представления, чтобы разместить новый пользовательский фоновый вид по всей области.
Для другого примера, давайте предположим, что программист хотел создать новое представление программно в loadView: :
|
1
2
3
4
5
6
7
8
|
— (void)loadView
{
CGRect applicationFrame = [[UIScreen mainScreen] applicationFrame];
UIView *customView = [[UIView alloc] initWithFrame:applicationFrame];
customView.backgroundColor = [UIColor redColor];
customView.autoresizingMask = UIViewAutoresizingFlexibleHeight |
self.view = customView;
}
|
Свойство applicationFrame UIScreen будет возвращать границы прямоугольника рамки, используемые для окна текущего приложения, за вычетом области, занятой строкой состояния (если она видна). В качестве альтернативы вы можете получить только ограничивающий прямоугольник экрана с помощью [[UIScreen mainScreen] bounds] . Оба значения будут возвращены в логических точках, а не в пикселях.
Хотя приведенные выше примеры кода полезны, они также несколько ограничены. На практике вам, возможно, придется иметь дело с более сложными сценариями, которые включают динамическое изменение размера многих подпредставлений в зависимости от высоты экрана устройства.
К счастью, для этого можно использовать как минимум три различных подхода.
Просмотр авторазмера
Свойство UIView autoresizingMask — это простое, но эффективное средство, обеспечивающее динамическую корректировку объектов подпредставления относительно их суперпредставления. В приведенном выше фрагменте кода я использовал его, чтобы убедиться, что ширина и высота настраиваемого объекта фонового представления будут соответствующим образом масштабироваться при изменении ориентации:
|
1
|
customBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight |
|
Обратите внимание, что свойство autoresizingMask может контролироваться визуально также из Xcode / Interface Builder.
Большинство приложений, которые используют элементы управления UIKit и контейнеры по умолчанию, должны нормально работать на iPhone 5, комбинируя значения переменных для создания фрейма (как показано ранее) и устанавливая интеллектуальные свойства автоматического изменения размера для подпредставлений.
Обратитесь к официальной документации Apple и руководству по программированию представления для получения дополнительной информации.
Система автоматической разметки
Новая система Auto Layout, представленная в iOS 6, предоставляет усовершенствованный метод управления размещением видов. Автоматическая компоновка использует систему ограничений для объяснения и применения отношений представления. Единственным недостатком использования Auto Layout является то, что он несовместим с iOS 5 и более ранними версиями.
Дальнейшее освещение Auto Layout выходит за рамки этого руководства. Тем, кто хочет узнать больше, следует обратиться к Руководству Apple по автоматической компоновке какао и сеансу WWDC 2012 Введение в автоматическую компоновку .
Тестирование устройства
Другой подход, используемый некоторыми, заключается в попытке проверить, является ли текущее устройство iPhone 5 во время выполнения. Самая продвинутая версия, которую я нашел, взята из этого ответа на StackOverflow .
Ниже приведена слегка измененная версия макросов, созданных в публикации StackOverflow:
|
1
2
3
4
|
#define IS_IPHONE ( [[[UIDevice currentDevice] model] isEqualToString:@»iPhone»] )
#define IS_IPOD ( [[[UIDevice currentDevice ] model] isEqualToString:@»iPod touch»] )
#define IS_HEIGHT_GTE_568 [[UIScreen mainScreen ] bounds].size.height >= 568.0f
#define IS_IPHONE_5 ( IS_IPHONE && IS_HEIGHT_GTE_568 )
|
Первый и второй макросы проверяют, является ли текущее устройство iPhone или iPod touch, используя класс UIDevice .
Третий макрос проверяет, является ли высота экрана больше или равна значению 568 с плавающей запятой. Вспомните сверху, что сообщение [[UIScreen mainScreen] bounds] возвратит ограничивающий прямоугольник окна приложения в логических точках и что 568 логических точек будет отображаться до 1136 пикселей с представлением по умолчанию contentScaleFactor 1.0.
Наконец, четвертый макрос объединяет два предыдущих макроса в макрос IS_IPHONE_5 который (на данный момент) должен возвращать TRUE, только если код работает на iPhone 5. Вы можете использовать финальную версию в своем собственном коде, например так:
|
1
2
3
4
5
6
7
8
|
if(IS_IPHONE_5)
{
NSLog(@»Hey, this is an iPhone 5! Well, maybe. . .what year is it?»);
}
else
{
NSLog(@»Bummer, this is not an iPhone 5. . .»);
}
|
Хотя вышеуказанный подход потенциально полезен, он также подвержен ошибкам . Например, что произойдет, если iPhone 6 будет выпущен с совершенно новыми размерами? Я бы посоветовал не использовать этот подход, если это вообще возможно. Вместо этого, используйте Маски с автоматическим изменением размера или Автоматическое расположение, если вы можете заставить один из этих подходов работать.
Заворачивать
В этом уроке объясняются различные способы размещения увеличенного дисплея iPhone 5. Если вы боролись с адаптацией к новому размеру экрана, надеюсь, вы нашли содержание полезным!
Не стесняйтесь оставлять любые ваши отзывы в комментариях ниже. Вы также можете связаться со мной в Twitter , Google Plus или LinkedIN . Ура!