iOS: Préparation des images de fond pour les applications
La plupart des applications iOS ont une vue avec une image en arrière-plan. Existe-t-il un guide de dimensionnement d'image? Par exemple, voici un écran iOS conçu dans Sketch:
Comme vous pouvez le voir, il y a une image de fond. Il existe maintenant de nombreux périphériques Apple que chaque application devrait prendre en charge. Le nouvel iOS 10 prend en charge tous les appareils de l'iPhone 5 à l'iPhone 6s Plus. Ils ont différentes tailles d'écran et résolutions. Lors de la création d'actifs Xcode, je fournis 3 images d'arrière-plan de tailles différentes: @1x, @2x, @3x. Quelles tailles devraient-ils être?
La façon dont je vois les choses, vous avez 2 options:
- Dans ici vous trouverez les résolutions de l'iPhone:
- Vous n'avez pas besoin de l'image @ 1 puisque vous ne prenez pas en charge l'iPhone 4 et 4s (iOS 10).
- @ 2 correspond à l'iPhone 5,5c, 5S, 6 et 6s. Vous pouvez donc créer une image @ 2 de la plus haute résolution, celle de l'iPhone 6, qui fonctionnera bien pour la famille des iPhone 5.
- Vous pouvez également créer une image avec une résolution pour chaque iPhone et utiliser une logique codée en dur pour définir l’image pour le téléphone each. i.e:
if iphone5c { setImage("iphone5cImage") }etc etc ..
- La solution la plus simple consiste à créer 1 image avec la résolution la plus élevée. Le @ 3 est le plus élevé pour l'iPhone 6S + et il aura l'air incroyable pour le reste. N'oubliez pas de définir la vue de l'image comme aspect/remplissage.
De plus, n'oubliez pas de vérifier this thread: Comment gérer l’échelle des images sur toutes les résolutions disponibles de l’iPhone? Cela vous donnera des indices sur la nature exacte de vos problèmes. TL; DR, ce sont les options que j'ai écrites.
Les images de fond que vous devez seulement donner sont @ 2x et @ 3x, car les appareils @ 1x ont depuis longtemps disparu des pages poussiéreuses de l’histoire.
En parlant de @ 2x et @ 3x, les résolutions d'image que vous donnez au développeur doivent être identiques à celles de l'iPhone ayant la résolution la plus élevée et utilisant cette taille.
Pour
@2x, il s’agit de l’iPhone 6, qui est750x1334, et pour@3x, de l’iPhone 6+, qui est1242x2208.
La réduction d'échelle ne devrait pas poser de problème, car les formats d'image de tous les iPhones prenant en charge iOS 10 sont identiques (16: 9).
Note pour le (s) développeur (s):
The UIImageView will then down-scale the images appropriately,
provided:
1. you created an image set with the provided @2x and @3x images,
2. correctly constrainted the UIImageView to the edges of the superview, and
3. selected the Content Mode of the UIImageView as Scale to Fill or Aspect Fill.
Jetez un coup d'œil à la page sur la documentation. Il y a des images d'écran de lancement statiques, et vous pouvez en saisir la taille à partir de là.
Vous pouvez obtenir une taille d’écran d’appareil en utilisant
CGSize screenSize = [UIScreen mainScreen].bounds.size // (Objective-C)
let screenSize: CGSize = UIScreen.mainScreen().bounds.size // (Swift)
Et après que vous puissiez sélectionner par programme une image que vous voulez, à partir d'un ensemble d'images de l'ensemble. Ou pour créer une grande image à redimensionner, en utilisant les connaissances de la documentation et pour redimensionner une image en conséquence. Ou ... ton choix.
Différentes "tailles" @ 2x, @ 3x est échelle . Et voici l'explication de Nice.
Il existe des nuances dans la conception des images d’arrière-plan en taille réelle. Dans la plupart des cas, si l’aspect de l’échelle est suffisant pour différentes tailles, vous devez concevoir uniquement la taille de périphérique la plus grande après celle du reste. Pour conserver une impression de mémoire faible dans de petits ensembles de périphériques, vous devez créer des alternatives plus petites.
Lorsque vous prenez une décision en fonction de la taille de conception de l’actif, vous devez créer des variantes @ 3x, @ 2x.
Une dernière chose que je dois signaler au sujet des dessins vectoriels. Si votre dessin est conçu uniquement à l’aide de vecteurs, vous pouvez choisir d’exporter au format PDF. Storyboard peut accepter les ressources vectorielles.
J'utilise des images d'arrière-plan dans mes applications. Pour résoudre ce problème, j'utilise une image qui a la résolution de couvrir tous les iPhones et tous les iPad, à l'exception du grand. La taille de l'image est 2048x2048 points ou 1024x1024 pixels at @2x pour couvrir l'iPad de 9,7 pouces.
L'image est compressée en JPG pour réduire la taille. Notez que je le laisse évoluer pour iPhone 6 Pluse (@ 3x) et iPad Pro 12,7 pouces (@ 2x) car la qualité ne semble pas être affectée . Je peux justifier la mise à l'échelle pour les plus gros appareils, car J'ai fourni une image pour l'iPad Pro 12,7 pouces, il s'agira de 5464x4096 points (@ 2x) et de 2732x2048 pixels, puis la compression JPG devrait être si élevée (si je voulais réduire la taille), que la qualité de l'image était faible de toute façon comparé à la mise à l'échelle.
Si vous avez besoin de haute qualité, essayez de comparer les formats JPG et PNG, car le format PNG est très volumineux pour les images complexes, mais offre la meilleure qualité.
Il existe 3 types de périphériques Apple (iPhone et iPad):
Appareil normal dont le terme correspond à 1 pixel = 1 point @ 1x (anciens appareils iPhone et iPad)
Dispositif Retina dont le nombre correspond à 4 pixels (2 x 2) = 1 point @ 2x (iPhone 5+)
Retina iPhone6 et iPad qui correspond à 9 pixels (3 x 3) = 1 point @ 3x (iPhone6 +)
Pour les iOs 10 qui ne prendront pas en charge l'iPhone 4, vous devez uniquement utiliser des images @ 2x et @ 3x.
Comme vous pouvez le voir ci-dessus, l'iPhone 6 prend également en charge @ 2x Scale; utilisez donc la taille de l'image pour @ 2x = 750 * 1334 et pour @ 3x = 1242 * 2208 en mode image.
Si vous avez toujours le même problème, vous pouvez essayer celui-ci. Pour cela, vous devez ajouter une seule image avec une bonne résolution et sous le code.
UIImage *bgImage = [UIImage imageNamed:@"[email protected]"];
CGSize screenSize = [UIScreen mainScreen].bounds.size;
UIGraphicsBeginImageContextWithOptions(screenSize, NO, 0.f);
[bgImage drawInRect:CGRectMake(0.f, 0.f, screenSize.width, screenSize.height)];
UIImage * resultImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIColor *backgroundColor = [UIColor colorWithPatternImage:resultImage];
self.view.backgroundColor = backgroundColor;