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

Какие размеры лучше всего использовать для изображений: background.png, background@2x.png и background@3x.png, если мы хотим использовать это изображение, например, для покрытия всей ширины и половины высоты экрана во всех разрешениях для Приложение для портретной ориентации iPhone?

Вот что у нас есть сейчас:

Device          Points    Pixels     Scale  Physical Pixels   PPI   Ratio   Size
iPhone XS Max   896x414   2688x1242  3x     2688x1242         458   19.5:9  6.5"
iPhone XR       896x414   1792x828   2x     1792x828          326   19.5:9  6.1"
iPhone X        812x375   2436x1125  3x     2436x1125         458   19.5:9  5.8"
iPhone 6 Plus   736x414   2208x1242  3x     1920x1080         401   16:9    5.5"
iPhone 6        667x375   1334x750   2x     1334x750          326   16:9    4.7"
iPhone 5        568x320   1136x640   2x     1136x640          326   16:9    4.0"
iPhone 4        480x320   960x640    2x     960x640           326   3:2     3.5"
iPhone 3GS      480x320   480x320    1x     480x320           163   3:2     3.5"

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

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

Как вы думаете, как лучше всего решить эту проблему?

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

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 всегда требовала перестраивать приложение для поддержки новых дисплеев, поэтому я думаю, можно с уверенностью предположить, что они будут продолжать это делать.

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

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

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

Редактировать:

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

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

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

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

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

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

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

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

+ (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

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

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.

Я думаю, мы должны использовать разные размеры фоновых изображений для разных устройств. Просто используйте изображения в масштабе @ 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)