I. Créer un nouveau projet Xcode 5▲
Commençons par créer notre projet de démonstration, une simple Single View Application.
Peu importe ce que vous mettez dans les paramètres du projet pour cette démonstration.
II. Ajouter le curseur à la vue▲
Dans cette démonstration, nous allons utiliser des storyboards pour ajouter le UISlider à notre vue. Commencez par aller à Main.Storyboard dans votre navigateur de fichiers.
Dans le coin inférieur droit, allez à la bibliothèque d'objets et recherchez « slider » (curseur).
Quand vous le trouvez, cliquez et faites-le glisser sur votre vue. Gardez à l'esprit que si vous êtes sur une vue en zoom arrière, vous ne serez pas en mesure de faire glisser des éléments sur la vue. Il suffit de double-cliquer sur une zone vide pour faire un zoom avant.
Ensuite, faites la même chose avec une UILabel. Recherchez-la et faites-la glisser sur votre vue.
Votre vue dans le storyboard devrait ressembler maintenant à ceci (j'ai élargi mon UISlider) :
III. Relier les éléments à IBOutlets▲
Allez à l'Assistant Editor et assurez-vous que vous voyez votre storyboard sur le côté gauche et ViewController.h sur la droite.
Ensuite, maintenez la touche CTRL enfoncée et cliquez sur l'élément UILabel ou UISlider du storyboard, et faites-le glisser vers la droite, entre les tags @interface et @end.
Une ligne bleue doit suivre le curseur de votre souris et lorsque vous relâchez, une boîte de dialogue s'affichera et vous demandera le nom de votre propriété IBOutlet.
Nommez-la « slider » (curseur) ou « label » (étiquette), en fonction de l'élément dont vous vous occupez. Faites cela pour les deux éléments.
Cette opération a pour but de connecter ces éléments du storyboard aux propriétés de la classe ViewController, afin que nous puissions accéder programmatiquement à ces éléments dans la classe ViewController.
À la fin, votre fichier ViewController.h ressemblera à l'image ci-dessus. Remarquez les deux cercles gris remplis, à côté des deux propriétés. Cela signifie qu'elles sont correctement connectées aux éléments du storyboard.
Une erreur courante : si vous vous trompez en reliant les éléments ou en nommant vos propriétés et que vous voulez recommencer, vous pouvez supprimer la propriété dans le fichier .h, mais vous devez aussi supprimer la connexion en allant sur votre storyboard, faire un clic droit sur l'élément respectif, puis sur le « x » à côté de la référence. Si vous ne le faites pas et que vous supprimez uniquement la propriété dans le fichier .h, alors l'élément sera connecté à une propriété qui n'existe plus et votre application plantera !
IV. Connecter l'événement value changed event du curseur▲
Afin de répondre à l'événement déclenché par le changement de la valeur du curseur, il faut connecter l'événement dans le fichier .m. Une fois de plus, nous allons utiliser l'Assistant Editor.
Cependant, cette fois-ci nous voulons avoir ViewController.m du côté droit. Vous allez maintenir la touche CTRL enfoncée et faire glisser l'élément de sorte que la ligne bleue suive votre souris. Faites-la glisser vers un espace vide entre la balise @end et l'accolade fermante d'une autre méthode, comme dans la capture d'écran ci-dessous.
Dans la boîte de dialogue qui apparaît, vous pouvez nommer la méthode IBAction sliderValueChanged.
Ensuite, ajoutez le code suivant dans la méthode que vous venez de créer :
2.
3.
4.
5.
- (IBAction)sliderValueChanged:(id)sender
{
// Faites correspondre le texte de l'étiquette à la valeur du curseur quand celle-ci change
self.label.text = [NSString stringWithFormat:@"%f", self.slider.value];
}
Avec le code ci-dessus, nous obtiendrons tout simplement la valeur du curseur et la convertissons en une chaîne de caractères.
Ensuite, nous attribuons celle-ci au texte de l'étiquette.
Exécutez l'application maintenant et faites glisser le curseur. Vous verrez les modifications apportées au texte de l'étiquette afin de refléter la valeur de votre curseur.
V. Conclusion▲
Le code source : Vous pouvez télécharger le code source de la démo ici.
Et voilà ! Ajouter un curseur et obtenir sa valeur est assez simple. Vous pouvez aller plus loin en ajoutant du style à votre curseur et nous verrons cela la prochaine fois.
Si vous avez trouvé ce tutoriel utile, merci de le partager avec vos amis et collègues !
VI. Remerciements Developpez▲
Nous remercions Chris Ching de nous avoir aimablement autorisés à publier son article. Cet article est une traduction autorisée dont le texte original peut être trouvé sur codewithchris.com. Nous remercions aussi Mishulyna pour sa traduction, LeBzul pour sa relecture technique ainsi que jacques_jean pour sa relecture orthographique.