Comment développer ou migrer des applications pour la résolution d'écran de l'iPhone 5?

Le nouvel écran de l'iPhone 5 a un nouveau format d'image et une nouvelle résolution (640 x 1136 pixels).

Que faut-il pour développer de nouvelles applications ou faire la transition d'applications déjà existantes vers la nouvelle taille d'écran?

Que devons-nous garder à l'esprit pour rendre les applications "universelles" à la fois pour les anciens écrans et le nouveau rapport largeur / hauteur?

1. Téléchargez et installez la dernière version de Xcode .
2. Définissez un fichier d'écran de lancement pour votre application (dans l'onglet général de vos paramètres cibles). C'est ainsi que vous pouvez utiliser la pleine taille de n'importe quel écran, y compris les tailles de vues fractionnées iPad dans iOS 9.
3. Testez votre application et, espérons-le, ne faites rien d'autre, car tout devrait fonctionner comme par magie si vous aviez correctement défini les masques de redimensionnement automatique ou utilisé la disposition automatique.
4. Si ce n'est pas le cas, ajustez la disposition de votre vue, de préférence avec la disposition automatique.
5. S'il y a quelque chose que vous devez faire pour les écrans plus grands en particulier, il semble que vous devez vérifier la hauteur [[UIScreen mainScreen] bounds]car il ne semble pas y avoir d'API spécifique pour cela. Depuis iOS 8, il existe également des classes de taille qui résument les tailles d'écran en vertical ou compact vertical et horizontal et sont des moyens recommandés pour adapter votre interface utilisateur.

Si vous avez une application conçue pour iPhone 4S ou une version antérieure, elle s'exécutera en boîte aux lettres sur iPhone 5.

Pour adapter votre application au nouvel écran plus grand, la première chose à faire est de changer l'image de lancement en: [email protected]. Sa taille doit être de 1136x640 (HxL). Oui, avoir l'image par défaut dans la nouvelle taille d'écran est la clé pour laisser votre application prendre tout l'écran du nouvel iPhone 5 .

(Notez que la convention de dénomination ne fonctionne que pour l'image par défaut. Nommer une autre image "[email protected]" ne provoquera pas son chargement à la place de "[email protected]". Si vous devez charger des images différentes pour différentes tailles d'écran, vous devrez le faire par programme.)

Si vous êtes très chanceux, c'est peut-être ça ... mais selon toute vraisemblance, vous devrez prendre quelques mesures supplémentaires.

• Assurez-vous que vos Xibs / Vues utilisent la mise en page automatique pour se redimensionner.
• Utilisez des ressorts et des entretoises pour redimensionner les vues.
• Si cela ne suffit pas pour votre application, concevez votre xib / storyboard pour une taille d'écran spécifique et repositionnez-le par programmation pour l'autre.

Dans le cas extrême (lorsque rien de ce qui précède ne suffit), concevez les deux Xib et chargez celui qui convient dans le contrôleur de vue.

Pour détecter la taille de l'écran:

if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
{
    CGSize result = [[UIScreen mainScreen] bounds].size;
    if(result.height == 480)
    {
        // iPhone Classic
    }
    if(result.height == 568)
    {
        // iPhone 5
    }
}

La seule chose vraiment nécessaire à faire est d'ajouter une image de lancement nommée "[email protected]" aux ressources de l'application, et en général, si vous avez la chance, l'application fonctionnera correctement.

Dans le cas où l'application ne gère pas les événements tactiles, assurez-vous que la fenêtre de clé a la bonne taille. La solution consiste à définir le cadre approprié:

[window setFrame:[[UIScreen mainScreen] bounds]]

Il existe d'autres problèmes non liés à la taille de l'écran lors de la migration vers iOS 6. Lisez les notes de publication d'iOS 6.0 pour plus de détails.

Parfois (pour les applications de pré-storyboard), si la mise en page va être suffisamment différente, cela vaut la peine de spécifier un xib différent selon l'appareil (voir cette question - vous devrez modifier le code pour gérer l'iPhone 5) dans le viewController init, car aucune quantité de twiddling avec des masques de redimensionnement automatique ne fonctionnera si vous avez besoin de graphiques différents.

