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

99

Какие размеры лучше всего использовать для изображений: 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

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

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

Лешек Сары
источник
1
Экраны iPhone 6 Демистифицированная ссылка: bit.ly/1qHEBKk Полное руководство по разрешениям iPhone ссылка: bit.ly/1paVXLd
King-Wizard
iPhone 6 Plus 414 x 736 точек 1242 x 2208 пикселей Масштаб 3x 1080 x 1920 физических пикселей 401 физический ppi 5,5 дюйма iPhone 6 375 x 667 точек 750 x 1334 пикселей Масштаб 2x 750 x 1334 физических пикселей 326 физический ppi 4,7 дюйма iPhone 5 320 x 568 точек 640 x 1136 пикселей 2x масштаб 640 x 1136 физических пикселей 326 физических пикселей на дюйм 4,0 "
King-Wizard
iPhone 4 320 x 480 точек 640 x 960 пикселей Масштаб 2x 640 x 960 физических пикселей 326 физических пикселей на дюйм 3,5 дюйма iPhone 3GS 320 x 480 точек 320 x 480 пикселей Масштаб 1x 320 x 480 физических пикселей 163 физических пикселей на дюйм 3,5 дюйма
King-Wizard
следуйте за " stackoverflow.com/questions/48483934/… "
Ришил Патель

Ответы:

49

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

Филип Раделич
источник
Что ж, это одна из причин, по которой Apple не представила 32-гигабайтную версию нового iphone. 16-гигабайтная версия в качестве тестовых устройств и 64 ГБ для использования. Размеры приложений резко увеличатся из-за графики.
Ilker Baltaci
1
@IlkerBaltaci Я бы понял, если бы они позволили разработчикам покупать только версию на 16 ГБ, но так будет много людей, которые даже не смогут обновить свою ОС из-за нехватки места на диске.
Филип Раделич
это правда, даже с 32 ГБ мне пришлось ждать одну неделю, чтобы очистить и освободить 5 ГБ места для IOS 8.
Илкер Балтачи
2
Как их использовать в ИБ?
Khawar
@FilipRadelic как насчет iPhone5? ширина 640, но высота отличается от той, что используется для iPhone 4
МэВ
41

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

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 / Режим масштабирования

червяк
источник
1
А как насчет «режима масштабирования» в iPhone 6 plus? Разве нам не нужно также предоставить ImageName-667h @ 3x?
Франсуа Верри,
@thewormsterror Я думаю, последнее из ваших соглашений об именах изображений выполнено
Hades
@thewormsterror отличный ответ, вы также можете добавить, как должны называться изображения ipad.
Лукас
Если изображение, поступающее из api, имеет размер 1024 x 768, означает ли это, что максимальный размер, который я могу использовать, составляет 256 @ 3x?
Mirko
8

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

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

Эмиель
источник
1
Мне нужно подогнать ширину экрана с изображением внутри uicollectionviewcell (очевидно, внутри uicollectionview, подходящего для всего экрана). Для iphone 6 plus я решаю поставить 3x a (414x3 = 1242 пикселей), 2x какой размер я должен использовать? Он должен соответствовать iphone4s / 5 / 5s, а также экрану 6 ...
jerrygdm 07
1
У меня есть значок размером 222 x 260 пикселей, который идеально подходит для экрана iPhone5 / 5s. Теперь, когда приложение совместимо с экраном iPhone6 ​​и 6plus: 1) какого размера должен быть этот значок? по правилу трехкратного размера, должно ли оно быть 333 x 390 пикселей? 2) нужно ли применять автоматическое изменение размера изображения в xib?
Ans
@ jerrygdm, у меня почти такой же сценарий, как у вас. Что ты делал в конце дня? Не могли бы вы поделиться со мной, пожалуйста?
Tulon
@Ans, А ты 3х иконку использовал для iphone6 ​​и iphone6Plus.
JiteshW
@Jitesh Я задаю тот же вопрос ... в каком размере я должен сделать иконку x3x? Я хочу добавить, но какой должен быть размер ... это был мой вопрос ..
Ans
2

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

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

Денис Кожухов
источник
2

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

Лешек Сары
источник
2

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

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

Джордж
источник
0

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

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.

ناصر عبده عبده محمد
источник
0

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