• 20 heures
  • {0} Facile|{1} Moyenne|{2} Difficile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

J'ai tout compris !

Mis à jour le 21/06/2013

Insertion de contrôles avec le code

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Pour insérer des contrôles dans une vue, la solution la plus immédiate consiste à utiliser Interface Builder. Si vous vous sentez l'âme codeuse, cette section devrait vous intéresser puisque nous allons voir comment insérer des contrôles dans une vue en utilisant le langage Objective-C.

Les techniques exposées dans ce chapitre ont un autre avantage : elles permettent d'ajouter des contrôles pendant l'exécution de l'application. Cela peut s'avérer utile si vous devez créer une application qui s'adapte à son heure d'exécution, à la vitesse du device, ou à je ne sais quelle autre variable qu'il n'est pas possible de prévoir dans le storyboard.

Dans un premier temps, je vais vous donner un code complet, que vous pourrez copier grâce à un code web. Dans un second temps, je vais vous expliquer ce code. Il n'y aura rien de compliqué, rassurez-vous.

Le code complet

Définissez un nouveau projet basé sur le modèle Single View Application et donnez-lui le nom « defControles ». Cliquez sur defControlesViewController.m dans le volet de navigation et complétez la méthode viewDidLoad comme suit :

- (void)viewDidLoad
{
[super viewDidLoad];
//Ajout d'un Label
CGRect rectLab = CGRectMake(10,10,100,20); // Définition d'un rectangle
UILabel *monLabel = [[UILabel alloc] initWithFrame: rectLab];
monLabel.text = @"Ceci est un label";
[self.view addSubview: monLabel];
//Ajout d'un Round Rect Button
UIButton *monBouton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
monBouton.frame = CGRectMake(10,40,100,20);
[monBouton setTitle:@"Un bouton" forState:UIControlStateNormal];
[self.view addSubview: monBouton];
//Ajout d'un Text Field
CGRect rectTF = CGRectMake(10,70,100,20); // Définition d'un rectangle
UITextField *monChampTexte = [[UITextField alloc] initWithFrame:rectTF];
monChampTexte.borderStyle = UITextBorderStyleLine;
[self.view addSubview: monChampTexte];
//Ajout d'un rectangle rouge
CGRect rectangle = CGRectMake(10,100,100,100); // Définition d'un rectangle
UIView *subview = [[UIView alloc] initWithFrame:rectangle]; // Ajout de la vue correspondante
subview.backgroundColor = [UIColor redColor];
[self.view addSubview:subview];
//Ajout d'un Image View
UIImage *img = [UIImage imageWithContentsOfFile: [[NSBundle mainBundle] pathForResource:@"petitchat" ofType:@"jpg"]];
CGRect cropRect = CGRectMake(0, 0, 160, 240);
CGImageRef imageRef = CGImageCreateWithImageInRect([img CGImage], cropRect);
UIImageView *monImage = [[UIImageView alloc] initWithFrame:CGRectMake(150, 10, 160, 240)];
monImage.image = [UIImage imageWithCGImage:imageRef];
[self.view addSubview:monImage];
CGImageRelease(imageRef);
}

Pour terminer, définissez le groupe « Resources » dans l'arborescence de l'application et ajoutez-y une image de 160~x~240 pixels que vous nommerez « petitchat.jpg ». L'image que j'ai utilisée se trouve à la figure suivante.

« petitchat.jpg  »

Nous n'avons pas fait appel à Interface Builder et pourtant…
Lancez l'application en cliquant sur l'icône Run. L'application représentée à la figure suivante se lance.

Cette application a été créée uniquement avec du code

Intéressant, non ?

Dans la suite de ce chapitre, je vais vous montrer ce qui se cache dans le code et pourquoi plusieurs contrôles apparaissent dans la vue de l'application. Le code est clairement découpé en plusieurs blocs indépendants. Chacun d'entre eux est responsable de l'affichage d'un contrôle dans la vue.

Affichage d'un label

Je pense qu'arrivés à ce stade, vous savez tous à quoi ressemble un Label. Eh bien voici le code responsable de la définition et de l'affichage d'un Label :

