Aller au menu - Aller au contenu

Icône Insertion de contrôles avec le code

Par MichelMartin
Mise à jour : 01/02/2012
Difficulté : Facile Facile Durée d'étude : 1 heure, 30 minutes Creative Commons BY-NC-SA
19 893 visites depuis 7 jours, dont 130 sur ce chapitre classé 18/786
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.
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

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 :

Code : Objective-C
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
- (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.
Retour en haut

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 :

Code : Objective-C
1
2
3
4
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 :

Code : Objective-C
1
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 :

Code : Objective-C
1
UILabel *monLabel = [[UILabel alloc] initWithFrame: rectLab];


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

Code : Objective-C
1
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 :

Code : Objective-C
1
[self.view addSubview: monLabel];


Dans cet exemple, la propriété text a été utilisée pour définir le texte affiché dans le Label. De nombreuses autres propriétés existent. Pour en avoir la liste, le plus simple consiste à faire appel à la documentation Apple. Vous pouvez vous aider de la figure suivante


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.
Retour en haut

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 :

Code : Objective-C
1
2
3
4
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é :

Code : Objective-C
1
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.

Code : Objective-C
1
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 :

Code : Objective-C
1
[monBouton setTitle:@"Un bouton" forState:UIControlStateNormal];


Puis le bouton est ajouté à la vue :

Code : Objective-C
1
[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.
Retour en haut

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 :

Code : Objective-C
1
2
3
4
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 :

Code : Objective-C
1
CGRect rectTF = CGRectMake(10,70,100,20);


Les paramètres de la fonction CGRectMake() sont les mêmes que dans les deux sous-parties précédentes, relatives aux contrôles Label et Round Rect Button.


La zone de texte est alors instanciée :

Code : Objective-C
1
UITextField *monChampTexte = [[UITextField alloc] initWithFrame:rectTF];


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

Code : Objective-C
1
monChampTexte.borderStyle = UITextBorderStyleLine;


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

Code : Objective-C
1
[self.view addSubview: monChampTexte];


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

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 :

Code : Objective-C
1
2
3
4
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 :

Code : Objective-C
1
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 :

Code : Objective-C
1
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 :

Code : Objective-C
1
subview.backgroundColor = [UIColor redColor];


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

Code : Objective-C
1
[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.
Retour en haut

Affichage d'une image

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

Code : Objective-C
1
2
3
4
5
6
7
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);



L'image à afficher doit avoir été préalablement placée dans les ressources de l'application. Je ne vous dis pas comment faire, vous devriez le savoir.


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 » :

Code : Objective-C
1
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) :

Code : Objective-C
1
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 :

Code : Objective-C
1
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 :

Code : Objective-C
1
CGImageRef imageRef = CGImageCreateWithImageInRect([img CGImage], cropRect);


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

Code : Objective-C
1
monImage.image = [UIImage imageWithCGImage:imageRef];


Et à ajouter cet Image View à la vue courante :

Code : Objective-C
1
[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 :

Code : Objective-C
1
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.
Retour en haut

Q.C.M.

En utilisant du code Objective C, sur quelle propriété faut-il agir pour modifier le texte affiché dans un contrôle Label ?
Quel message permet d'ajouter un contrôle à la vue courante ? Avant de fixer votre choix, précisions que leControle est le nom du contrôle qui doit être ajouté à la vue.
Pour créer un bouton, une zone de texte ou une image, vous devez définir un rectangle en précisant ses coordonnées. Quelle méthode devez-vous utiliser ?

Statistiques de réponses au QCM

Retour en haut

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.
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
3 commentaires pour "Insertion de contrôles avec le code"
Note moyenne : 3.41 / 4 (189 votes)
Pseudo Commentaire
Hors ligne Benoitd91 # Posté le 18/01/2012 à 14:02:21
Avatar

Avis : Très bon

Études : BTS IG Le Havre

 Bonjour !
Trés bon tuto, hâte d'avoir la suite !
J'aimerais simplement ajouter un second carré rouge à côté. J'ai essayez de plusieurs façon, et impossible d'y arriver. Aurait tu la solution ?

Code : Objective-C
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
- (void)viewDidLoad
{
    [super viewDidLoad];
    
    CGRect rectangle = CGRectMake(10,10,20,20); // Définition d'un rectangle
    UIView *subview = [[UIView alloc] initWithFrame:rectangle]; // Ajout de la vue correspondante
    subview.backgroundColor = [UIColor redColor];
    [self.view addSubview:subview];}


CGRect rectangle2 = CGRectMake(20,20,20,20); // Définition d'un rectangle
UIView *subview2 = [[UIView alloc] initWithFrame:rectangle2]; // Ajout de la vue correspondante
subview2.backgroundColor = [UIColor redColor];
[self.view addSubview:subview2];}
Hors ligne MichelMartin # Posté le 18/01/2012 à 14:27:24

Avis : Très bon Groupe : Auteurs

Bonjour iBenoit,

Ce code fonctionne.

Pour bien voir les deux rectangles, affectez-leur deux couleurs différentes. Par exemple recColor pour le premier et yellowColor pour le deuxième.
Hors ligne Benoitd91 # Posté le 18/01/2012 à 22:28:49
Avatar

Avis : Très bon

Études : BTS IG Le Havre

 Exactement, merci beaucoup de répondre facilement et rapidement, j'avais mal fait ! merci beaucoup et bonne continuation, j'ai hâte que la suite arrive !!

Voir tous les commentaires