Exemple et tutoriel iOS7 UIPickerView

Dans ce tutoriel, nous allons parcourir un exemple simple de mise en œuvre d'UIPickerView, un élément de l'interface utilisateur qui permet d'effectuer une sélection parmi des choix multiples

Les commentaires et les suggestions d'amélioration sont les bienvenus, alors, après votre lecture, n'hésitez pas. Commentez Donner une note à l'article (5).

Article lu   fois.

Les deux auteur et traducteur

Traducteur : Profil Pro

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

Introduction

Dans ce tutoriel, nous allons parcourir un exemple simple de mise en œuvre d'UIPickerView, un élément de l'interface utilisateur qui permet d'effectuer une sélection parmi des choix multiples (similaire à une liste déroulante sur une page Web).

Image non disponible

1. Création du projet Xcode

Nous allons commencer par créer un projet Xcode single view application pour démontrer le fonctionnement d'UIPickerView.

Image non disponible

Vous pouvez renseigner ce que vous voulez comme détails des paramètres du projet puisque ce sera juste une démonstration.

Voici ce que j'ai :

Image non disponible

2. Ajout et connexion de l'UIPickerView

Dans le navigateur de fichiers à gauche, sélectionnez Main.Storyboard et l'éditeur va basculer en mode conception, où vous pouvez voir à quoi ressemblera votre vue.

Sur la droite, vous avez votre volet d'inspection des attributs (moitié supérieure) et votre volet des bibliothèques (moitié inférieure). Si vous ne voyez pas ce volet à droite, cliquez sur l'icône dans le coin supérieur droit pour le rendre visible.

Assurez-vous que vous avez sélectionné l'onglet bibliothèque d'objets et tapez « pickerview ». La liste des éléments sera filtrée jusqu'à l'élément UIPickerView.

Image non disponible

Une fois trouvé, faites-le glisser sur votre vue. Si vous ne parvenez pas à le déplacer, vous pourriez être sur une vue en zoom arrière. Dans ce cas, il suffit de double cliquer sur n'importe quelle zone blanche dans le storyboard pour effectuer un zoom avant et vous serez en mesure de déposer l'élément UIPickerView sur votre vue.

Image non disponible

Maintenant que nous avons l'élément Picker View sur la vue dans le storyboard, nous devons déclarer cet élément pour qu'il soit accessible dans le code du ViewController.

Cliquez sur le bouton Assistant Editor et assurez-vous que le storyboard est dans le volet gauche et que ViewController.h se trouve dans celui de droite.

Ensuite, maintenez enfoncée la touche contrôle, cliquez sur l'élément UIPickerView dans le storyboard et faites glisser votre souris vers la droite. Déposez-le entre les balises @interface et @end.

Image non disponible

Une petite boîte de dialogue apparaîtra pour vous demander le nom de cette propriété IBOutlet. Vous pouvez la nommer « picker » (sélecteur).

Image non disponible

Après l'avoir fait, votre fichier ViewController.h ressemblera à ceci :

Image non disponible

Nous pouvons maintenant référencer cet élément Picker View à partir du code dans le ViewController en utilisant « self.picker ».

Gardez à l'esprit que si vous supprimez cette propriété IBOutlet, vous devez également supprimer la connexion avec le storyboard, sinon votre application plantera.

Vous pouvez interrompre la connexion par un clic droit sur l'élément Picker View dans le storyboard, rechercher la connexion de la propriété effacée, puis cliquer sur le « x » à côté de cette connexion.

Maintenant, exécutez votre application pour vous assurer qu'elle fonctionne.

3. Création des données

Créons les données que nous allons afficher dans le contrôle Picker.

Dans ViewController.m, ajoutez le code suivant :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
@interface ViewController ()
{
    NSArray *_pickerData;
}
@end
 
@implementation ViewController
 
- (void)viewDidLoad
{
    [super viewDidLoad];
 
    // Initialiser les données
    _pickerData = @[@"Item 1", @"Item 2", @"Item 3", @"Item 4", @"Item 5", @"Item 6"];
}

À la ligne 3, nous déclarons une nouvelle variable d'instance NSArray pour stocker la liste de données. En la déclarant comme variable d'instance, nous pouvons accéder à cette variable à partir de n'importe quelle méthode de cette classe et la variable conservera sa valeur pendant la durée de vie des objets.

Cependant, nous ne pouvons pas initialiser des variables dans l'interface, alors nous initialisons la variable d'instance dans la méthode viewDidLoad,à la ligne 14.

4. Connexion des données

Maintenant que nous avons l'élément UIPickerView dans notre storyboard et nous l'avons rendu accessible à partir du code, nous pouvons ajouter le code permettant de connecter les données à lui !

