Как обрабатывать масштаб изображения на всех доступных разрешениях iPhone?

Какие размеры лучше всего использовать для изображений: background.png, [email protected] и [email protected], если мы хотим использовать это изображение, например, чтобы покрыть всю ширину и половину высоты экрана на все разрешения для iPhone портфолио?

Это то, что мы имеем сейчас:

Device          Points    Pixels     Scale  Physical Pixels   Physical PPI  Size
iPhone X        812x375   2436x1125  3x     2436x1125         458           5.8"
iPhone 6 Plus   736x414   2208x1242  3x     1920x1080         401           5.5"
iPhone 6        667x375   1334x750   2x     1334x750          326           4.7"
iPhone 5        568x320   1136x640   2x     1136x640          326           4.0"
iPhone 4        480x320   960x640    2x     960x640           326           3.5"
iPhone 3GS      480x320   480x320    1x     480x320           163           3.5"

iPhone resolutions

Некоторые люди говорят, что для края к краю изображения (например, баннер внизу слева от правого края экрана) для iPhone 6 Plus они будут готовить [email protected] с шириной 1242 и для iPhone 6 back @2x.png с шириной 750, чтобы соответствовать размеру экрана iPhone 6, однако я не думаю, что это хорошая идея, потому что 1242/3 = 414 и 750/2 = 375, поэтому их имена как @2x и @3x не имеют смысла. И тогда какая ширина должна иметь back.png - 375 или 414?

Названия графиков используют суффиксы @2x и @3x, так что если, например, [email protected] имеет разрешение 30x30, тогда логическое мышление [email protected] должно иметь разрешение 20x20, а image.png должно быть 10x10. Это означает, что если мы хотим иметь четкое изображение полной ширины для каждого экрана, то мы, вероятно, должны создать [email protected] с шириной 414 * 3 = 1242px, [email protected] с шириной 414 * 2 = 828px и back.png с ширина 414px. Это, однако, означает, что на каждом iPhone, кроме iPhone 6 Plus, вам нужно будет настроить свои uiimages для использования, например, для режима контента с поддержкой соответствия форматов, и они будут искажены, так что это опять же не решение perferct и, вероятно, действительно замедлит приложение, если мы используем много scalling на более старых устройствах.

Итак, как вы думаете, было бы лучшим решением для решения этой проблемы?

Ответ 1

Вам не обязательно иметь каждое изображение во всех масштабах, если оно не будет использоваться. Сделайте только нужные вам размеры и назовите их в соответствии с их шириной. Для портретных изображений с полным набором устройств вам нужно 320 пикселей шириной 1x и 2x, 375 пикселей шириной в 2x и 414 пикселей шириной в 3 раза.

4 "устройства использовали суффикс" -568h "для обозначения их изображений запуска, поэтому я бы рекомендовал аналогичную схему именования:

  • ImageName-320w (@1x и @2x)
  • ImageName-375w (@2x)
  • ImageName-414w (@3x)

Затем выясните, какое изображение вам нужно во время выполнения:

NSNumber *screenWidth = @([UIScreen mainScreen].bounds.size.width);
NSString *imageName = [NSString stringWithFormat:@"name-%@w", screenWidth];
UIImage *image = [UIImage imageNamed:imageName];

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

Ответ 2

Я лично буду делать:

ImageName @2x iPhone 4/4s
ImageName-568h @2x iPhone 5/5s
ImageName-667h @2x iPhone 6
ImageName-736h @3x iPhone 6Plus

Логика этого заключается в том, что она показывает разницу между всеми устройствами, тогда как ширина имеет одинаковое значение на iPhone 5 и iPhone 4s

Edit:

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

ImageName @2x iPhone 4/4s/5/5s/6
ImageName @3x iPhone 6Plus/Режим масштабирования

Ответ 3

Для обсуждения @2x и @3x вам действительно не нужно заботиться об этом. Обратите внимание на размер точки на экране и убедитесь, что есть активы @2x с удвоенным размером точки и активами @3x с трехкратным размером точки в пикселях. Устройство автоматически выберет правильный. Но, читая свой пост, я думаю, вы уже знаете это.

Для изображений от края до края, к сожалению, вы должны сделать это для всех разрешений экрана. Итак, для портрета iPhone это будет 320 очков, 375 очков и 414 очков, где 414 очков - 3 раза. Лучшее решение может заключаться в том, чтобы сделать ваши изображения масштабируемыми, настроив срез в построителе интерфейса (если вы используете каталоги изображений, то есть). Но в зависимости от изображения это может быть или не быть вариантом, в зависимости от того, имеет ли изображение повторяемую или растягиваемую часть. Масштабируемые изображения, созданные таким образом, очень мало влияют на производительность.

Ответ 4

the @2 и @3 - это не реальное масштабирование изображения, а только представление того, насколько реальный пиксель представляет собой один виртуальный пиксель на экране, какой-то hdpi/xhdpi/xxhdpi/blabla из вселенной android. он показывает только системе, какое изображение должно использоваться для экрана какого-либо устройства.

поэтому, если вам нужно использовать изображение всего экрана - подготовьте его в зависимости от реального размера экрана.

Ответ 5

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

Ответ 6

Я создал категорию для этого:

+ (UIImage *)sizedImageWithName:(NSString *)name {
    UIImage *image;
    if (IS_IPHONE_5) {
        image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-568h",name]];
        if (!image) {
            image = [UIImage imageNamed:name];
        }
    }
    else if (IS_IPHONE_6) {
        image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-750w",name]];
    }
    else {
        image = [UIImage imageNamed:name];
    }
    return image;
}

вы можете взять полный код здесь: https://gist.github.com/YGeorge/e0a7fbb479f572b64ba5

Ответ 7

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

image-iphone4-4s.png (640x960/2) for 1/2 screen height image-iphone5-5c-5s.png (640x1136/2) for 1/2 screen height image-iphone6-6s.png (750x1334/2) for 1/2 screen height image-iphone6plus-6splus.png (1242x2208/2) for 1/2 screen height,

в этой ситуации искателя нет необходимости в @? x.

Ответ 8

Я думаю, мы должны использовать разные размеры фоновых изображений для разных устройств. Просто используйте изображения масштаба 3x для фона.

Вы можете обнаружить устройство с нижними строками.

#define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
#define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
#define IS_RETINA ([[UIScreen mainScreen] scale] >= 2.0)

#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)
#define SCREEN_HEIGHT ([[UIScreen mainScreen] bounds].size.height)
#define SCREEN_MAX_LENGTH (MAX(SCREEN_WIDTH, SCREEN_HEIGHT))
#define SCREEN_MIN_LENGTH (MIN(SCREEN_WIDTH, SCREEN_HEIGHT))

#define IS_IPHONE_4_OR_LESS (IS_IPHONE && SCREEN_MAX_LENGTH < 568.0)
#define IS_IPHONE_5 (IS_IPHONE && SCREEN_MAX_LENGTH == 568.0)
#define IS_IPHONE_6 (IS_IPHONE && SCREEN_MAX_LENGTH == 667.0)
#define IS_IPHONE_6P (IS_IPHONE && SCREEN_MAX_LENGTH == 736.0) 

Ответ 9

Я лично буду делать:

[email protected] iPhone 4/4s
[email protected] iPhone 5/5s
[email protected] iPhone 6
[email protected] iPhone 6Plus

Логика этого заключается в том, что она показывает разницу между всеми устройствами, тогда как width имеет одно и то же значение в iPhone 5s и iPhone 4s.

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

[email protected] iPhone 4/4s/5/5s/6
[email protected] iPhone 6Plus/Zoom mode