Maintenant que nous avons parcouru la plupart des éléments d’interface, que diriez-vous de passer à la pratique et ajouter un fond d’écran à notre application iPhone HelloiPuP ?
Tout d’abord, il vous faut trouver une image, de préférence avec ces dimensions : 320 × 460 pixels. Ensuite, glissez-la dans Xcode directement, dans le dossier Resources, et cochez la case Copy items into destination group’s folder. Pour créer le dossier Resources : Clic droit puis New group.
À défaut de trouver une image qui va, vous pouvez prendre celle-ci : Fond d’écran.
Figure 1 : Cochez pour copier l’image dans le projet
Pour afficher l’image en fond dans votre application, il faut passer par une UIImageView. Pour vous guider, nous allons examiner les deux méthodes : par le code, ou en utilisant Interface Builder. Faites une copie de votre projet, afin d’avoir un projet par méthode.
Ajouter l’image par le code
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions{[helloLabel setText:@"Hello iPuP"];// équivalent : helloLabel.text = @"Hello iPuP";CGRect imageFrame = [[UIScreen mainScreen] applicationFrame];UIImageView *backgroundImageView = [[UIImageView alloc] initWithFrame:imageFrame]; // 6[backgroundImageView setImage:[UIImage imageNamed:@"fond-iphoneup-pouriphone-v2-1.png"]];[self.window addSubview:backgroundImageView]; // 7[backgroundImageView release]; // 8[self.window makeKeyAndVisible];return YES;}
En 6, on alloue l’image view qui fera la taille de l’écran. Son retain count vaut 1.
En 7, en ajoutant l’image view à la fenêtre (en la mettant sur la pile des vues), vous la placez implicitement dans un tableau (NSArray) de vues (accessible avec [window subviews]; ).
Ainsi, c’est ce tableau qui va gérer la mémoire de l’objet placé (augmentation du retain count de l’objet placé dans le tableau de 1). Ici, à la fin de l’instruction, le retain count de backgroundImageView vaut donc 2.
En 8, puisque l’on souhaite toujours ramener les retain count des objets à 1, il faut release backgroundImageView (décrémenter son retain count de 1). Retain count de backgroundImageView vaut maintenant 1.
Lancez ainsi l’application. Vous remarquerez que l’on n’aperçoit plus le label. Ce qui est normal, car rappelez-vous, les vues sont empilées !
Lorsque l’application s’exécute, le fichier window.xib va être décodé (c’est un fichier XML). Les éléments d’interface placés à l’aide d’Interface Builder vont être positionnés. Ainsi, le label est placé par-dessus la vue.
Ensuite, la méthode applicationDidFinishLaunching de l’application delegate va être appelée. Dans cette méthode, nous allouons une UIImageView que nous plaçons sur la pile des vues, au-dessus ! Notre image cache donc notre label… Pour y remédier, plusieurs solutions :
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions{[helloLabel setText:@"Hello iPuP"];// équivalent : helloLabel.text = @"Hello iPuP";CGRect imageFrame = [[UIScreen mainScreen] applicationFrame];UIImageView *backgroundImageView = [[UIImageView alloc] initWithFrame:imageFrame];[backgroundImageView setImage:[UIImage imageNamed:@"fond-iphoneup-pouriphone-v2-1.png"]];// Solution 1 :[self.window addSubview:backgroundImageView];[self.window sendSubviewToBack:backgroundImageView];// Solution 2 ://[self.window insertSubview:backgroundImageView atIndex:0];// Solution 3 ://[self.window insertSubview:backgroundImageView belowSubview:helloLabel];[backgroundImageView release];[self.window makeKeyAndVisible];return YES;}
La première solution consiste à ajouter l’image view à la pile, puis l’envoyer tout en dessous de la pile.
La deuxième solution vous permet de choisir l’index où ajouter la vue (la position dans la pile de vues, 0 étant le plus bas).
La troisième solution insère la vue sous le label directement.
En relançant votre application, votre label apparaît enfin ! Mais il n’est pas très visible en noir… Qu’à cela ne tienne, changeons la couleur du texte en blanc !
[helloLabel setText:@"Hello iPuP"];// équivalent : helloLabel.text = @"Hello iPuP";[helloLabel setTextColor:[UIColor whiteColor]];
Vous pouvez très facilement choisir parmi des couleurs prédéfinies, comme whiteColor, blackColor, blueColor, grayColor, yellowColor… Vous pouvez également avoir un contrôle plus fin sur la couleur :
[helloLabel setTextColor:[UIColor colorWithRed:12.0/255.0 green:100.0/255.0 blue:200.0/255.0 alpha:1.0]];
Figure 2 : Le label en blanc …
Ajouter l’image avec Interface Builder
Pour ajouter l’image de fond avec Interface Builder, faire comme suit :
1. Repartir du projet que vous aviez lorsque vous avez commencé ce tutoriel.
2. Ouvrir MainWindow.xib et glisser-déposer une UIImageView sur la window. Dans l’onglet Frame de l’image view ainsi déposée, remplir comme à la Figure 3.
3. Cliquer dans l’Inspecteur sur l’onglet Attributes et choisir l’image (voir Figure 4).
Il faut maintenant repositionner correctement l’image view dans la pile des vues. Pour cela, déplacer l’image view depuis l’onglet en la glissant-déposant au-dessus du label, toujours dans le même onglet (Figure 5).
Figure 5 : Repositionner l’image view
Enfin, pour changer la couleur du texte du label, cliquez dessus. Ensuite, dans l’Inspecteur > onglet
Attributes mettre la couleur du texte en blanc (voir Figure 6).
Figure 6 : Changer la couleur du texte
Et voilà !
Les sources !!
À bientôt
iPodishima