Tutoriel UISlider - Comment implémenter un curseur iOS

Dans ce tutoriel, je vais vous montrer comment ajouter un curseur à votre application et capturer sa valeur.

La classe que nous allons utiliser est UISlider et fait partie d'UIKit, le framework dont vous vous servez pour construire vos applications.

Si vous êtes débutant dans le développement iOS, vous pouvez ne pas savoir que vous utilisiez UIKit tout le temps, car il est inclus par défaut lorsque vous créez un nouveau projet Xcode !

Cette implémentation sera très simple, mais elle vous aidera à démarrer dans la bonne direction.

Article lu   fois.

Les deux auteur et traducteur

Traducteur :

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

1. Créer un nouveau projet Xcode 5

Commençons par créer notre projet de démonstration, une simple Single View Application.

Image non disponible

Peu importe ce que vous mettez dans les paramètres du projet pour cette démonstration.

Image non disponible

2. 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.

Image non disponible

Dans le coin inférieur droit, allez à la bibliothèque d'objets et recherchez « slider » (curseur).

Image non disponible

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

Image non disponible

3. 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.

Image non disponible

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.

Image non disponible

À 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 !

4. 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.

Image non disponible

Ensuite, ajoutez le code suivant dans la méthode que vous venez de créer :

 
Sélectionnez
1.
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.

Image non disponible

5. 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 !

6. Remerciements Developpez

Nous remercions Chris Ching de nous avoir aimablement autorisé à 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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2014 Chris Ching - Developpez. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.