Tutoriel n°6 : Débuter avec la gestion des vues

Bonjour!

Bienvenue dans ce nouveau tutoriel.

Aujourd'hui, nous allons apprendre à gérer les Views. C'est un mécanisme un peu difficile à comprendre, mais nous allons l'apprendre ensemble !

Attention ! Ce tutoriel vous permet de comprendre le mécanisme. Dans vos programmes, vous serez amenés à utiliser des viewController, ce qui n'est pas abordé ici. Cependant, après avoir fait ce tutoriel, vous serez plus à-mêmes de comprendre le code par défaut proposé par Apple lors de la création d'un "Utility Application".

Le but de ce projet est de créer une vue (Principale Vue) qui sera un support (elle ne sera jamais visible) pour switcher entre les vues "Home" et "Autre Vue". Je vous invite à venir ici pour en savoir plus.

1) Démarrons un nouveau projet et épurons le

Tout d'abord, créons un nouveau projet, "View-Based Application" que nous nommerons "LearnView".
Nous allons faire un choix... Vous constatez qu'il y a deux fichiers .xib, c'est-à-dire pour IB.  Vous n'êtes pas obligés d'utiliser un fichier .xib par vue, comme proposé par défaut ici. Surtout lorsque votre programme en utilise peu, ou que chaque vue n'est instanciée qu'une seule fois.

Supprimons "LearnViewViewController.xib" et cliquez sur "also move to trash". Pas d'inquiétudes

Double-cliquez sur "MainWindow.xib". Vous obtenez cette fenêtre

Allez dans l'onglet "Attributes Inspector" et effacez le champ NIB Name et appuyez sur enter.

Vous devriez maintenant avoir ceci :

2) Jouons avec les Vues

Bien. Ajoutons une vue dans cette fenêtre, que nous nommerons "PrincipaleVue" dans class.
Remarquez que si vous cliquez sur cette partie

vous êtes sur le "LearnViewViewController".

