Как поддерживать различные размеры экрана iphone с 2014 года?

Я почти закончил создание своего первого приложения для iPhone и пытаюсь добавить фоновое изображение, и я нахожу это немного запутанным, потому что в настоящее время в разных версиях iPhone есть 3 или 4 экрана разных размеров с разными разрешениями для загрузки.

Так что, хотя я и знаю обо всем [email protected], я все еще не знаю, что мне действительно нужно. Если я хочу, чтобы мое приложение работало на iPhone 4/4s, 5s/5c, 6/6+, сколько разных версий фонового изображения мне нужно, и в каких размерах и разрешениях?

Я погуглил и не нашел никаких связных ответов на сегодняшний день на 2014 год.

Кроме того, если iPhone 6 имеет разрешение 1334x750 @3x, значит ли это, что я должен включить фон 4002x2250? А затем для 1920x1080 iPhone 6+ @3x изображение 5760x3240? Это МАССИВНО! Мне кажется, что я должен понимать это неправильно.


person temporary_user_name    schedule 05.12.2014    source источник
comment
Является ли ваше фоновое изображение изображением чего-либо или просто повторяющимся узором?   -  person Rick    schedule 05.12.2014
comment
Изображение повторяющегося узора :) Наверное, я планировал обрезать его по форме или что-то в этом роде.   -  person temporary_user_name    schedule 05.12.2014
comment
Просто используйте ограничения и масштабируйте изображение в соответствии с вашими потребностями.   -  person soulshined    schedule 05.12.2014
comment
ты видел этот пост? stackoverflow.com/questions/25755443/ это может помочь вам понять   -  person wcd    schedule 11.12.2014
comment
Я видел это, да, но потом парень внизу сказал мне, что мне нужно изображение 3726 x 6624. Итак, 1224x2208 @3x означает, что 1224x2208 УЖЕ в 3 раза больше размера экрана, а не то, что мне нужно утроить эти размеры?   -  person temporary_user_name    schedule 12.12.2014
comment
Лучше прокомментировать мой ответ, если у вас есть вопросы по этому поводу. Нашел это случайно. Видимо, я неправильно понял, как работает @3x, то, что вы говорите, правда, изображение 6+, которое охватывает весь экран, должно быть 1224x2208. Это довольно странное решение Apple, и 2x/3x вызывает много путаницы. Связанный ответ хорошо объяснил это.   -  person Rick    schedule 13.12.2014
comment
То есть это означает, что если вы поддерживаете только iPhone 4 и выше, вам нужны только изображения @2x и @3x, а не базовое изображение?   -  person temporary_user_name    schedule 13.12.2014
comment
чувак, тебе нужно вызвать меня с помощью @, если ты хочешь ответить на мой комментарий. И iPhone 6 не @3x. Это неправильно. Смотрите мой ответ ниже. И если у вас есть вопрос, вы также должны прокомментировать ответ.   -  person wcd    schedule 15.12.2014


Ответы (5)


Если вы хотите поддерживать исходное разрешение iPhone 6/Plus, вам необходимо добавить изображения запуска (до iOS 8) или xib экрана запуска (iOS 8).

iPhone 4/4S: 640 x 960

iPhone 5/5S: 640 x 1136

iPhone 6: 750 x 1334

iPhone 6 Plus: 1242 x 2208

Это означает, что вам нужно подготовить 4 образа запуска с указанным выше разрешением, если вы хотите поддерживать эти устройства. Вы можете использовать симулятор iOS для захвата скриншотов с разными разрешениями. Ваше приложение будет работать в compatibility mode на устройствах с новым разрешением, если оно не сможет найти изображение запуска для определенного разрешения. compatibility mode означает, что ваше представление будет масштабироваться, чтобы соответствовать новому размеру экрана, при сохранении того же логического размера.

ИЗМЕНИТЬ:

Я думаю, что оп неправильно понимает, что означают @2x и @3x. Разрешение iPhone 6 — 750(pixels) x 1334(pixels), 326 pixels per inch. Это НАСТОЯЩЕЕ разрешение. А 375(points) x 667(points) — это логический размер, если поддерживается родное разрешение. Разрешение iPhone 6 Plus — 1242(pixels) x 2208(pixels), 401 pixels per inch, а логический размер — 414(points) x 736(points).

Вот как изображения с разным разрешением работают на устройстве iOS:

Допустим, вы хотите запустить свое приложение на iPhone 4s, iPhone 5/5S, iPhone 6/plus. Первое, что вам нужно сделать, это предоставить 4 образа запуска для поддержки собственных разрешений этих устройств. Когда iOS запускает ваше приложение, оно проверяет, предоставляет ли приложение правильное изображение запуска для поддержки родного разрешения текущего устройства. Если iOS найдет его, используйте его во время запуска, и логический размер экрана будет правильным, ваше приложение будет работать как обычно. В противном случае ваше приложение будет работать в compatibility mode, в котором будут масштабироваться все представления.

Предположим, в вашем приложении есть изображение с именем foo.png, логический размер которого равен 100(points) x 100(points). Вы хотите, чтобы это изображение выглядело одинаково на всех вышеперечисленных устройствах. Вы должны предоставить 2 версии этого изображения. Один из них 200(pixels) x 200 (pixels) и должен называться foo.png@2x, а другой - 300(pixels) x 300(pixels) с именем foo.png@3x. Если вы загрузите это изображение с [UIImage imageNamed:@"foo"], на устройствах, кроме iPhone 6 Plus, приложение загрузит изображение с именем foo.png@2x. В противном случае приложение загрузит foo.png@3x и сэмплирует его до 300 * 84% (пикселей) x 300 * 84% (пикселей).

И если вы загружаете изображение с URL-адреса и вам нужно отобразить его во время выполнения. Допустим, вы получили размер {width:100, height:100}, масштаб 1.0. Это означает, что РЕАЛЬНЫЙ размер этого изображения равен 100 * 1.0(pixels) x 100 * 1.0(pixels. Если вы не хотите, чтобы он масштабировался, вам нужно рассчитать логический размер самостоятельно. Вы делаете это так:

UIImage *image = ... // you get it from an url
CGFloat scale = [UIScreen mainScreen].scale;
CGFloat width = image.size.width / scale; 
CGFloat height = image.size.height / scale;
CGRect frame = CGRectMake(50.0f, 50.0f, width, height)];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:frame];
imageView.contentMode = UIViewContentModeCenter;
imageView.image = image;
[self.view addSubview:imageView];
person wcd    schedule 11.12.2014
comment
Это было очень полезно. Спасибо. - person temporary_user_name; 19.01.2015

Я думаю, что самый простой способ сделать это — использовать изображение, которое подходит для iPhone 6+, а затем просто установить UIImageView для contentMode на UIViewContentModeCenter. Я думаю, что это по крайней мере один, результат должен быть таким, что на iPhone 6+ у вас есть центрированное изображение, но на других экранах вы просто получаете часть изображения.

Даунсемплинг iPhone 6+ означает, что ассет @3x, покрывающий весь экран, должен быть 2208x1242 (То есть это разрешение уже 3x. «Настоящее» разрешение — 736x414). Это самое большое необходимое разрешение, и вы можете затем использовать одно и то же изображение для активов @2x и @1x, используя метод, который я описал.

person Rick    schedule 05.12.2014
comment
Совсем не плохая идея. Все еще означает поиск/создание изображения 3726 x 6624 ... массивного. - person temporary_user_name; 05.12.2014
comment
Да, но нельзя ли просто сгенерировать изображение, которое у вас уже есть, но с большим разрешением? - person Rick; 06.12.2014
comment
Как упоминалось в комментариях к вопросу, мой ответ о том, что требуется изображение 3726 x 6624, был неправильным. Я обновил ответ соответственно - person Rick; 13.12.2014
comment
736 x 414 — это логический размер, а не реальное разрешение. Реальное разрешение составляет 2208 x 1242 с уменьшением примерно на 87%. Смотрите мой ответ ниже. - person wcd; 15.12.2014
comment
Если вы не согласны с моей формулировкой, вы могли бы отредактировать ответ. - person Rick; 15.12.2014

