Développer des Apps iOS 8 avec Swift

Partie 4 : Ajouter les interactions

Cette section a été complètement remise à jour pour refléter les changements de Xcode 6.3, à partir du 16 avril 2015.

Dans les parties 1, 2 et 3 nous avons vu quelques notions de base de Swift, et avons fait un projet qui crée une Table View et y insère des résultats issus de l'API iTunes. Si vous ne les avez pas encore lues, jetez un œil à la partie 1, la partie 2 et la partie 3.

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 ().

Article lu   fois.

Les deux auteur et traducteur

Site personnel

Traducteur : Profil Pro

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Charger des cellules depuis un prototype du storyboard

Alors, pour bien commencer nous devons encore rectifier une chose. La création d'une cellule TableView dans la fonction déléguée cellForRowAtIndexPath n'est pas des plus efficaces. En Objective-C nous utiliserions dequeueReusableCellWithIdentifier pour récupérer une cellule déjà en mémoire s'il y en a une de disponible, plutôt que d'en créer une nouvelle à chaque fois qu'une cellule est dessinée. Cela permet d'accélérer le défilement à l'écran et de réduire la mémoire utilisée.

Premièrement, nous ferons référence à cette cellule depuis un prototype du storyboard, qui est représenté par une chaîne de caractères dans notre code.

Alors, vers le début de la classe SearchResultsViewController, ajoutez la ligne suivante :

 
Sélectionnez
1.
let kCellIdentifier : String = "SearchResultCell"

Ensuite, nous devons apporter quelques modifications au storyboard.

Pour que Swift sache ce qu'est une SearchResultCell, nous devons spécifier la cellule comme un prototype de cellule dans notre storyboard et choisir SearchResultCell pour son identifiant de recyclage. Pour cela, ouvrez votre storyboard et sélectionnez votre TableView. Donnez la valeur 1 à « prototype cells ».

Image non disponible

Puis cliquez sur le prototype de cellule qui vient d'être ajouté pour qu'il soit sélectionné dans le panneau d'édition des attributs. Une fois qu'il est sélectionné, changez le style en « Subtitle » et le type de l'identifiant en « SearchResultCell » dans l'inspecteur des attributs.

Image non disponible

Pour finir, dans le fichier SearchResultsViewController.swift nous allons remplacer l'instanciation de la cellule avec le code suivant :

 
Sélectionnez
1.
let cell : UITableViewCell = tableView.dequeueReusableCellWithIdentifier(kCellIdentifier) as! UITableViewCell

Nous obtenons ainsi une cellule déjà instanciée.

Lancez l'application et constatez que le résultat n'a absolument pas changé, sauf que maintenant la cellule est chargée depuis un prototype du storyboard, ce qui va nous permettre de faire toutes sortes de choses intéressantes avec.

II. Faire faire quelque chose aux cellules !

Nous allons maintenant avoir une autre fonction déléguée que la UITableView va appeler sur notre classe déléguée SearchResultsViewController. Celle-ci ressemblera à :

 
Sélectionnez
1.
func tableView(tableView : UITableView, didSelectRowAtIndexPath indexPath : NSIndexPath)

À chaque fois que vous tapez une cellule, cette fonction sera exécutée. Nous allons extraire les données iTunes qui correspondent à la ligne qui a été cliquée en utilisant indexPath.row, l'identifiant numérique de la ligne cliquée comme index. Puis nous afficherons cette info dans un pop-up.

Ajoutez la méthode didSelectRowAtIndex qui suit :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
    // Obtenir les données pour la ligne sélectionnée
    if let rowData = self.tableData[indexPath.row] as? NSDictionary,
        // Obtenir le nom du morceau pour cette ligne
        nom = rowData["trackName"] as? String,
        // Obtenir le prix de l'item iTunes pour cette ligne
        prixFormate = rowData["formattedPrice"] as? String {
            let alert = UIAlertController(title: nom, message: prixFormate, preferredStyle: .Alert)
            alert.addAction(UIAlertAction(title: "Ok", style: .Default, handler: nil))
            self.presentViewController(alert, animated: true, completion: nil)
    }
}

Ici, nous commençons par assigner à rowData le contenu de l'objet situé à l'index sélectionné dans le tableau tableData. Puis, nous donnons aux variables nom et prixFormate une valeur extraite du dictionnaire de rowData. Ensuite, nous instancions un objet UIAlertController auquel nous donnons un titre, un message et nous ajoutons un bouton pour fermer l'alerte. Enfin, nous affichons le dialogue avec self.presentViewController().

Essayez le programme et vous devriez voir le nom et le prix de n'importe quelle app surgir dans une fenêtre quand vous cliquez dessus. Sympa non ?

III. Code source

Le code source complet de cette 4e partie est disponible ici.

Nous verrons dans la partie 5Chargement asynchrone d'images et mise en cache comment optimiser notre Table View.

IV. Vous avez une question ou un problème ?

Rejoignez-nous sur nos forums.

V. Remerciements Developpez

Nous remercions Jameson Quave de nous avoir aimablement autorisés à publier son article, dont le texte original peut être trouvé sur jamesonquave.com. Nous remercions aussi bredelet pour sa traduction, BakSh0 et LeBzul pour leur relecture technique, jacques_jean et Claude Leloup pour leur relecture orthographique et Winjerome pour sa gabarisation.

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

  

Copyright © 2014 Jameson Quave - 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.