Як обробляти масштаб зображення у всіх доступних роздільних здатностях 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 вони готували б назад@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, вам потрібно буде налаштувати свої зображення для використання, наприклад, режиму вмісту, який відповідає розміру, і вони будуть зменшені, тому це знову не є досконалим рішенням і, ймовірно, дійсно сповільнить додаток, якщо ми використовуємо багато масштабування на старих пристроях.

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

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

Я особисто буду робити:

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

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

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

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

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

Залежно від графіки, в деяких випадках це може спрацювати нормально, коли ми використовуємо лише одне зображення, наприклад банер розміром 414 балів шириною х 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)