Вам понадобятся три версии фонового изображения (1x, 2x, 3x). Хорошей практикой для получения изображений правильного размера является создание изображения в 3 раза больше размера вашего представления, а затем увеличение 2x и Версии 1x путем уменьшения масштаба.

Apple придумала новую концепцию под названием «Классы размера» для поддержки устройств разных размеров. Чтобы использовать классы размера, вам понадобится последняя версия Xcode (Xcode 6). В построителе интерфейса вы можете установить разные наборы ограничений для классов разных размеров. Таким образом становится легче поддерживать все размеры экрана. Чтобы узнать больше о классах Size, посмотрите видео WWDC 2014 «Создание адаптивных приложений с помощью UIKit».

person Varoon    schedule 05.12.2014
comment
А разве пропорции не разные? Я не могу просто иметь одинаковые X на Y с увеличением 1x/2x/3x, экраны имеют разную форму... - person temporary_user_name; 05.12.2014
comment
И, чтобы было ясно, если, например, iPhone 6+ требует 1242 x 2208 @3x, значит ли это, что я должен включать изображение 3726 x 6624? Это огромное... - person temporary_user_name; 05.12.2014
comment
@Aerovistae Вы правы. Соотношения будут отличаться для разных размеров экрана. Я обычно использую подход, о котором упоминал, когда устанавливаю изображение для подпредставления с фиксированным соотношением сторон. В вашем случае вы можете редактировать изображения для разных размеров экрана и устанавливать соответствующее изображение для каждого класса размера. Для каждого соотношения сторон есть версия 1x, 2x и 3x. - person Varoon; 05.12.2014
comment
Вы говорите, что мне нужно 1x/2x/3x для КАЖДОГО соотношения сторон, всего 9 версий фонового изображения? Это не имеет смысла для меня, я неправильно понимаю? - person temporary_user_name; 05.12.2014
comment
Это был бы безопасный подход. В основном дисплеи сетчатки используют 2x, а iPhone 6 Plus использует @3x, а остальные используют 1x. Позвольте мне сделать работу за вас и дать вам список разрешений, которые вам понадобятся для охвата всех устройств iPhone в качестве еще одного ответа. - person Varoon; 06.12.2014

Какой игровой движок вы используете? Если вы используете cocos2d или cocos2dx, вы можете использовать фоновое изображение 960 * 640. Код ниже будет масштабировать изображения в соответствии с размером экрана.

CCSize frameSize = pEGLView->getFrameSize();
    CCSize designSize = CCSizeMake(480, 320);
    vector<string> searchPaths;

    CCSize resourceSize;

    Utility :: isPad = true;
    searchPaths.push_back("hd");
    resourceSize = CCSizeMake(960, 640);

    CCEGLView::sharedOpenGLView()->setDesignResolutionSize(designSize.width , designSize.height, kResolutionExactFit);
    pDirector->setContentScaleFactor(resourceSize.width/designSize.width); 
person pankaj khanduja - Game Changer    schedule 05.12.2014

Это различные разрешения, которые вам понадобятся для фонового изображения.

  1. iPhone 4/4S — 640*960
  2. iPhone 5/5S — 640*1136
  3. iPhone 6 — 750 x 1334 для портретной ориентации 1334 x 750 для альбомной ориентации
  4. iPhone 6 Plus — 1242 x 2208 для портретной ориентации 2208 x 1242 для альбомной ориентации
person Varoon    schedule 06.12.2014
comment
Разрешение айфона 4 640х960. - person wcd; 11.12.2014