-(id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil

    NSString *myNibName;
    if ([MyDeviceInfoUtility isiPhone5]) myNibName = @"MyNibIP5";
    else myNibName = @"MyNib";

    if ((self = [super initWithNibName:myNibName bundle:nibBundleOrNil])) {


...

Ceci est utile pour les applications qui ciblent les anciennes versions d'iOS.

Ici vous pouvez trouver un joli tutoriel (pour MonoTouch, mais vous pouvez aussi utiliser les informations pour les projets non-MonoTouch):
http://redth.info/get-your-monotouch-apps-ready-for-iphone-5 -ios-6-aujourd'hui /

1. Créez une nouvelle image pour votre écran de démarrage / par défaut ( 640 x 1136 pixels ) avec le nom " [email protected] "

2. Dans le simulateur iOS , accédez au menu Matériel -> Appareil et sélectionnez « iPhone (Retina 4 pouces) »

3. Créez d'autres images, par exemple des images d'arrière-plan

4. Détectez l'iPhone 5 pour charger vos nouvelles images:

public static bool IsTall
{
    get {
        return UIDevice.currentDevice.userInterfaceIdiom
                    == UIUserInterfaceIdiomPhone
                && UIScreen.mainScreen.bounds.size.height
                    * UIScreen.mainScreen.scale >= 1136;
    }
}

private static string tallMagic = "-568h@2x";
public static UIImage FromBundle16x9(string path)
{
    //adopt the -568h@2x naming convention
    if(IsTall())
    {
        var imagePath = Path.GetDirectoryName(path.ToString());
        var imageFile = Path.GetFileNameWithoutExtension(path.ToString());
        var imageExt = Path.GetExtension(path.ToString());
        imageFile = imageFile + tallMagic + imageExt;
        return UIImage.FromFile(Path.Combine(imagePath,imageFile));
    }
    else
    {
        return UIImage.FromBundle(path.ToString());
    }
}

C'est facile pour migrer iPhone5 et iPhone4 via XIBs .........

UIViewController *viewController3;
if ([[UIScreen mainScreen] bounds].size.height == 568)
{
    UIViewController *viewController3 = [[[mainscreenview alloc] initWithNibName:@"iphone5screen" bundle:nil] autorelease];               
}    
else
{
     UIViewController *viewController3 = [[[mainscreenview alloc] initWithNibName:@"iphone4screen" bundle:nil] autorelease];
}

Je résous ce problème ici . Ajoutez simplement ~ 568h @ 2x suffixe aux images et ~ 568h aux xib. Plus besoin de vérifications d'exécution ou de modifications de code.

J'avais ajouté la nouvelle image de lancement par défaut et (en vérifiant plusieurs autres réponses SE ...), je me suis assuré que mes storyboards étaient tous auto-dimensionnés et sous-visés, mais la rétine 4 pouces était toujours en boîte aux lettres.

Ensuite, j'ai remarqué que ma liste d'informations avait un élément de ligne pour " Lancer l'image " défini sur " Default.png ", que j'ai donc supprimé et que la boîte aux lettres par magie n'apparaissait plus. J'espère que cela sauvera quelqu'un d'autre de la même folie que j'ai endurée.

Je suppose que cela ne fonctionnera pas dans tous les cas, mais dans mon projet particulier, cela m'a évité la duplication des fichiers NIB:

Quelque part, common.hvous pouvez faire ces définitions en fonction de la hauteur de l'écran:

#define HEIGHT_IPHONE_5 568
#define IS_IPHONE   ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone)
#define IS_IPHONE_5 ([[UIScreen mainScreen] bounds ].size.height == HEIGHT_IPHONE_5)

Dans votre contrôleur de base:

- (void)viewDidLoad
{
    [super viewDidLoad];
    if (IS_IPHONE_5) {
        CGRect r = self.view.frame;
        r.size.height = HEIGHT_IPHONE_5 - 20;
        self.view.frame = r;
    }
    // now the view is stretched properly and not pushed to the bottom
    // it is pushed to the top instead...

    // other code goes here...
}

Dans un constants.hfichier, vous pouvez ajouter ces instructions de définition:

 #define IS_IPAD UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad 
 #define IS_IPHONE UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone
 #define IS_WIDESCREEN (fabs((double)[[UIScreen mainScreen] bounds].size.height - (double)568) < DBL_EPSILON) 
 #define IS_IPHONE_5 (!IS_IPAD && IS_WIDESCREEN)

Pour déterminer si votre application peut prendre en charge l'iPhone 5 Retina, utilisez ceci: (Cela pourrait être plus robuste pour renvoyer le type d'affichage, 4S Retina, etc., mais comme il est écrit ci-dessous, il revient simplement si l'iPhone prend en charge iOS5 Retina en tant que Oui ou non)

Dans un fichier ".h" commun, ajoutez:

BOOL IS_IPHONE5_RETINA(void);

Dans un fichier ".m" commun, ajoutez:

BOOL IS_IPHONE5_RETINA(void) {
    BOOL isiPhone5Retina = NO;
    if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
        if ([UIScreen mainScreen].scale == 2.0f) {
            CGSize result = [[UIScreen mainScreen] bounds].size;
            CGFloat scale = [UIScreen mainScreen].scale;
            result = CGSizeMake(result.width * scale, result.height * scale);

            if(result.height == 960){
                //NSLog(@"iPhone 4, 4s Retina Resolution");
            }
            if(result.height == 1136){
                //NSLog(@"iPhone 5 Resolution");
                isiPhone5Retina = YES;
            }
        } else {
            //NSLog(@"iPhone Standard Resolution");
        }
    }
    return isiPhone5Retina;
}

Tout d'abord, créez deux xibs et attachez tous les délégués, la classe principale à la xibpuis vous pouvez mettre dans cette condition mentionnée ci-dessous dans votre appdelegate.mfichier dans

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 

    if ([[UIScreen mainScreen] bounds].size.height == 568)
        {

        self.ViewController = [[ViewController alloc] initWithNibName:@"ViewControlleriphone5" bundle:nil];
        }

        else
        {
             self.ViewController = [[ViewController alloc] initWithNibName:@"ViewControlleriphone4" bundle:nil];

        }

vous pouvez l'utiliser n'importe où dans le programme en fonction de vos besoins, même dans vos ViewControllercours. Ce qui importe le plus, c'est que vous avez créé deux xibfichiers séparés pouriphone 4(320*480) and iphone 5(320*568)

Essayez la méthode ci-dessous dans une classe singleton:

-(NSString *)typeOfDevice
    {
        if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
        {
            CGSize result = [[UIScreen mainScreen] bounds].size;
            if(result.height == 480)
            {
                return @"Iphone";
            }
            if(result.height == 568)
            {
                return @"Iphone 5";
            }
        }
        else{
            return @"Ipad";;
        }


        return @"Iphone";
    }

Vous pouvez utiliser la Auto Layoutfonction et créer le design en utilisant la résolution d'écran de l'iPhone 5 et cela fonctionnera pour les appareils 4 "et 3,5", mais dans ce cas, vous devriez avoir une connaissance suffisante du gestionnaire de disposition.

La vérification boundsavec 568échouera en mode paysage. L'iPhone 5 ne se lance qu'en mode portrait, mais si vous souhaitez prendre en charge les rotations, l'iPhone 5 "check" devra également gérer ce scénario.

Voici une macro qui gère l'état d'orientation:

#define IS_IPHONE_5 (CGSizeEqualToSize([[UIScreen mainScreen] preferredMode].size, CGSizeMake(640, 1136)))

L'utilisation de l'appel «PreferredMode» provient d'une autre publication que j'ai lue il y a quelques heures, donc je n'ai pas eu cette idée.

Montrez d'abord cette image. Dans cette image, vous voyez un avertissement pour la prise en charge de Retina 4, cliquez sur cet avertissement et cliquez sur ajouter pour que votre écran de démarrage Retina 4 s'ajoute automatiquement à votre projet.

et après avoir utilisé ce code:

if([[UIScreen mainScreen] bounds].size.height == 568)
    {
        // For iphone 5
    }
    else
    {
        // For iphone 4 or less
    }

Je n'ai jamais rencontré un tel problème avec n'importe quel appareil car j'ai eu une base de code pour tous, sans aucune valeur codée en dur. Ce que je fais, c'est d'avoir l'image de taille maximale en tant que ressource au lieu d'une pour chaque appareil. Par exemple, j'en aurais un pour l'affichage de la rétine et le montrerais comme un aspect approprié pour que ce soit des vues telles quelles sur tous les appareils. Venir à décider du cadre du bouton, par exemple, au moment de l'exécution. Pour cela, j'utilise la valeur% de la vue brevet, par exemple, si je veux que la largeur soit la moitié de la vue parent, prenez 50% du parent et la même chose s'applique pour la hauteur et le centre.

Avec cela, je n'ai même pas besoin des xibs.

Vous pouvez utiliser cette définition pour calculer si vous utilisez l'iPhone 5 en fonction de la taille de l'écran:

#define IS_IPHONE_5 ( fabs( ( double )[ [ UIScreen mainScreen ] bounds ].size.height - ( double )568 ) < DBL_EPSILON )

puis utilisez une simple ifdéclaration:

    if (IS_IPHONE_5) {

    // What ever changes
    }

Peter, vous devriez vraiment jeter un œil à Canappi, il fait tout cela pour vous, tout ce que vous avez à faire est de spécifier la mise en page en tant que telle:

button mySubmitButton 'Sumbit' (100,100,100,30 + 0,88,0,0) { ... }

À partir de là, Canappi générera le code objectif-c correct qui détecte l'appareil sur lequel l'application s'exécute et utilisera:

(100,100,100,30) for iPhone4
(100,**188**,100,30) for iPhone 5

Canappi fonctionne comme Interface Builder et Story Board combinés, sauf qu'il est sous forme textuelle. Si vous avez déjà des fichiers XIB, vous pouvez les convertir pour ne pas avoir à recréer l'intégralité de l'interface utilisateur à partir de zéro.

Vous pouvez vérifier manuellement la taille de l'écran pour déterminer sur quel appareil vous vous trouvez:

#define DEVICE_IS_IPHONE5 ([[UIScreen mainScreen] bounds].size.height == 568)

float height = DEVICE_IS_IPHONE5?568:480;
if (height == 568) {
    // 4"

} else {

    // 3"

}

Vous pouvez ajouter ce code:

if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone){
        if ([[UIScreen mainScreen] respondsToSelector: @selector(scale)]) {
            CGSize result = [[UIScreen mainScreen] bounds].size;
            CGFloat scale = [UIScreen mainScreen].scale;
            result = CGSizeMake(result.width * scale, result.height * scale);

            if(result.height == 960) {
                NSLog(@"iPhone 4 Resolution");
            }
            if(result.height == 1136) {
              NSLog(@"iPhone 5 Resolution");
            }
        }
        else{
            NSLog(@"Standard Resolution");
        }
    }