CGRect rectLab = CGRectMake(10,10,200,20);
UILabel *monLabel = [[UILabel alloc] initWithFrame: rectLab];
monLabel.text = @"Ceci est un label";
[self.view addSubview: monLabel];

Avant de définir le Label, il est nécessaire de choisir son emplacement (10, 10) et ses dimensions (200,20). Ceci se fait en créant une structure de type CGRect :

CGRect rectLab = CGRectMake(10,10,200,20);

Mais à quoi correspondent ces nombres ?

Le premier nombre correspond à l'abscisse du coin supérieur gauche du contrôle, le deuxième à l'ordonnée du coin supérieur gauche du contrôle, le troisième à la largeur du contrôle et le quatrième à la hauteur du contrôle. Regardez la figure suivante, vous devriez comprendre.

Correspondance des valeurs définies dans le code

Le Label peut maintenant être défini. Nous lui donnons le nom rectLab et nous utilisons les coordonnées précisées dans la structure rectLab pour le positionner et le dimensionner :

UILabel *monLabel = [[UILabel alloc] initWithFrame: rectLab];

Le texte affiché dans le Label est défini avec la propriété text :

monLabel.text = @"Ceci est un label";

Il ne reste plus qu'à ajouter le label (addSubView: monLabel) à la vue courante (self.view) pour provoquer son affichage :

[self.view addSubview: monLabel];
Affichage de la documentation d'Apple

La fenêtre d'aide donne de très nombreuses informations. En particulier, elle liste les propriétés de la classe et leurs modes d'accès.

Affichage d'un Round Rect Button

Un Round Rect Button ressemble à la figure suivante.

Un Round Rect Button

Et voici le code responsable de la définition et de l'affichage du Round Rect Button :

UIButton *monBouton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
monBouton.frame = CGRectMake(10,40,100,20);
[monBouton setTitle:@"Un bouton" forState:UIControlStateNormal];
[self.view addSubview: monBouton];

Dans un premier temps, l'objet UIButton monBouton est instancié :

UIButton *monBouton = [UIButton buttonWithType:UIButtonTypeRoundedRect];

Son emplacement (10, 40) et sa taille (100, 20) sont alors définis, comme précédemment pour le Label.

monBouton.frame = CGRectMake(10,40,100,20);

Le texte affiché dans le bouton à l'état « normal » (c'est-à-dire non pressé et non désactivé) est alors défini :

[monBouton setTitle:@"Un bouton" forState:UIControlStateNormal];

Puis le bouton est ajouté à la vue :

[self.view addSubview: monBouton];

Plusieurs autres propriétés, telles que le type du bouton, la couleur du texte, l'image affichée dans le bouton, etc. sont accessibles dans le code. Vous en saurez plus en consultant la documentation Apple sur la classe UIButton.

Affichage d'un Text Field

Un Text Field ressemble à la figure suivante.

Un Text Field

Et voici le code responsable de la définition et de l'affichage de ce Text Field :

CGRect rectTF = CGRectMake(10,70,100,20); // Définition d'un rectangle
UITextField *monChampTexte = [[UITextField alloc] initWithFrame:rectTF];
monChampTexte.borderStyle = UITextBorderStyleLine;
[self.view addSubview: monChampTexte];

Dans un premier temps, la position (10, 70) et les dimensions (100, 20) de la zone de texte sont définies dans une structure CGRect :

CGRect rectTF = CGRectMake(10,70,100,20);

La zone de texte est alors instanciée :

UITextField *monChampTexte = [[UITextField alloc] initWithFrame:rectTF];

Pour qu'elle soit bien visible, on lui affecte une bordure :

monChampTexte.borderStyle = UITextBorderStyleLine;

Puis la zone de texte est ajoutée à la vue :

[self.view addSubview: monChampTexte];

Consultez la documentation Apple pour savoir quelles propriétés sont accessibles pour les contrôles UITextField.

Affichage d'un rectangle de couleur rouge

Voici le code qui permet de définir et d'afficher un rectangle (En l'occurrence, il s'agit d'un carré, mais ne chipotons pas.) de couleur rouge :

CGRect rectangle = CGRectMake(10,100,100,100); // Définition d'un rectangle
UIView *subview = [[UIView alloc] initWithFrame:rectangle]; // Ajout de la vue correspondante
subview.backgroundColor = [UIColor redColor];
[self.view addSubview:subview];

