Як обробляти масштаб зображення у всіх доступних роздільних здатностях 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 вони готували б назад@3x.png шириною 1242 та для iPhone 6 назад@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 = 1242px, back@2x.png шириною 414 2 = 828px і back.png шириною 414px . Однак це означає, що на кожному iPhone, окрім iPhone 6 Plus, вам потрібно буде налаштувати свої зображення для використання, наприклад, режиму вмісту, який відповідає розміру, і вони будуть зменшені, тому це знову не є досконалим рішенням і, ймовірно, дійсно сповільнить додаток, якщо ми використовуємо багато масштабування на старих пристроях.

Тож, на вашу думку, було б найкращим рішенням для вирішення цієї проблеми?


1
Екрани iPhone 6 Демістифікована посилання: bit.ly/1qHEBKk Остаточне керівництво по iPhone Resolutions посилання: bit.ly/1paVXLd
King-Wizard

iPhone 6 Plus 414 x 736 балів 1242 x 2208 пікселів 3x масштабу 1080 x 1920 фізичних пікселів 401 фізичних пікселів 5,5 "iPhone 6 375 x 667 пунктів 750 x 1334 пікселів 2x масштабу 750 x 1334 фізичних пікселів 326 фізичних пікселів 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

Відповіді:


49

Ви не повинні мати кожне зображення у всіх масштабах, якщо воно не буде використане. Складіть лише потрібні вам розміри та назвіть їх відповідно до їх ширини. Для портретних зображень на повну ширину пристрою вам потрібно 320 пікселів у ширину 1х та 2х, шириною 375 пікс у 2х та шириною 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 завжди вимагала відновити додаток для підтримки нових дисплеїв, тому я думаю, що дещо безпечно припускати, що вони продовжать робити це.


ну ось одна з причин того, що Apple не представила 32 ГБ версії нової версії iphones.16 ГБ як тестові пристрої та 64 для використання. Розміри додатків різко збільшаться завдяки графіці.
Ilker Baltaci

1
@IlkerBaltaci Я б зрозумів, якщо вони дозволять розробникам купувати лише 16 Гб версію, але таким чином знайдеться багато людей, які навіть не зможуть оновити ОС через брак місця на диску.
Філіп Раделіч

це правда навіть з 32 ГБ, мені довелося чекати тиждень, щоб прибрати і зробити 5 ГБ місця для IOS 8.
Ілкер Балтачі

2
Як їх використовувати в IB?
Хавар

@FilipRadelic, що з iPhone5? ширина 640, але висота інша, ніж у iPhone 4
MeV

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 / Zoom


1
Як щодо "режиму збільшення" в iPhone 6 плюс? Чи не потрібно нам також надавати ImageName-667h @ 3x?
François Verry

@thewormsterror Я думаю, що остання конвенція про іменування ваших зображень є наповненою
Гадес

@thewormsterror чудова відповідь, ви також можете додати, як слід називати зображення ipad.
Лукаш

Якщо зображення з api - 1024 x 768, чи означає це максимальний розмір, який я можу використовувати, це 256 @ 3x?
Мирко

8

Для обговорень @ 2x та @ 3x вам насправді не потрібно про це піклуватися. Дбайте про розмір точки на екрані та переконайтеся, що в ньому розміщено @ 2x активи з подвоєним розміром точки та @ 3x активами з триразовим розміром точки в пікселях. Пристрій автоматично вибере потрібний. Але читаючи ваш пост, я думаю, ви це вже знаєте.

Для зображень від краю до краю, на жаль, ви повинні зробити це для всіх роздільних можливостей екрана. Так, для портретного iPhone це було б 320 балів, 375 балів і 414 балів, де 414 балів повинен був бути 3x. Кращим рішенням може бути зробити ваші зображення масштабованими, встановивши нарізку в конструкторі інтерфейсів (якщо ви використовуєте каталоги зображень, тобто). Але, залежно від зображення, це може бути, а може і не бути варіантом, залежно від того, чи має зображення повторювана або розтяжна частина. Налаштовані таким чином масштабовані зображення мають дуже незначний вплив на продуктивність.


1
Мені потрібно підігнати ширину екрана до зображення всередині uicollectionviewcell (очевидно, всередині uicollectionview, що відповідає всім екрану). Для iphone 6 plus я вирішую поставити для 3x a (414x3 = 1242 px), 2x, який розмір я повинен використовувати? Він повинен відповідати iphone4s / 5 / 5s, а також 6 екрану ...
jerrygdm

1
У мене є піктограма розміром 222px x 260px, яка виглядає ідеально на екрані iPhone5 / 5s. Тепер, роблячи додаток сумісним з екраном iPhone6 ​​та 6plus 1), який має бути розмір цього значка? Як правило, тричі це повинно бути 333px x 390px? 2) чи потрібно мені застосувати будь-яке автоматичне змінення розміру до зображення в xib?
Відповідь

@ jerrygdm, у мене майже такий самий сценарій, як і у тебе. Що ти робив наприкінці дня? Ви можете поділитися цим зі мною, будь ласка?
Тулон

@Ans, Ви використовували 3-кратний значок для iphone6 ​​та iphone6Plus.
JiteshW

@Jitesh Я задаю те саме питання ... при якому розмірі я повинен зробити значок x3x? Хочу додати, але який має бути розмір ... це було моє питання ..
Відповідь

2

@ 2 і @ 3 не є реальним масштабуванням зображення, а лише представляють, скільки реального пікселя представляє один віртуальний піксель на екрані, якийсь hdpi / xhdpi / xxhdpi / blabla з андроїд Всесвіту. він лише показує системі, яке зображення слід використовувати для певного екрану пристрою.

тому якщо вам потрібно використовувати зображення на весь екран - підготуйте його залежно від реального розміру екрана.


2

Залежно від графіки, в деяких випадках це може спрацювати нормально, коли ми використовуємо лише одне зображення, наприклад банер розміром 414 балів шириною х 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) 
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.