UITableview avec plusieurs cellules personnalisées avec Swift
Je veux utiliser un UITableview avec différentes tablesViewCells personnalisées. Mes 3 cellules sont comme telles:
- Cell1: devrait avoir une image et une étiquette.
- Cell2: devrait avoir deux étiquettes.
- Cell3: devrait avoir un dayPicker.
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 renseigner des données dans différentes cellules?
Je souhaite 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 bien. Au moins, je le ferais de cette façon.
Puis-je utiliser un tableviewController? => Oui, vous le pouvez. Cependant, vous pouvez également avoir une vue sous forme de tableau dans votre View Controller.
Comment puis-je renseigner 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, vous créez/réutilisez le premier type de cellules et définissez ses données. Ce sera plus clair, je suppose, quand je vous montrerai les captures d'écran.
Laissez-moi vous donner un exemple avec un TableView à l'intérieur d'un ViewController. Une fois que vous avez compris le concept principal, vous pouvez essayer et le modifier comme vous le souhaitez.
Étape 1: Créez 3 TableViewCells personnalisées. Je l'ai nommé FirstCustomTableViewCell, SecondCustomTableViewCell, ThirdCustomTableViewCell. Vous devriez utiliser des noms plus significatifs.
Étape 2: Allez dans Main.storyboard et faites glisser un TableView dans votre View Controller. Sélectionnez maintenant la vue tableau et accédez à l'inspecteur d'identité. Définissez les "Cellules prototypes" sur 3. Ici, vous venez d’annoncer à votre TableView que vous pouvez avoir 3 types de cellules différents.
Étape 3: Maintenant, sélectionnez la 1ère cellule dans votre TableView et dans l'inspecteur d'identité, mettez "FirstCustomTableViewCell" dans le champ Classe personnalisée, puis définissez l'identifiant sur "firstCustomCell" dans l'inspecteur d'attributs.
Faites la même chose pour tous les autres. Définissez leurs classes personnalisées comme "SecondCustomTableViewCell" et "ThirdCustomTableViewCell" respectivement. Définissez également les identifiants comme secondCustomCell et thirdCustomCell consécutivement.
Étape 4: Modifiez les classes de cellules personnalisées et ajoutez des prises en fonction de vos besoins. Je l'ai édité en fonction de votre question.
P.S: Vous devez mettre les points de vente sous la définition de classe.
Ainsi, dans le FirstCustomTableViewCell.Swift, sous le
class FirstCustomTableViewCell: UITableViewCell {
vous mettriez votre étiquette et vos points de vue.
@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 point de vente pour votre TableView et définissez la connexion à partir du storyboard. En outre, vous devez ajouter 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, associez UITableViewDelegate et UITableViewDatasource de votre vue 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()
}
}
P.S: Si vous utilisiez un TableViewController plutôt qu’un TableView dans un ViewController, vous auriez pu sauter cette étape.
Étape 6: Faites glisser les vues et les étiquettes d’image dans votre cellule, en fonction de la classe Cell. et ensuite fournir une connexion à leurs points de vente de storyboard.
Étape 7: Maintenant, écrivez les méthodes requises 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 un code minimum
Concept de base: Créez une vue sous forme de tableau avec des prototypes de cellules dynamiques. Attribuez un identifiant et créez une classe de cellules de vue de tableau personnalisée pour chaque prototype de cellule. Initiez et affichez des cellules personnalisées dans la méthode de délégation de la vue tableau.
1. Créer des cellules sur le storyboard
Faites glisser un tableView vers votre contrôleur de vue, ajoutez-y des cellules prototypes, puis déposez un élément d'interface utilisateur dans les cellules de votre vue tableau, ajoutez la contrainte correctement, si nécessaire.
2. Créer 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. Attribuer une classe et un identifiant personnalisés aux prototypes de cellules
Pour chacun des prototypes de cellules dans le storyboard, affectez la classe personnalisée créée à partir de l'étape 2, puis entrez un identificateur unique.
4. Connecter des éléments d'interface utilisateur à Swift code
Contrôle, faites glisser la vue tabulaire et connectez-vous à la classe de contrôleur de vue. Faites glisser les éléments de l'interface utilisateur ajoutés aux prototypes de cellules à l'étape 1 et connectez-vous à la classe de cellules de la vue tableau correspondante.
5. Ajouter du code pour afficher le contrôleur et contrôler la vue de la table
Rendre 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 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 tableau, conformément à la configuration minimale requise.
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. Faites un essai:)
Les réponses ci-dessus sont les meilleures, mais il existe une tonne de raisons pour résoudre ce problème. Voici une autre solution potentielle pour quiconque ayant ce problème:
Mon problème était que je passais à la classe ViewController et non à la vue Storyboard. Donc, ma référence à la cellule du storyboard n'avait pas de sens, puisque le storyboard n'était pas utilisé.
Je faisais ceci:
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 ça aide quelqu'un.