Allez dans ViewController.h et rendez cette classe conforme aux protocoles UIPickerViewDelegate et UIPickerViewDataSource.

La ligne 3 ci-dessous reprend les modifications nécessaires. En faisant cela, nous statuons que la classe ViewController est conforme aux « règles » appropriées qui lui permettent d'être une source de données pour la classe UIPickerView et de gérer les événements déclenchés par cette classe.

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
#import <UIKit/UIKit.h>
 
@interface ViewController : UIViewController<UIPickerViewDataSource, UIPickerViewDelegate>
 
@property (weak, nonatomic) IBOutlet UIPickerView *picker;
 
@end

Maintenant, allez dans ViewController.m et ajoutez les lignes de code suivantes dans la méthode viewDidLoad :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
- (void)viewDidLoad
{
    [super viewDidLoad];
 
    // Initialiser les données
    _pickerData = @[@"Item 1", @"Item 2", @"Item 3", @"Item 4", @"Item 5", @"Item 6"];
   
    // Connecter les données
    self.picker.dataSource = self;
    self.picker.delegate = self;
}

En fait, ce code définit cette instance de ViewController comme source de données et délégué du Picker View que nous avons ajouté au storyboard.

Maintenant, nous pouvons mettre en œuvre les méthodes déléguées appropriées d'UIPickerView.

Ajoutez les méthodes suivantes à votre ViewController.m, entre la méthode didReceiveMemoryWarning et le mot-clé @end.

 
Sélectionnez
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.
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Débarrassez-vous des ressources qui peuvent être recréées.
}
 
// Le nombre de colonnes des données
- (int)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 1;
}
 
// Le nombre de lignes des données
- (int)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    return _pickerData.count;
}
 
// Les données à retourner pour la ligne et le composant (colonne) qui est passé en entrée
- (NSString*)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    return _pickerData[row];
}
 
@end

La méthode numberOfComponentsInPickerView demande le nombre de colonnes dans votre élément sélecteur. Par exemple, si vous vouliez faire un sélecteur pour le temps, vous pourriez avoir trois composants : pour les heures, pour les minutes et pour les secondes.

La méthode numberOfRowsInComponent demande le nombre de lignes de données dans votre élément UIPickerView, alors nous retournons le nombre d'éléments du tableau.

La méthode pickerView:titleForRow:forComponent: demande les données pour une ligne spécifique et un composant spécifique.

Avec cet ensemble de données, nous n'avons qu'une seule colonne, donc nous prenons en considération uniquement la ligne demandée et retournons la donnée qui correspond à cette ligne.

Image non disponible

5. Ajout de plusieurs composants

Ajoutons plusieurs composants à nos données !

Dans ViewController.m, modifions la ligne de code où nous initialisons nos données. Au lieu d'un simple tableau de chaînes de caractères, nous allons créer un tableau d'éléments de type tableau.

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
- (void)viewDidLoad
{
    [super viewDidLoad];
 
    // Initialiser les données
    _pickerData = @[ @[@"1", @"2", @"3", @"4"],
                     @[@"a", @"b", @"c", @"d"],
                     @[@"!", @"#", @"$", @"%"],
                     @[@"w", @"x", @"y", @"z"] ];
   
    // Connecter les données
    self.picker.dataSource = self;
    self.picker.delegate = self;
}

Nous devons aussi modifier la méthode numberOfComponentsInPickerView :

 
Sélectionnez
1.
2.
3.
4.
5.
// Le nombre de colonnes des données
- (int)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 4;
}

Modifions également la méthode pickerView:titleForRow:forComponent: :

 
Sélectionnez
1.
2.
3.
4.
5.
// Les données à retourner pour la ligne et le composant (colonne) qui est passé en entrée
- (NSString*)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    return _pickerData[row][component];
}
Image non disponible

6. Détection des éléments sélectionnés avec UIPickerView

Afin de détecter ce que l'utilisateur a sélectionné avec UIPickerView, il suffit de mettre en œuvre une méthode déléguée supplémentaire :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
// Détecter l'élément sélectionné dans le picker view
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    // Cette méthode est déclenchée à chaque fois que l'utilisateur modifie son choix dans le sélecteur 
    // Le paramètre nommé ligne et le composant définissent l'élément sélectionné
}

7. Conclusion

UIPickerView est la norme iOS pour la sélection parmi plusieurs options. Comme vous pouvez le voir dans cet exemple simple, il peut être difficile à comprendre pour les débutants s'ils n'ont pas encore étudié la délégation. Cependant, une fois familiarisés à l'utilisation des délégués, tout devient logique et vous pouvez profiter d'autres UIElements où la délégation intervient.

8. 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, Seelass pour sa relecture technique ainsi que milkoseck 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.