Какие размеры лучше всего использовать для изображений: 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 "для именования своих изображений запуска, поэтому я бы рекомендовал аналогичную схему именования:
Затем выясните, какой образ вам нужен во время выполнения:
Это может сломаться, если в будущем будут добавлены другие значения ширины, но до сих пор 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. Тогда на небольших устройствах левая и правая часть изображения будут обрезаны, и мы увидим только центральную часть изображения.
источник
Я создал для этого категорию:
вы можете взять полный код здесь: 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 для фона.
Вы можете обнаружить устройство с помощью следующих строк.
источник