UITableview avec plus d’une cellule personnalisée avec Swift

Je souhaite utiliser une UITableview avec différentes tableViewCells personnalisées. Mes 3 cellules sont en tant que telles:

  • Cell1: devrait avoir une image et une étiquette.
  • Cell2: devrait avoir deux étiquettes.
  • Cell3: devrait avoir un jour Picker.

Je ne veux pas coder une balise pour les cellules. Comment puis-je gérer cela dans Swift. Dois-je coder ma propre classe pour chaque cellule? Puis-je utiliser un tableviewController? Comment puis-je remplir des données dans différentes cellules?

Je voudrais générer une tableView, comme une application de contact d’un appareil iOS.

Permettez-moi de commencer par répondre à vos questions en premier.

Dois-je coder une classe propre pour chaque cellule? => Oui, je le crois. Au moins, je ferais comme ça.

Puis-je utiliser un tableviewController? => Oui, vous pouvez. Cependant, vous pouvez également avoir une vue tableau dans votre View Controller.

Comment puis-je remplir des données dans différentes cellules? => Selon les conditions, vous pouvez renseigner des données dans différentes cellules. Par exemple, supposons que vous souhaitiez que vos deux premières lignes ressemblent au premier type de cellules. Ainsi, il vous suffit de créer / réutiliser le premier type de cellules et de définir ses données. Ce sera plus clair quand je vous montrerai les captures d’écran, je suppose.

Laissez-moi vous donner un exemple avec une TableView dans un ViewController. Une fois que vous avez compris le concept principal, vous pouvez alors essayer de le modifier.

Étape 1: Créez 3 ShellViewView personnalisées. Je l’ai nommé FirstCustomTableViewCell, SecondCustomTableViewCell, ThirdCustomTableViewCell. Vous devez utiliser des noms plus significatifs.

entrer la description de l'image ici

Etape 2: Allez dans le main.storyboard et faites glisser une TableView dans votre View Controller. Maintenant, sélectionnez la vue de table et accédez à l’inspecteur d’identité. Définissez les “cellules prototype” sur 3. Vous venez de dire à votre table que vous pouvez avoir 3 types de cellules différents.

entrer la description de l'image ici

Étape 3: Maintenant, sélectionnez la 1ère cellule de votre TableView et dans l’inspecteur d’identité, placez “FirstCustomTableViewCell” dans le champ Classe personnalisée, puis définissez l’identificateur comme “firstCustomCell” dans l’inspecteur d’atsortingbut.

entrer la description de l'image ici

entrer la description de l'image ici

Faites la même chose pour tous les autres: définissez respectivement leurs classes personnalisées comme “SecondCustomTableViewCell” et “ThirdCustomTableViewCell”. Définissez également les identificateurs comme secondCustomCell et thirdCustomCell consécutivement.

Étape 4: Modifiez les classes de cellules personnalisées et ajoutez des points de vente en fonction de vos besoins. Je l’ai édité en fonction de votre question.

PS: Vous devez placer les points de vente sous la définition de la classe.

Donc, dans le FirstCustomTableViewCell.swift, sous le

class FirstCustomTableViewCell: UITableViewCell { 

vous placeriez vos points de vente d’étiquettes et d’images.

  @IBOutlet weak var myImageView: UIImageView! @IBOutlet weak var myLabel: UILabel! 

et dans le SecondCustomTableViewCell.swift, ajoutez les deux étiquettes comme-

 import UIKit class SecondCustomTableViewCell: UITableViewCell { @IBOutlet weak var myLabel_1: UILabel! @IBOutlet weak var myLabel_2: UILabel! override func awakeFromNib() { super.awakeFromNib() } override func setSelected(selected: Bool, animated: Bool) { super.setSelected(selected, animated: animated) } } 

et le ThirdCustomTableViewCell.swift devrait ressembler à –

 import UIKit class ThirdCustomTableViewCell: UITableViewCell { @IBOutlet weak var dayPicker: UIDatePicker! override func awakeFromNib() { super.awakeFromNib() } override func setSelected(selected: Bool, animated: Bool) { super.setSelected(selected, animated: animated) } } 

Étape 5: Dans votre ViewController, créez un Outlet pour votre TableView et définissez la connexion à partir du storyboard. En outre, vous devez append UITableViewDelegate et UITableViewDataSource dans la définition de classe en tant que liste de protocoles. Donc, votre définition de classe devrait ressembler à –

 class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource { 

Après cela, attachez UITableViewDelegate et UITableViewDatasource de votre vue de table à votre contrôleur. À ce stade, votre viewController.swift devrait ressembler à:

 import UIKit class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource { @IBOutlet weak var tableView: UITableView! override func viewDidLoad() { super.viewDidLoad() } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } } 

PS: Si vous utilisiez un TableViewController plutôt qu’une TableView dans un ViewController, vous auriez pu ignorer cette étape.

Étape 6: Faites glisser et déposez les vues et les étiquettes de l’image dans votre cellule en fonction de la classe Cell. et ensuite fournir une connexion à leurs points de vente à partir de storyboard.

Étape 7: Maintenant, écrivez les méthodes requirejses par UITableViewDatasource dans le contrôleur de vue.

