Share
Interface Builder est l'un des meilleurs outils qu'Apple offre à ses développeurs iPhone. Interface Builder est une application qui vous permet, en tant que développeur, de créer une interface graphique pour votre application dans un éditeur de style WYSIWYG (Qu'est-ce que vous obtenez?). Une fois l'application compilée, IB génère alors tout le code nécessaire. Cela vous permet de créer rapidement et facilement des interfaces. Ce tutoriel vous guidera à travers la création d'interfaces dans Interface Builder et l'utilisation des différents éléments fournis par Apple.
Avant de poursuivre avec l'un des exemples de ce didacticiel, lisez attentivement le Manuel d'interface utilisateur pour iPhone de Apple. Ce document contient des informations essentielles sur la création d'interfaces pour l'iPhone. En cas de non-respect des instructions, il pourrait entraîner le rejet de votre application lors de sa soumission à l'App Store. Ce document sera discuté plus en détail au fur et à mesure, et tous les exemples de ce tutoriel seront conformes à ces instructions..
Interface Builder a une disposition assez simple. Il se compose de quatre fenêtres principales: la vue, la bibliothèque, le navigateur de documents nib (ou xib) et l'inspecteur. Alors, que font chacune de ces fenêtres? La vue est l'endroit où vous construisez votre interface. Vous allez faire glisser des éléments de la fenêtre de la bibliothèque vers la vue pour les placer. Le navigateur de documents vous permet de parcourir, de manière hiérarchique, les éléments que vous avez placés dans votre fichier nib. Enfin, l'inspecteur vous montre tous les attributs de l'élément sélectionné et vous permet de les éditer..
Sur le plan plus technique, Interface Builder permet au code source de votre application d'interagir avec l'interface de deux manières fondamentales: les prises et les actions. Les points de vente définissent un élément auquel vous aurez accès dans votre code source. Vous pourrez ensuite établir une connexion entre vos points de vente et ces éléments d'interface utilisateur spécifiques dans Interface Builder..
Un point de vente est défini comme ceci:
IBOutlet id someElement;
La déclaration IBOutlet peut également être placée avec la déclaration de propriété comme suit:
@property (nonatomic, keep) IBOutlet id someElement;
De toute façon est acceptable. Une action est un type spécial de méthode appelée en réponse à un événement (c’est-à-dire que l’utilisateur appuie sur un bouton) que vous définissez dans Interface Builder. Une action est définie en faisant en sorte que les méthodes renvoient le type IBAction, comme suit:
-(IBAction) someAction: (id) expéditeur;
Nous discuterons des points de vente et des actions plus en détail plus tard.
La première chose à faire avant de pouvoir utiliser Interface Builder est de créer un nouveau projet Xcode. Ouvrez Xcode, cliquez sur Créer un nouveau projet Xcode, puis sélectionnez un projet basé sur une vue. Intitulez-le "compteur".
REMARQUE:
Assurez-vous que vous avez défini votre cible sur iPhone et non sur iPad dans Xcode..
Maintenant que vous avez un projet Xcode, nous voulons modifier le CounterViewController créé automatiquement pour définir nos points de vente et nos actions. Ouvrez le fichier CounterViewController.h et modifiez-le pour lui donner l'aspect suivant:
#importation@interface CounterViewController: UIViewController IBOutlet UILabel * countLabel; NSInteger count; @property (nonatomic, keep) UILabel * countLabel; @property (nonatomic) NSInteger count; - (IBAction) ajouter: (UIButton *) expéditeur; - émetteur (IBAction) sub: (UIButton *); - (void) displayCount; @fin
Ceci définit un nombre entier pour contenir le compte et une sortie pour une étiquette qui affichera ce compte. Il définit également un ensemble de méthodes qui recevront des événements de IB. Maintenant, nous devons définir une implémentation pour ces actions. Ouvrez le fichier CounterViewController.m correspondant et apportez les modifications suivantes:
#import "CounterViewController.h" @implementation CounterViewController @synthesize count; @synthesize countLabel; - (IBAction) add: (UIButton *) sender count ++; [self displayCount]; - (IBAction) sous: (UIButton *) sender count--; [self displayCount]; - (void) displayCount [self.countLabel setText: [[NSString alloc]] initWithFormat: @ "% d", self.count]]; … - (void) dealloc [version de countLabel]; [super dealloc]; @fin
C'est tout simplement fichier. Tout ce qu’il fait, c’est chaque fois que l’action est appelée est de modifier le nombre, soit vers le haut, soit vers le bas, puis d’afficher ce nombre sur l’étiquette..
Développez maintenant le dossier de ressources dans Xcode et vous verrez trois fichiers. Deux d'entre eux sont des fichiers .xib d'Interfcae Builder. Pour l'instant, vous pouvez ignorer le fichier MainWindow.xib. Nous allons nous concentrer sur le fichier CounterViewController.xib. Ouvrez-le maintenant, cela va démarrer le constructeur d'interface et vous verrez un écran comme celui-ci:
Il est temps de commencer à construire notre interface! Allez sur l'onglet Bibliothèque, saisissez un bouton et faites-le glisser sur votre vue. Si vous faites glisser le bouton pendant un moment, vous remarquerez que des guides bleus apparaissent. Interfcae Builder vous donnera différents guides pour vous aider à placer un élément dans la vue. Vous verrez cela plus lorsque nous commencerons à placer plus d'éléments. Faites ça deux fois. Ensuite, trouvez une étiquette et placez-la sur votre vue.
Sélectionnez maintenant l'un des boutons, accédez à l'onglet Attributs de l'inspecteur et modifiez son titre en "+". Faites la même chose pour l'autre bouton, mais changez son titre en "-". Double-cliquer vous permettra également de changer le titre. Double-cliquez sur l'étiquette et remplacez son texte par "0". Vous pouvez également modifier l'alignement du texte au centre, ce qui peut être fait dans l'onglet Attributs de l'inspecteur..
Maintenant, vous devriez avoir une interface qui ressemble à peu près à ceci:
La dernière chose à faire pour que votre application de compteur fonctionne est de connecter l’interface et la source..
Connectez la sortie countLabel à l'étiquette réelle. Pour ce faire, cliquez avec le bouton droit de la souris et faites-le glisser depuis l'objet Propriétaire du fichier, dans la fenêtre du document, vers l'étiquette, dans la vue. Une petite fenêtre grise apparaît avec deux options, l’une le countLabel défini précédemment et l’autre, la vue (sortie par défaut requise pour les contrôleurs de vues, elle sera signalée par un tiret indiquant qu’elle est déjà connectée à quelque chose. ). Cliquez sur l'option countLabel pour la sélectionner.
Nous allons maintenant connecter nos boutons à nos actions d’addition et de soustraction. Pour ce faire, vous pouvez simplement cliquer sur les boutons avec la souris et les faire glisser vers l’objet propriétaire du fichier (et sélectionner l’action appropriée pour chaque bouton). Toutefois, prenez note du fait que si vous ouvrez le panneau de connexion de l’inspecteur Pour y accéder en appuyant sur commande + 2), il répertorie une série d’événements différents que vous pouvez utiliser pour déclencher vos actions et vous permet de créer une vaste gamme de fonctionnalités à partir d’un simple bouton. Par défaut, il utilise l'événement Touch Up Inside..
Vous pouvez maintenant revenir à Xcode et cliquer sur Build and Run. Votre application doit alors être lancée dans le simulateur. Si tout est correctement câblé, vous devriez pouvoir ajouter et soustraire du nombre et voir l’étiquette changer pour refléter cela..
Un contrôle UISegmented est comme un couple de boutons collés ensemble, avec une différence majeure. L'objectif général d'un UISegmentedControl n'est pas de ressembler à un bouton-poussoir, mais de faire une sélection. Permet de développer les fonctionnalités de notre application Counter, en utilisant un contrôle séparé pour permettre à l'utilisateur de choisir entre les modes "décompte par un" ou "décompte par deux".
La première chose à faire est d’ouvrir le fichier CounterViewController.h dans Xcode et d’ajouter une définition IBAction et un entier pour stocker notre mode..
Changez-le pour ressembler à ceci:
#importation@interface CounterViewController: UIViewController IBOutlet UILabel * countLabel; NSInteger count; NSInteger mode @property (nonatomic, retenue) UILabel * countLabel; @property (nonatomic) NSInteger count; @property (nonatomic) mode NSInteger; - (IBAction) ajouter: (UIButton *) expéditeur; - émetteur (IBAction) sub: (UIButton *); - mode (IBAction): expéditeur (UISegmentedControl); - (void) displayCount; @fin
C'est un bon moment pour souligner que jusqu'à présent, les définitions d'action de ce tutoriel ont toutes défini un type de classe pour l'expéditeur, ce qui limite les objets pouvant appeler cette action à ceux de ce type de classe. Je trouve cette pratique utile car elle vous empêche de connecter les choses de manière incorrecte. Il convient toutefois de noter que cela est ne pas une exigence, ces définitions auraient tout aussi bien pu être:
- (IBAction) add: (id) expéditeur; - sous-élément (IBAction): expéditeur (id); - mode (IBAction): expéditeur (id);
Permettre à n'importe quel objet de les appeler. Dans les deux cas, vous devez faire en sorte que la mise en œuvre de ces actions corresponde. Ouvrez donc CounterViewController.m et apportez les modifications suivantes:
#import "CounterViewController.h" @implementation CounterViewController @synthesize count; @synthesize countLabel; @synthesize mode; - (IBAction) add: (UIButton *) sender switch (mode) case 0: count ++; Pause; cas 1: compte + = 2; Pause; défaut: break; [self displayCount]; - Sous-tâche (IBAction): (UIButton *) sender switch (mode) case 0: count--; Pause; cas 1: compte - = 2; Pause; défaut: break; [self displayCount]; - Mode (IBAction): (UISegmentedControl) expéditeur mode = sender.selectedSegmentIndex; … @fin
Nous devons maintenant modifier l'interface. Alors, ouvrez le fichier CounterViewController.xib.
Accédez à la bibliothèque et faites glisser un contrôle segmenté. Nous devons maintenant le configurer. Assurez-vous que le contrôle segmenté est sélectionné et ouvrez le panneau d'attributs de l'inspecteur. En descendant un peu dans la liste déroulante du segment, qui devrait se lire "segment 0 - premier", nous voulons changer le titre en "Un". Maintenant, déroulez le menu du segment et passez au segment "segment 1 - seconde", et changez son titre en "Deux".
Nous devons également relier cela à notre action. Ouvrez le panneau de connexion et faites glisser de "Valeur modifiée" vers le propriétaire des fichiers. Sélectionnez le mode "action".
C'est tout. Vous devriez maintenant avoir une application de comptage pouvant compter de un à deux.
Jusqu'ici, les éléments dont nous avons parlé ont de nombreuses utilisations possibles et très peu de restrictions. La barre d’outils est le premier élément dont nous discuterons et qui comporte des restrictions dans les directives de l’interface humaine pour iPhone. Si vous envisagez d’utiliser beaucoup de barres d’outils, vous devriez consulter ces instructions, mais en bref, les barres d’outils doivent toujours être placées au bas de l’interface et doivent être composées de boutons dont les icônes ne dépassent pas 44 pixels sur 44 pixels. Ce n'est pas un élément de navigation, et c'est une distinction importante. Si vous souhaitez l'utiliser pour modifier l'affichage ou les modes de votre application, utilisez plutôt une barre d'onglets. Toutefois, si vous suivez ces instructions, la barre d’outils est très simple; c'est une simple collection de boutons sur une barre, et peut donc être utilisé exactement comme un tas de boutons. La seule différence est qu'Apple fournit un ensemble de préréglages système plus volumineux que pour les boutons standard. Vous pouvez également placer des espaceurs dans la barre d’outils entre les boutons pour modifier leur position. Essayons-le.
Retournez à la CounterViewController.h et ajoutez la ligne suivante après vos déclarations d'actions précédentes.
- (IBAction) reset: (UIBarButtonItem *) expéditeur;
Remarque:
L'expéditeur ici est un UIBarButtonItem, pas un UIToolbar. Chaque UIBarButtonItem envoie son propre événement, la barre UIToolbar est simplement un conteneur..
Maintenant, ajoutez ceci à votre CounterViewController.m, en suivant les actions que nous avons définies précédemment:
- (IBAction) reset: (UIBarButtonItem *) expéditeur nombre = 0; [self displayCount];
De retour dans IB, déposons une barre UIToolbar de la bibliothèque sur la vue, notons qu'elle contient déjà un bouton. Pour sélectionner ce bouton, vous devez double-cliquer dessus (le premier clic sélectionne la barre d'outils, le second sélectionne le bouton).
Aller aux attributs dans l'inspecteur. Vous remarquerez qu'il existe beaucoup moins d'options pour un UIBarButtonItem que pour d'autres éléments. Cela est dû au fait que les barres d’outils doivent être uniformes. Vous devez donc définir des paramètres tels que la couleur pour la barre d’outils entière (vous pouvez l’essayer en cliquant simplement une fois sur la barre d’outils puis en ouvrant l’inspecteur d’attributs). Remplacez l'identifiant du bouton par "Corbeille".
Ensuite, connectez le bouton à l'acteur de réinitialisation en faisant glisser le contrôle vers le propriétaire du fichier. Si vous exécutez votre application, vous devriez maintenant pouvoir arrêter le décompte en appuyant sur la corbeille..
Le commutateur est probablement l'élément le plus restreint fourni par Interface Builder. Il n'a presque aucune option de personnalisation. Il a un état "On" et un état "Off". Vous ne pouvez pas changer les étiquettes ou les couleurs. Les interrupteurs doivent toujours avoir la même apparence, peu importe quoi. Malgré le fait qu'ils soient très restreints, les commutateurs sont utiles à l'occasion. Par exemple, les paramètres ont tendance à faire un usage intensif des commutateurs, qui peuvent être utiles pour activer ou désactiver des fonctionnalités de votre application. C'est exactement ce que nous allons faire. Nous allons faire un changement qui va activer et désactiver si nous pouvons compter les négatifs dans notre application.
La première chose à faire est d’apporter les modifications suivantes à votre CounterViewController.h:
#importation@interface CounterViewController: UIViewController … Négatif booléen; … @ @ Property (nonatomic) booléen négatif;… - (IBAction) negativeSwitch: expéditeur (UISwitch *);… @end
Ceci définit simplement un booléen qui stockera si nous sommes en mode négatif ou non et une action envoyée par un UISwitch qui changera ce booléen. Alors maintenant, définissons notre action et faisons en sorte que le reste de notre application réponde à notre nouveau booléen négatif. Modifiez votre fichier CounterViewController.m pour qu'il corresponde à ce qui suit:
#import "CounterViewController.h" @implementation CounterViewController… @synthesize negative;… - (IBAction) sous: (UIButton *) sender switch (mode) case 0: count--; Pause; cas 1: compte - = 2; Pause; défaut: break; if (negative) // Ceci vérifie simplement si le mode négatif est désactivé if (count < 0) //and if count is negative count = 0; //sets it back to zero [self displayCount]; … - (void)viewDidLoad negative = TRUE; - (IBAction)negativeSwitch:(UISwitch*)sender negative = sender.on; if (!negative) if (count < 0) count = 0; [self displayCount];
Tout ce qui est fait ici est de définir le mode négatif en fonction de l'état du commutateur, puis, lorsqu'une soustraction se produit, en vérifiant le mode actuel du commutateur (enregistré dans le booléen négatif)..
Revenez dans le générateur d'interface, recherchez un commutateur dans la bibliothèque et déposez-le dans la vue. Nous devons maintenant connecter le commutateur à l'action, mais dans le cas du commutateur comme le contrôle segmenté, nous souhaitons utiliser l'événement Value Changed, pas de retouche à l'intérieur. Allez donc dans l'onglet Connexions de l'inspecteur, faites glisser le curseur vers le propriétaire du fichier et connectez-vous à l'action negativeMode:. Vous voudrez peut-être aussi placer une étiquette pour indiquer ce que fait le commutateur.
À ce stade, votre application devrait ressembler à ce qui précède..
Le dernier élément, le plus compliqué, dont nous allons parler, est le curseur. Les curseurs représentent une plage de valeurs (que vous pouvez spécifier) qui changent lorsque vous vous déplacez le long du curseur. Cet élément est extrêmement personnalisable, mais la plupart de ces personnalisations doivent être effectuées en code et sortent du cadre de ce didacticiel. Nous allons l'utiliser pour faire un multiplicateur et un diviseur pour notre compteur.
La première chose dont nous avons besoin, c’est, eh bien vous l’avez deviné, une autre action. Ajoutez ce qui suit au fichier CounterViewController.h avec le reste de vos déclarations d’action:
- Multiplicateur (IBAction): expéditeur (UISlider *);
Ensuite, nous devons implémenter la fonction de multiplication et de division pour notre compteur. Modifiez donc votre CounterViewController.m comme suit:
#import "CounterViewController.h" @implementation CounterViewController… @synthesize mult;… - (IBAction) add: (UIButton *) sender count + = mode; compte * = mult; si (! négatif) si (compter < 0) count = 0; [self displayCount]; - (IBAction)sub:(UIButton*)sender count -= mode; count /= mult; if (!negative) if (count < 0) count = 0; [self displayCount]; - (IBAction)mode:(UISegmentedControl*)sender mode = sender.selectedSegmentIndex+1; //Don't forget to add the +1 here - (IBAction)multiplier:(UISlider*)sender mult = sender.value; … - (void)viewDidLoad negative = TRUE; mult=1; … @end
Maintenant, lorsque vous ajoutez ou soustrayez, le nombre est multiplié ou divisé par la valeur du curseur. Si le curseur est à 1 (ce qui sera la limite inférieure), le compteur agira normalement à 9 (ce qui sera le maximum).
De retour dans IB, saisissez un curseur de la bibliothèque et déposez-le dans la vue, puis ouvrez ses attributs dans l'inspecteur. La première chose que vous devriez remarquer ici sont les valeurs. Nous voulons les changer un peu. Comme indiqué précédemment, vous souhaitez que la valeur minimale soit 1, la valeur maximale 9 et la valeur initiale égale à 1. Désélectionnez la case Continu afin d'éviter toute décimale, et c'est tout. Il suffit de connecter l'événement "valeur modifiée" de votre curseur au propriétaire du fichier et vous avez votre multiplicateur!
Votre application finale devrait ressembler à celle ci-dessous:
Ce tutoriel a à peine effacé la surface de ce qui est possible dans Interface Builder. C'est une application extrêmement puissante. Aujourd'hui, nous avons abordé l'utilisation de base de IB et les éléments les plus basiques fournis dans la bibliothèque de l'IB. Ce tutoriel a montré comment créer une application entièrement fonctionnelle à l'aide d'Interface Builder, sans utiliser beaucoup de code. N'oubliez jamais de consulter les consignes relatives à l'interface humaine sur l'iPhone avant de prendre des mesures radicales. Pour plus d'inspiration et d'assistance dans l'interface, vérifiez le UICatalog d'Apple..
Accentsconagua