Revenez sur votre vue (vérifiez dans le champ "Class" qu'il y a bien écrit "Principale Vue"), glissez-y un label. Pas besoin pour ce tutoriel de l'ajouter aux Outlets. Sauvez et "Write Class Files".  Dans le .h, faites hériter de UIView.

Cette vue servira à contrôler les autres.

Retournons dans IB. Glissez une UIView dans "MainWindow.xib"

Appelons cette vue "Home" dans "Class". Sauvez et "Write Class Files". Dans le .h, faites hériter de UIView.

Sauvez et retournez sous IB. Double cliquez sur "Home", ceci affichera une fenêtre vide. Ajoutez dans Home un label que vous nommerez "Home".

Sauvez et retournez sous Xcode encore une fois (on va jongler encore pendant quelques temps ).

Nous allons ensuite ajouter la ligne suivante dans le VuePrincipale.h (avant l'@ interface)

@class Home;

Nous ferons ceci pour toutes les vues que le PrincipaleVue contrôlera.

Ajoutez cette ligne pour créer une vue Home que PrincipaleVue gérera :

@interface PrincipaleVue : UIView {
    IBOutlet Home *vueHome; // cette ligne (on relie vueHome avec IBOutlet à IB)

}

Dans VuePrincipale.m, ajoutez

#import "Home.h"

Sauvez et retournez sous IB. Cliquez sur PrincipaleVue, et reliez vueHome à la view Home :

Sauvez et revenez sous XCode.

Ajoutez la méthode dans PrincipaleVue.m

- (void) awakeFromNib{
    [self addSubview:vueHome];// ajout lors de la construction de l'appli de la vue Home
}

<pomme + r> , Home doit normalement s'afficher !

3) Customisons-les !

Bon, nous n'avons pas fini! En effet, nous allons ajouter une view. Sinon, le tuto ne sert pas vraiment à grand chose ...

Sous IB, faites comme pour la view Home, que vous nommerez "AutreVue". Sauvez, écrivez la classe, et faites la hériter de UIView.

Dans Home.m et AutreVue.m, importez PrincipaleVue.h

Dans AutreVue.h

@interface AutreVue : UIView {
    IBOutlet PrincipaleVue *princ;
}

@end

Dans Home.h

@interface Home : UIView {
    IBOutlet PrincipaleVue *princ;
}

@end

Sous IB, rajoutez un bouton "Changer de vue" à la vue Home.

Toujours pas d'outlet !

Retour sous XCode, il nous fait maintenant dire à Home ce qu'il faut qu'elle fasse lors d'un clic sur le bouton

- (IBAction) changeToAutreVue{
}

Ne pas oublier dans le .h

- (IBAction) changeToAutreVue;

Retour dans IB pour attacher cette méthode au bouton et choisissez "Touch Down"

Dans PrincipaleVue.h, vous devriez avoir ceci :

@class Home;
@class AutreVue; // vous m'aviez oublié?

@interface PrincipaleVue : UIView {
    IBOutlet Home *vueHome;
    IBOutlet AutreVue *autreVue; // la aussi ? :(

}

@end

Non ? Roo, vous avez oublié ? Cette vue contrôle les autres, il faut donc déclarer tout les vues contrôlées.

Implémentez la méthode

- (void) changeToAutreVue{
    [vueHome removeFromSuperview]; // on "demande à vueHome de s'enlever de la vue au dessus d'elle 
    [self addSubview:autreVue];// on ajoute autreVue

}

Revenez dans "Home.m" et écrivez

- (IBAction) changeToAutreVue{
    [princ changeToAutreVue];
}

Au final, voici les codes :
PrincipaleVue.h

#import <UIKit/UIKit.h>
#import <Foundation/Foundation.h>

@class Home;
@class AutreVue;

@interface PrincipaleVue : UIView {
    IBOutlet Home *vueHome;
    IBOutlet AutreVue *autreVue;

}

- (void) changeToAutreVue;

@end

PrincipaleVue.m

#import "PrincipaleVue.h"
#import "Home.h"
#import "AutreVue.h"

@implementation PrincipaleVue
- (void) awakeFromNib{
    [self addSubview:vueHome];
}

- (void) changeToAutreVue{
    [vueHome removeFromSuperview]; // on enlève home
    [self addSubview:autreVue];// on ajoute autreVue

}

@end

Home.h

#import <UIKit/UIKit.h>
#import <Foundation/Foundation.h>

@class PrincipaleVue;
@interface Home : UIView {
    IBOutlet PrincipaleVue *princ;
}

- (IBAction) changeToAutreVue;

@end

Home.m

#import "Home.h"
#import "PrincipaleVue.h"

@implementation Home

- (IBAction) changeToAutreVue{
    [princ changeToAutreVue];
}

@end

AutreVue.h

#import <UIKit/UIKit.h>
#import <Foundation/Foundation.h>

@class PrincipaleVue;
@interface AutreVue : UIView {
    IBOutlet PrincipaleVue *princ;
}

@end

AutreVue.m

#import "AutreVue.h"
#import "PrincipaleVue.h"

@implementation AutreVue

@end

Et sous IB, reliez ensemble les vues, mais pas n'importe comment :

et

De même que pour "Home", mettez un label et un bouton

avec le code suivant

- (IBAction) returnToHome{
    [princ returnToHome];
}

Si vous avez compris, que faut-il faire dans la vue principale qui contrôle ?
Il faut enlever l'"autreVue" et mettre la vue "vueHome", soit

- (void) returnToHome{
    [autreVue removeFromSuperview]; // on enleve autreVue
    [self addSubview:vueHome]; // on met Home
}

Une fois ceci écrit, puis le bouton "retour" sous IB relié à la méthode "returnToHome",

Compilez et lancez : en cliquant sur les boutons, vous changez de vue...

J'espère que cela vous a fait comprendre un peu mieux le mécanisme des vues.

En guise d'exercice, vous pouvez rajouter une troisième vue à votre application, toujours contrôlée par PrincipaleVue. Et voyez si vous avez compris.

A bientôt!

Sources pour vous aider!


Ipodishima