.
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).
I. Création du projet Xcode▲
Nous allons commencer par créer un projet Xcode single view application pour démontrer le fonctionnement d'UIPickerView.
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 :
II. 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.
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.
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.
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).
Après l'avoir fait, votre fichier ViewController.h ressemblera à ceci :
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.
III. 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 :
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.
IV. 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.
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 :
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.
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.
V. 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.
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 :
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: :
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];
}
VI. 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 :
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é
}
VII. 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.
VIII. 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, Seelass pour sa relecture technique ainsi que milkoseck pour sa relecture orthographique.