iOS Créer un UITableView


Exemple

Une vue de tableau est une liste de lignes pouvant être sélectionnées. Chaque ligne est alimentée par une source de données. Cet exemple crée une vue de table simple dans laquelle chaque ligne est une seule ligne de texte.

Capture d'écran d'un UITableView

Ajouter un UITableView à votre storyboard

Bien qu'il existe plusieurs manières de créer une UITableView , l'une des plus faciles consiste à en ajouter une à un storyboard. Ouvrez votre storyboard et faites glisser un UITableView sur votre UIViewController . Veillez à utiliser la mise en page automatique pour aligner correctement la table (broche sur les quatre côtés).

Remplir votre table avec des données

Afin d'afficher le contenu de manière dynamique (c.-à-d. Le charger à partir d'une source de données comme un tableau, un modèle Core Data, un serveur en réseau, etc.) dans votre tableau, vous devez configurer la source de données.

Créer une source de données simple

Une source de données pourrait, comme indiqué ci-dessus, être n'importe quoi avec des données. C'est entièrement à vous de savoir comment le formater et ce qu'il contient. La seule exigence est que vous devez être en mesure de le lire plus tard afin de pouvoir remplir chaque ligne de votre table en cas de besoin.

Dans cet exemple, nous allons simplement définir un tableau avec des chaînes (texte) comme source de données:

Rapide

let myDataArray: [String] = ["Row one", "Row two", "Row three", "Row four", "Row five"]

Objectif c

// You'll need to define this variable as a global variable (like an @property) so that you can access it later when needed.
NSArray *myDataArray = @[@"Row one", @"Row two", @"Row three", @"Row four", @"Row five"];

Configuration de votre source de données dans votre View Controller

Assurez-vous que votre contrôleur de vue est conforme au protocole UITableViewDataSource .

Rapide

class ViewController: UIViewController, UITableViewDataSource {

Objectif c

@interface ViewController : UIViewController <UITableViewDataSource>

Dès que votre contrôleur de vue a déclaré qu'il sera conforme à la UITableViewDataSource (c'est ce que nous venons de faire ci - dessus), vous devez mettre en œuvre au moins les méthodes suivantes dans votre vue classe contrôleur:

  • tableView:numberOfRowsInSection , cela vous demande combien de lignes votre vue doit avoir.

    // Swift    
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
         return self.myDataArray.count
    }
    
  • tableView:cellForRowAtIndexPath , vous demande de créer et de renvoyer une cellule pour chaque ligne que vous avez spécifiée dans tableView:numberOfRowsInSection . Donc, si vous avez dit avoir besoin de 10 lignes, cette méthode sera appelée dix fois pour chaque ligne et vous devrez créer une cellule pour chacune de ces lignes.

    // Swift    
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
         // Create a new cell here. The cellReuseIdentifier needs to match the reuse identifier from the cell in your Storyboard
         let cell: UITableViewCell = tableView.dequeueReusableCellWithIdentifier(cellReuseIdentifier) as UITableViewCell!
    
         // Set the label on your cell to the text from your data array
         cell.textLabel?.text = self.myDataArray[indexPath.row]
         
         return cell
     }
    

AVERTISSEMENT: Vous ne pouvez PAS retourner zéro pour toutes les cellules dans cellForRowAtIndexPath: . Cela provoquera le crash de votre application et vous verrez l'erreur suivante dans la console:

Uncaught exception 'NSInternalInconsistencyException', reason: 'UITableView dataSource must return a cell from tableView:cellForRowAtIndexPath:'

Connexion de la source de données de la vue de table à votre contrôleur de vue

Vous pouvez soit le faire via le code en définissant la propriété dataSource votre table sur self sur votre contrôleur de vue. Ou vous pouvez sélectionner votre vue de table dans votre storyboard, ouvrir l'inspecteur d'attributs, sélectionner le panneau "Outlets" et faire glisser de dataSource vers votre contrôleur de vue ( REMARQUE : assurez-vous de vous connecter à UIViewCONTROLLER, pas à UIView ou à un autre objet de votre UIViewController).