Ceci est un vrai code universel, vous pouvez créer 3 story-board différents:

Définissez votre projet en mode universel et définissez votre histoire principale iPhone avec le storyboard iPhone5 et l'ipad principal avec l'iPad storyboard cible, ajoutez maintenant une nouvelle cible de storyboard pour l'iphone et modifiez la résolution pour l'iphone 4s ou moins maintenant implémentez votre AppDelegate.m

iPhone4 / 4s (c'est la même chose pour 3 / 3Gs) un pour iPhone5 et rendre le projet universel , avec une nouvelle cible Storyboard pour iPad, maintenant dans AppDelegate.m sous l' didFinishLaunchingajout de ce code:

    if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone){
        UIStoryboard *storyBoard;

        CGSize result = [[UIScreen mainScreen] bounds].size;
        CGFloat scale = [UIScreen mainScreen].scale;
        result = CGSizeMake(result.width *scale, result.height *scale);

//----------------HERE WE SETUP FOR IPHONE4/4s/iPod----------------------

        if(result.height == 960){
            storyBoard = [UIStoryboard storyboardWithName:@"iPhone4_Storyboard" bundle:nil];
            UIViewController *initViewController = [storyBoard instantiateInitialViewController];
            [self.window setRootViewController:initViewController];
        }

//----------------HERE WE SETUP FOR IPHONE3/3s/iPod----------------------

        if(result.height == 480){
            storyBoard = [UIStoryboard storyboardWithName:@"iPhone4_Storyboard" bundle:nil];
            UIViewController *initViewController = [storyBoard instantiateInitialViewController];
            [self.window setRootViewController:initViewController];
        }
    }

        return YES;
 }

