Comment gérer la taille de l'image sur toutes les résolutions iPhone disponibles?
Quelles tailles utiliser au mieux pour les images: background.png, [email protected] et [email protected] si nous voulons utiliser cette image par exemple pour couvrir toute la largeur et la moitié de la hauteur de l’écran sur toutes les résolutions application portrait iPhone?
Voici ce que nous avons maintenant:
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"
Certaines personnes disent que pour une image bord à bord (comme une bannière en bas de gauche à droite du bord de l'écran) pour iPhone 6 Plus, elles prépareraient [email protected] de largeur 1242 et pour iPhone 6 [email protected] avec largeur 750 pour correspondre à la taille de l'écran iPhone 6 cependant je ne pense pas que ce soit une bonne idée parce que 1242/3 = 414 et 750/2 = 375 les nommant ainsi 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. Par exemple, si [email protected] a une résolution de 30x30, l'[email protected] doit donc avoir une résolution de 20x20 et l'image.png de 10x10. Cela signifie que si nous voulons une image nette et pleine largeur pour chaque écran, nous devrions probablement créer [email protected] avec une largeur de 414 * 3 = 1242px, [email protected] avec une largeur de 414 * 2 = 828px et back.png avec largeur 414px. Toutefois, cela signifie que sur tous les iPhone, à l'exception de l'iPhone 6 Plus, vous devrez configurer vos uiimages pour utiliser, par exemple, le mode de contenu adapté à votre contenu. Elles seront effacées de manière à ce que ce ne soit pas une solution parfaite et ralentirait probablement vraiment l'application si nous utilisons beaucoup de nettoyage sur des appareils plus anciens.
Alors, quelle serait selon vous la meilleure solution pour résoudre ce problème?
Il n'est pas nécessaire d'avoir chaque image sur 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 de largeur totale, vous avez besoin de 320 pixels de large à 1x et 2x, 375 pixels de large à 2x et 414 pixels de large à 3x.
4 "périphériques utilisés" -568h "suffixe pour nommer leurs images de lancement, je recommanderais donc un schéma de nommage similaire:
- ImageName-320w (@ 1x & @ 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 étaient ajoutées à l'avenir, mais jusqu'à présent, Apple a toujours exigé de reconstruire l'application pour prendre en charge de nouveaux écrans. Je suppose qu'il est donc prudent 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 5 et l'iPhone 4.
Modifier:
C’est simplement la convention de dénomination que j’utilise pour les ressources dépendantes du périphérique, comme une image d’arrière-plan prenant tout l’écran.
ImageName @ 2x iPhone 4/4s/5/5s/6
ImageName @ 3x iPhone 6 Plus/Mode zoom
Pour les discussions @ 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 des éléments @ 2x avec une taille deux fois supérieure et des éléments @ 3x avec une taille en pixels trois fois supérieure. L'appareil choisira automatiquement le bon. Mais en lisant votre post, 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 en mode portrait, ce serait 320 points, 375 points et 414 points, où les 414 points devraient être @ 3x. Une meilleure solution consiste peut-être à rendre vos images adaptables en configurant le découpage dans le générateur d'interface (si vous utilisez des catalogues d'images). Mais, en fonction de l'image, cela peut être une option ou non, selon que l'image comporte une partie reproductible ou extensible. Les images évolutives ainsi configurées ont très peu d'impact sur les performances.
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
les @ 2 et @ 3 ne représentent pas la mise à l'échelle réelle de l'image, mais représentent simplement le nombre de pixels réels représentant un pixel virtuel à l'écran, une sorte de hdpi/xhdpi/xxhdpi/blabla de l'univers Android. il montre seulement au système quelle image doit être utilisée pour un écran de périphérique.
par conséquent, si vous devez utiliser une image entière, préparez-la en fonction de la taille réelle de l'écran.
Selon les graphiques, dans certains cas, cela peut fonctionner correctement si vous utilisez une seule image, par exemple une bannière de 414 points de largeur sur 100 points de hauteur (largeur maximale possible et une hauteur fixe) et que vous la placez dans un UIImageView épinglé Les bords gauche et droit de l'écran ont une hauteur fixe 100 et définissent le mode de remplissage d'aspect pour ce UIImageView. Ensuite, sur les petits appareils, les côtés gauche et droit de l'image seront coupés et nous ne verrons que la partie centrale de l'image.
Je pense que la meilleure solution pour Edge to Edge ou les images en plein écran est de se préoccuper de la taille réelle de l’écran en pixel (pas de point), et vous devez vérifier au moment de l’exécution le modèle du périphérique et choisir l’image appropriée i.e
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 des images d’arrière-plan de tailles différentes 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)