Gestion des sélections de lignes

Lorsqu'un utilisateur appuie sur une ligne dans la vue de la table, vous devez généralement faire quelque chose pour y répondre. Dans de nombreuses applications, lorsque vous appuyez sur une ligne, plus d’informations sur cet élément sont affichées. Pensez à l'application Messages: lorsque vous appuyez sur la ligne affichant l'un de vos contacts, la conversation avec cette personne est alors affichée à l'écran.

Dans orer pour ce faire, vous devez vous conformer au protocole UITableViewDelegate . Cela est similaire à la conformité au protocole de source de données. Cette fois, cependant, vous l'ajouterez juste à côté de UITableViewDataSource et séparez-le par une virgule. Donc, ça devrait ressembler à ceci:

Rapide

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

Objectif c

@interface ViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>

Il n'y a aucune méthode requise pour implémenter le délégué de la vue de table. Cependant, pour gérer les sélections de lignes, vous devez utiliser la méthode suivante:

  • tableView:didSelectRowAtIndexPath , ceci est appelé chaque fois qu'une ligne est tapée, ce qui vous permet de faire quelque chose en réponse. Pour notre exemple, nous allons simplement imprimer une déclaration de confirmation dans le journal Xcode.

    // Swift    
    
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
         print("You tapped cell number \(indexPath.row).")
     }
    
    // Objective-C    
    
    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
         NSLog(@"You tapped cell number %ld.", (long)indexPath.row);
    }
    

La solution finale

Voir ci-dessous pour la configuration complète avec juste du code, aucune explication.

Rapide

import UIKit
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    // Data model: These strings will be the data for the table view cells
    let myDataArray: [String] = ["Row one", "Row two", "Row three", "Row four", "Row five"]

    // cell reuse id (cells that scroll out of view can be reused) 
    let cellReuseIdentifier = "cell"

    // don't forget to hook this up from the storyboard
    @IBOutlet var myTableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Register the table view cell class and its reuse id
        myTableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: cellReuseIdentifier)

        // This view controller itself will provide the delegate methods and row data for the table view.
        myTableView.delegate = self
        myTableView.dataSource = self
    }
    
    // number of rows in table view
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.myDataArray.count
    }
    
    // create a cell for each table view row
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        // create a new cell if needed or reuse an old one
        let cell:UITableViewCell = tableView.dequeueReusableCellWithIdentifier(cellReuseIdentifier) as UITableViewCell!

        // set the text from the data model
        cell.textLabel?.text = self.myDataArray[indexPath.row]
        
        return cell
    }
    
    // method to run when table view cell is tapped
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        print("You tapped cell number \(indexPath.row).")
    }
}

Objectif c

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController: UIViewController <UITableViewDelegate, UITableViewDataSource> {
    IBOutlet UITableView *myTableView;
    NSArray *myDataArray;
}

@end

ViewController.m

#import "ViewController.h"

// cell reuse id (cells that scroll out of view can be reused)
NSString * _Nonnull cellReuseIdentifier = @"cell";

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // Data model: These strings will be the data for the table view cells
    myDataArray = @[@"Row one", @"Row two", @"Row three", @"Row four", @"Row five"];
    
    // Register the table view cell class and its reuse id
    [myTableView registerClass:[UITableViewCell class] forCellReuseIdentifier:cellReuseIdentifier];
    
    // This view controller itself will provide the delegate methods and row data for the table view.
    myTableView.delegate = self;
    myTableView.dataSource = self;
}

// number of rows in table view
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return myDataArray.count;
}

// create a cell for each table view row
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    // create a new cell if needed or reuse an old one
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellReuseIdentifier];
        
    // set the text from the data model
    cell.textLabel.text = myDataArray[indexPath.row];
    
    return cell;
}
    
// method to run when table view cell is tapped
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"You tapped cell number %ld.", (long)indexPath.row);
}

@end