Dans un premier temps, la position (10, 100) et les dimensions (100, 100) du rectangle sont définies dans une structure CGRect :

CGRect rectangle = CGRectMake(10,100,100,100);

L'instruction suivante instancie un objet UIView dont les dimensions ont été spécifiées dans le CGRect rectangle :

UIView *subview = [[UIView alloc] initWithFrame:rectangle];

Pour que le rectangle soit bien visible dans la vue, nous lui affectons une couleur d'arrière-plan rouge en initialisant sa propriété backgroundColor :

subview.backgroundColor = [UIColor redColor];

Il ne reste plus qu'à ajouter le rectangle à la vue courante :

[self.view addSubview:subview];

Encore une fois, je vous invite à consulter la documentation Apple sur la classe UIView pour prendre connaissance des propriétés et méthodes utilisables.

Affichage d'une image

Voici le code permettant la définition et l'affichage d'une image :

UIImage *img = [UIImage imageWithContentsOfFile: [[NSBundle mainBundle] pathForResource:@"petitchat" ofType:@"jpg"]];
CGRect cropRect = CGRectMake(0, 0, 160, 240);
CGImageRef imageRef = CGImageCreateWithImageInRect([img CGImage], cropRect);
UIImageView *monImage = [[UIImageView alloc] initWithFrame:CGRectMake(150, 10, 160, 240)];
monImage.image = [UIImage imageWithCGImage:imageRef];
[self.view addSubview:monImage];
CGImageRelease(imageRef);

Le code utilisé pour afficher une image est légèrement plus complexe que les précédents. Ceci est dû au fait que l'affichage d'une image nécessite un plus grand nombre d'étapes.

  1. Création d'un objet UIImage, puis stockage de l'image dans cet objet.

  2. Définition d'un objet UIImageView.

  3. Définition d'une structure CGImageRef pour regrouper les informations relatives à l'image.

  4. Affectation de l'objet CGImageRef à l'UIImageView.

  5. Ajout de l'Image View à la vue courante.

La première instruction définit l'objet UIImage img et l'initialise avec l'image « petitchat.jpg » :

UIImage *img = [UIImage imageWithContentsOfFile: [[NSBundle mainBundle] pathForResource:@"petitchat" ofType:@"jpg"]];

Pour afficher une image, vous devez utiliser un Image View. L'instruction suivante définit l'objet UIImageView monImage, ainsi que sa position (150, 10) et ses dimensions (160, 240) :

UIImageView *monImage = [[UIImageView alloc] initWithFrame:CGRectMake(150, 10, 160, 240)];

Pour initialiser l'objet Image View qui vient d'être instancié, vous devez définir ses dimensions dans une structure CGRect :

CGRect cropRect = CGRectMake(0, 0, 160, 240);

Puis utiliser ces dimensions et l'objet UIImage précédemment créé pour définir une structure CGImageRef :

CGImageRef imageRef = CGImageCreateWithImageInRect([img CGImage], cropRect);

Il ne reste plus qu'à affecter la structure CGImageRef à la propriété image de l'Image View :

monImage.image = [UIImage imageWithCGImage:imageRef];

Et à ajouter cet Image View à la vue courante :

[self.view addSubview:monImage];

La dernière instruction supprime l'objet CGImageRef de la mémoire. Une fois l'image affichée, celui-ci n'a en effet plus aucun intérêt :

CGImageRelease(imageRef);

Une fois encore, je vous invite à consulter la documentation Apple pour prendre connaissance des propriétés des objets UIImage et UIImageView, et donc pour avoir un aperçu de ce qu'il est possible de faire avec ces objets.

En résumé

Pour insérer des contrôles dans une vue, la solution la plus immédiate consiste à utiliser Interface Builder. Mais si vous vous sentez l'âme codeuse, vous pouvez utiliser du code pour parvenir au même résultat. Vous pouvez créer les contrôles suivants :

  • Label ;

  • Round Rect Button ;

  • Text Field ;

  • rectangles ;

  • Image View.

Exemple de certificat de réussite
Exemple de certificat de réussite