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