Comment gérer l'échelle d'image sur toutes les résolutions iPhone disponibles?

Quelles tailles seraient les meilleures à utiliser pour les images: background.png, background@2x.png et background@3x.png si nous voulons utiliser cette image par exemple pour couvrir toute la largeur et la demi-hauteur de l'écran sur toutes les résolutions pour Application de portrait iPhone?

Voici ce que nous avons maintenant:

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"

Certaines personnes disent que pour une image bord à bord (comme une bannière en bas de gauche à droite de l'écran) pour iPhone 6 Plus, ils prépareraient back@3x.png avec une largeur 1242 et pour iPhone 6 back@2x.png avec largeur 750 pour correspondre à la taille de l'écran de l'iPhone 6 mais je ne pense pas que ce soit une bonne idée car 1242/3 = 414 et 750/2 = 375 donc les nommer comme @ 2x et @ 3x n'a pas de sens. Et puis quelle largeur devrait avoir back.png - 375 ou 414?

Les noms graphiques utilisent les suffixes @ 2x et @ 3x, donc si, par exemple, image@3x.png a une résolution de 30x30, alors en pensant logiquement, image@2x.png devrait avoir une résolution de 20x20 et image.png devrait être de 10x10. Cela signifie que si nous voulons avoir une image pleine largeur nette pour chaque écran, nous devrions probablement créer back@3x.png avec une largeur 414 3 = 1242px, back@2x.png avec une largeur 414 2 = 828px et back.png avec une largeur 414px . Cela signifie cependant que sur chaque iPhone, à l'exception de l'iPhone 6 Plus, vous devrez configurer vos images d'interface utilisateur pour utiliser, par exemple, le mode de contenu d'ajustement de l'aspect et elles seront écrasées, ce n'est donc pas une solution parfaite et ralentirait probablement vraiment l'application si nous utilisons beaucoup de scalling sur les appareils plus anciens.

Alors, quelle serait selon vous la meilleure solution pour résoudre ce problème?

Vous n'êtes pas obligé d'avoir chaque image à toutes les échelles si elle ne sera pas utilisée. Faites uniquement les tailles dont vous avez besoin et nommez-les en fonction de leur largeur. Pour les images portrait pleine largeur de l'appareil, vous avez besoin de 320 pixels de large à 1x et 2x, de 375 px de large à 2x et de 414 px de large à 3x.

4 "appareils utilisaient le suffixe" -568h "pour nommer leurs images de lancement, je recommande donc un schéma de dénomination similaire:

• ImageName-320w (@ 1x et @ 2x)
• ImageName-375w (@ 2x)
• ImageName-414w (@ 3x)

Ensuite, déterminez de quelle image vous avez besoin au moment de l'exécution:

NSNumber *screenWidth = @([UIScreen mainScreen].bounds.size.width);
NSString *imageName = [NSString stringWithFormat:@"name-%@w", screenWidth];
UIImage *image = [UIImage imageNamed:imageName];

Cela pourrait casser si d'autres largeurs sont ajoutées à l'avenir, mais jusqu'à présent, Apple a toujours exigé de reconstruire l'application pour prendre en charge de nouveaux écrans, donc je suppose qu'il est un peu sûr de supposer qu'ils continueront à le faire.

Je vais personnellement faire:

ImageName @ 2x iPhone 4 / 4s
ImageName-568h @ 2x iPhone 5 / 5s
ImageName-667h @ 2x iPhone 6
ImageName-736h @ 3x iPhone 6Plus

La logique derrière cela est qu'il montre une différence entre tous les appareils, alors que la largeur partage la même valeur sur l'iPhone 5s et l'iPhone 4s

Éditer:

C'est juste la convention de dénomination que j'utilise pour les ressources qui dépendent de l'appareil, comme une image d'arrière-plan prenant tout l'écran, la plupart du temps, tout ce que vous voulez est:

ImageName @ 2x iPhone 4 / 4s / 5 / 5s / 6
ImageName @ 3x iPhone 6Plus / Mode zoom

Pour la discussion @ 2x et @ 3x, vous n'avez pas vraiment à vous en soucier. Faites attention à la taille en points de l'écran et assurez-vous qu'il existe @ 2x éléments avec deux fois la taille en points et @ 3x éléments avec trois fois la taille en points en pixels. L'appareil choisira automatiquement le bon. Mais en lisant votre message, je suppose que vous le savez déjà.

Pour les images bord à bord, vous devez malheureusement le faire pour toutes les résolutions d'écran. Ainsi, pour un iPhone portrait, ce serait 320 points, 375 points et 414 points, là où les 414 points devraient être @ 3x. Une meilleure solution peut être de rendre vos images évolutives en configurant le découpage dans le générateur d'interface (si vous utilisez des catalogues d'images, c'est-à-dire). Mais, selon l'image, cela peut être une option ou non, selon que l'image a une partie répétable ou extensible. Les images évolutives configurées comme celle-ci ont très peu d'impact sur les performances.

les @ 2 et @ 3 ne sont pas la mise à l'échelle réelle de l'image, mais représentent seulement la quantité de pixels réels représentant un pixel virtuel à l'écran, une sorte de hdpi / xhdpi / xxhdpi / blabla de l'univers Android. il montre uniquement au système quelle image doit être utilisée pour certains écrans de périphériques.

donc si vous avez besoin d'utiliser l'image entière de l'écran, préparez-la en fonction de la taille réelle de l'écran.

En fonction des graphiques, dans certains cas, cela peut fonctionner correctement lorsque nous utilisons une seule image, par exemple une bannière avec une taille de 414 points de largeur x 100 points de hauteur (la plus grande largeur possible et une hauteur fixe) et la plaçons dans une UIImageView épinglée à le bord gauche et droit de l'écran, a une hauteur fixe de 100 et définit le mode de remplissage d'aspect pour cette UIImageView. Ensuite, sur des appareils plus petits, les côtés gauche et droit de l'image seront coupés et nous ne verrons que la partie centrale de l'image.

J'ai créé une catégorie pour cela:

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

vous pouvez prendre le code complet ici: https://gist.github.com/YGeorge/e0a7fbb479f572b64ba5

Je pense que la meilleure solution pour les images bord à bord ou plein écran, est de se soucier de la taille réelle de l'écran en pixel (pas au point), et vous devez vérifier au moment de l'exécution le modèle de l'appareil et choisir l'image appropriée, c'est-à-dire:

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 ,

il n'y a pas besoin de @? x dans cette situation du demandeur.

Je pense que nous devrions utiliser différentes tailles d'images d'arrière-plan pour différents appareils. Utilisez simplement des images à l'échelle @ 3x pour l'arrière-plan.

Vous pouvez détecter un appareil avec les lignes ci-dessous.

#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)