Vous avez donc créé une application universelle pour iPhone 3 / 3Gs / 4 / 4s / 5 All gen of iPod, and All type of iPad

N'oubliez pas d'intégrer tous les IMG avec myImage.pnget[email protected]

Selon moi, la meilleure façon de traiter de tels problèmes et d'éviter quelques conditions requises pour vérifier la hauteur de l'appareil, est d'utiliser le cadre relatif pour les vues ou tout élément d'interface utilisateur que vous ajoutez à vous par exemple: si vous ajoutez certains éléments d'interface utilisateur que vous voulez devraient en bas de la vue ou juste au-dessus de la barre d'onglets, vous devez prendre l'origine y par rapport à la hauteur de votre vue ou par rapport à la barre d'onglets (le cas échéant) et nous avons également une propriété de redimensionnement automatique. J'espère que cela fonctionnera pour vous

Plutôt que d'utiliser un ensemble de conditions, vous pouvez redimensionner automatiquement votre vue en utilisant la taille de l'écran.

int h = [[UIScreen mainScreen] bounds].size.height;
int w = [[UIScreen mainScreen] bounds].size.width;
self.imageView.frame = CGRectMake(20, 80, (h-200), (w-100));

Dans mon cas, je veux une vue qui remplisse l'espace entre certains champs de saisie en haut et certains boutons en bas, donc coin supérieur gauche fixe et variable en bas à droite en fonction de la taille de l'écran. Mon application remplit la vue d'image avec la photo prise par l'appareil photo, donc je veux tout l'espace que je peux obtenir.

