- PVSM.RU - https://www.pvsm.ru -
Друзья.
Сегодня речь пойдёт о создании красивых бэкграундов в iOs приложениях с точки зрения программиста, расчёте их разрешений, специфики разных Apple устройств и обходе подводных камней. Многое из этого для большинства iOs разработчиков покажется очевидным, но я буду рад, если для некоторых это станет инструкцией при непосредственной работе.
Итак, мы должны ответить на следующие вопросы:
Не важно, для iPad, iPhone, iPod или универсальное приложение мы пишем, будут поддерживаться обе ориентации устройства или только одна, в любом случае, нам бы хотелось, чтобы задумка дизайнера с фоном была правильно реализована точно как на картинке-прототипе. Для этого нам, в первую очередь, необходимо избежать масштабирования изображения, к тому же это также благоприятно повлияет на performance, что тоже неплохо. Поэтому нам нужно рассчитать точные размеры рабочей области окна (размер бэкграундной картинки).
Исходные данные
Разрешения iOs устройств:
Высоты элементов:
Теперь просто вычитаем из высоты экрана количество точек, что «съедают» элементы управления и получаем размеры картинок для бэкграунда, учитываем обе ориентации, если необходимо.
Например, если у нас присутствуют status bar и navigation bar, но нет tab bar, мы получаем:
Портретная ориентация:
Альбомная ориентация:
Согласно документации Apple среда сама выберет картинку нужного разрешения (для Retina или без) для нужного устройства, если в ресурсах присутствуют файлы с соответствующими суффиксами. Для Retina экранов это "@2x", для iPhone — "~iphone", для iPad — "~ipad". Внимание! Суффиксы чувствительны к регистру.
Кроме того, нам нужно учесть так же в названиях обе ориентации (предлагаю это сделать без суффикса для портретной и с помощью суффикса «l» для альбомной) и увеличенный размер картинки для iPhone 5 (многие это делают с помощью суффикса "-586h"). Эти суффиксы не обрабатываются системой автоматически и нам придётся делать это вручную.
Таким образом мы получаем список имён файлов, которые надо добавить в ресурсы:
Альбомная ориентация:
Итак, картинки нужных разрешений созданы, теперь давайте заставим их работать так, как нужно.
Для начала сделаем функцию loadBgImage, которая будет выбирать нужную текстуру. Напоминаю, что нам вручную нужно подставлять только 2 суффикса к названию.
- (UIImage *) loadBgImageWithLandscapeOrientation: (BOOL) isLandscape
{
static BOOL isIphone5 = [UIScreen mainScreen].bounds.size.height == 568;
NSString * imageName = @"background";
if (isLandscape)
{
imageName = [imageName stringByAppendingString: @"l"];
}
if (isIphone5)
{
imageName = [imageName stringByAppendingString: @"-586h"];
}
return [UIImage imageNamed: imageName];
}
А теперь добавим в наш view controller следующую функцию:
-(void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
[super willAnimateRotationToInterfaceOrientation: toInterfaceOrientation duration: duration];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:duration];
self.tableView.backgroundView = [[UIImageView alloc] initWithImage: [self loadBgImageWithLandscapeOrientation: UIInterfaceOrientationIsLandscape(toInterfaceOrientation)]];
[UIView commitAnimations];
}
Добавим аналогичный код первоначальной загрузки картинки в viewDidLoad и всё!
Обратите внимание, что мы меняем бэкграунд при смене ориентации, используя Core Animation, поэтому всё должно быть не только быстро, но и красиво. Кроме того, чтобы это работало ещё быстрее, советую растеризовать объекты, находящиеся на этом фоне, установив у них свойство view.layer.shouldRasterize в YES и указав в свойстве view.layer.rasterizationScale необходимый коэффициент маштабирования [UIScreen mainScreen].scale.
Всё, мы справились с заданием, которое ставили себе в самом начале.
Спасибо за внимание.
Автор: spiritms
Источник [1]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/interfejsy/40060
Ссылки в тексте:
[1] Источник: http://habrahabr.ru/post/188698/
Нажмите здесь для печати.