 import UIKit class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource { @IBOutlet weak var tableView: UITableView! override func viewDidLoad() { super.viewDidLoad() } func numberOfSectionsInTableView(tableView: UITableView) -> Int { return 1 } func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 3 } func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { if indexPath.row == 0 { let cell: UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "firstCustomCell") //set the data here return cell } else if indexPath.row == 1 { let cell: UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "secondCustomCell") //set the data here return cell } else { let cell: UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "thirdCustomCell") //set the data here return cell } } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } } 

Swift 3.0 + mise à jour avec code minimum

Concept de base: créer une vue de table avec des prototypes de cellules dynamics. Atsortingbuez un identifiant et créez une classe de cellules de vue de table personnalisée pour chaque prototype de cellule. Lancer et afficher des cellules personnalisées dans la méthode de délégation de la vue de table.

1. Créer des cellules sur le storyboard

Faites glisser une tableView vers votre contrôleur de vue, ajoutez-y des cellules prototypes, puis déposez l’élément de l’interface utilisateur dans les cellules de votre vue de table, ajoutez correctement la contrainte si nécessaire.

entrer la description de l'image ici

2. Créez des classes UITableViewCell personnalisées

Ajoutez le code suivant à votre projet. Je le mets juste au-dessus de la classe du contrôleur de vue.

 class FirstTableCell: UITableViewCell { } class SecondTableCell: UITableViewCell { } class ThirdTableCell: UITableViewCell { } 

3. Atsortingbuer une classe personnalisée et un identifiant aux prototypes de cellules

Pour chacun des prototypes de cellule dans le storyboard, atsortingbuez la classe personnalisée créée à partir de l’étape 2, puis entrez un identificateur unique.

entrer la description de l'image ici

4. Connectez les éléments de l’interface utilisateur à un code rapide

Contrôlez la vue de la table et connectez-vous à la classe du contrôleur de vue. Faites glisser les éléments d’interface utilisateur ajoutés aux prototypes de cellules à l’étape 1 et connectez-vous à la classe de cellules de vue de table correspondante.

entrer la description de l'image ici

5. Ajoutez du code pour afficher le contrôleur et contrôlez la vue de table

Rendez votre contrôleur de vue conforme au délégué de vue de table

 class YourViewController: UIViewController, UITableViewDataSource, UITableViewDelegate 

Dans viewDidLoad , configurez le délégué et la source de données de la vue de table.

 override func viewDidLoad() { super.viewDidLoad() self.tableView.dataSource = self self.tableView.delegate = self } 

Enfin, ajoutez deux méthodes de délégation pour contrôler votre vue de table, conformément aux exigences minimales.

 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 3 } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { if indexPath.row == 0 { let cell = tableView.dequeueReusableCell(withIdentifier: "firstTableCell") as! FirstTableCell // Set up cell.label return cell } else if indexPath.row == 1 { let cell = tableView.dequeueReusableCell(withIdentifier: "secondTableCell") as! SecondTableCell // Set up cell.button return cell } else { let cell = tableView.dequeueReusableCell(withIdentifier: "thirdTableCell") as! ThirdTableCell // Set up cell.textField return cell } } 

6. Essayez-le 🙂

entrer la description de l'image ici

Les réponses ci-dessus sont les meilleures réponses, mais il y a des tonnes de raisons pour obtenir ce problème. Voici une autre solution potentielle pour quiconque ayant ce problème:

Mon problème était que je me rendais à la classe ViewController et non à la vue du storyboard. Donc, ma référence à la cellule de storyboard était sans signification, puisque le storyboard n’était pas utilisé.

Je faisais ça:

 let viewControllerB = SubViewController() viewControllerB.passedData = diseases[indexPath.row].name navigationController?.pushViewController(viewControllerB, animated: true) 

Et j’avais besoin de faire quelque chose comme ça:

 let storyBoard : UIStoryboard = UIStoryboard(name: "Main", bundle:nil) let nextViewController = storyBoard.instantiateViewController(withIdentifier: "SubViewStoryboardController") as! SubViewController nextViewController.passedData = diseases[indexPath.row].name self.present(nextViewController, animated:true, completion:nil) 

J’espère que cela aide quelqu’un.

UITableViewController hérite de UIViewController qui a déjà UITableviewDataSource et UITableviewDelegate .

Vous pouvez sous- UITableViewController ou utiliser une TableView dans votre ViewController . Après cela, vous devez implémenter les méthodes requirejses ( cellForRowAtIndexPath and numberOfRowsInSection ) qui sont déclarées dans UITableviewDataSource .

Toujours dans le storyboard, vous devez créer des prototypes de cellules avec un identifiant unique.

Il existe des types de base de cellules, avec (titre, sous-titre par exemple) – vous pouvez également les utiliser si vous n’avez pas besoin d’une configuration spéciale.

Donc, pour le sélecteur, oui, vous devez créer votre propre cellule personnalisée. Créez le sélecteur de date de conservation de classe UITableViewCell personnalisé et veillez à utiliser delegate pour renvoyer le résultat souhaité dans votre ViewController .