Si vous devez convertir une application déjà existante en universelle, vous devez sélectionner le fichier xib correspondant-> afficher les utilitaires-> Afficher l'inspecteur de taille.

Dans l'inspecteur de taille, vous pouvez voir le redimensionnement automatique, en utilisant cet outil, vous pouvez convertir en application iOS existante.

À l'aide de xCode 5, sélectionnez «Migrer vers le catalogue d'actifs» dans Projet> Général.

Ensuite, utilisez "Afficher dans le Finder" pour trouver votre image de lancement, vous pouvez la modifier fictivement en 640x1136, puis la faire glisser dans le catalogue d'actifs comme indiqué dans l'image ci-dessous.

Assurez-vous que la section iOS7 et iOS6 R4 a une image de 640x1136. La prochaine fois que vous lancerez l'application, les barres noires disparaîtront et votre application utilisera un écran de 4 pouces

Remarque: dans le nouveau Xcode, vous devez ajouter ce fichier image [email protected] aux ressources

Utilisez le Auto Layout fonction pour les vues. Il s'adaptera automatiquement à toutes les résolutions.

Créez deux xibs pour un contrôleur ayant un nom de contrôleur avec le suffixe ~ iphone ou ~ ipad. Au moment de la compilation, Xcode prendra le bon xib en fonction de l'appareil.

Utilisez des classes de taille, si vous souhaitez créer un seul xib pour iPhone et iPad, si la vue est suffisamment simple pour être portée sur iPhone et iPad.

Il y a un léger problème lors des tests sur les appareils iOS et iOS Simulator. Il semble que le simulateur (XCode 6.0.1) donne des valeurs commutées pour la largeur et la hauteur dans[[UIScreen mainScreen] bounds].size fonction de l'orientation de l'appareil.

Cela peut donc être un problème lors de la détermination de la bonne taille d'écran physique. Ce code permet également de distinguer tous les 2014. Générations de modèles d'iPhone:

• iphone 4s
• iPhone5 (et iPhone5s)
• iPhone6 ​​(et iPhone6 ​​+)

Il peut également être facilement modifié pour faire la distinction, par exemple, entre iPhone6 ​​et iPhone6 ​​+.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    CGSize iOSDeviceScreenSize = [[UIScreen mainScreen] bounds].size;

    if ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPhone)
    {
        if (iOSDeviceScreenSize.width > 568 || // for iOS devices
            iOSDeviceScreenSize.height > 568) // for iOS simulator
        {   // iPhone 6 and iPhone 6+

            // Instantiate a new storyboard object using the storyboard file named Storyboard_iPhone6
            storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard_iPhone6" bundle:nil];

            NSLog(@"loaded iPhone6 Storyboard");
        }
        else if (iOSDeviceScreenSize.width == 568 || // for iOS devices
                 iOSDeviceScreenSize.height == 568) // for iOS simulator
        {   // iPhone 5 and iPod Touch 5th generation: 4 inch screen (diagonally measured)

            // Instantiate a new storyboard object using the storyboard file named Storyboard_iPhone5
            storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard_iPhone5" bundle:nil];

            NSLog(@"loaded iPhone5 Storyboard");
        }
        else
        {   // iPhone 3GS, 4, and 4S and iPod Touch 3rd and 4th generation: 3.5 inch screen (diagonally measured)

                // Instantiate a new storyboard object using the storyboard file named Storyboard_iPhone4
            storyboard = [UIStoryboard story    boardWithName:@"MainStoryboard_iPhone" bundle:nil];

                NSLog(@"loaded iPhone4 Storyboard");
        }
    }
    else if ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPad)
    {   // The iOS device = iPad

        storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard_iPadnew" bundle:nil];

        NSLog(@"loaded iPad Storyboard");
    }

    // rest my code
}

Je suggérerais d'utiliser le masque de redimensionnement automatique dans vos applications en fonction de votre interface utilisateur, cela permet d'économiser beaucoup de problèmes et est mieux que de créer une interface utilisateur différente pour les écrans iPhone 4 et 5.