UITableview com mais de uma célula personalizada com Swift

Eu quero usar um UITableview com diferentes tableViewCells personalizados. Minhas 3 células são assim:

  • Célula1: deve ter uma imagem e um label.
  • Cell2: deve ter dois labels.
  • Cell3: deve ter um dayPicker.

Eu não quero codificar uma tag para as células. Como posso gerenciar isso no Swift? Eu tenho que codificar minha própria class para cada célula? Posso usar um tableviewController? Como posso preencher dados em células diferentes?

Eu gostaria de gerar um tableView, como um aplicativo de contato de um dispositivo iOS.

Deixe-me começar respondendo suas perguntas primeiro.

Eu tenho que codificar uma class própria para cada célula? => Sim, eu acredito que sim. Pelo menos eu faria assim.

Posso usar um tableviewController? => Sim, você pode. No entanto, você também pode ter uma visão de tabela dentro do seu View Controller.

Como posso preencher dados em células diferentes? => Dependendo das condições, você pode preencher dados em células diferentes. Por exemplo, vamos supor que você queira que suas duas primeiras linhas sejam como o primeiro tipo de célula. Então, você acabou de criar / reutilizar o primeiro tipo de célula e definir seus dados. Será mais claro quando eu mostrar as imagens da canvas, eu acho.

Deixe-me dar um exemplo com um TableView dentro de um ViewController. Depois de entender o conceito principal, você pode tentar modificar o que quiser.

Etapa 1: crie 3 TableViewCells personalizados. Eu nomeei, FirstCustomTableViewCell, SecondCustomTableViewCell, ThirdCustomTableViewCell. Você deve usar nomes mais significativos.

insira a descrição da imagem aqui

Passo 2: Vá para o Main.storyboard e arraste e solte um TableView dentro do seu View Controller. Agora, selecione a exibição de tabela e vá para o inspetor de identidade. Defina o “Prototype Cells” para 3. Aqui, você acabou de dizer ao seu TableView que você pode ter 3 tipos diferentes de células.

insira a descrição da imagem aqui

Etapa 3: Agora, selecione a primeira célula do TableView e, no inspetor de identidade, coloque “FirstCustomTableViewCell” no campo Classe personalizada e defina o identificador como “firstCustomCell” no inspetor de atributos.

insira a descrição da imagem aqui

insira a descrição da imagem aqui

Faça o mesmo para todos os outros – defina suas classs personalizadas como “SecondCustomTableViewCell” e “ThirdCustomTableViewCell”, respectivamente. Também defina os identificadores como secondCustomCell e thirdCustomCell consecutivamente.

Etapa 4: Edite as classs de células personalizadas e adicione saídas de acordo com sua necessidade. Eu editei com base na sua pergunta.

PS: Você precisa colocar os pontos de venda sob a definição de class.

Então, no FirstCustomTableViewCell.swift, sob o

class FirstCustomTableViewCell: UITableViewCell { 

você colocaria suas saídas de label e visualização de imagem.

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

e no SecondCustomTableViewCell.swift, adicione os dois labels

 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) } } 

e o ThirdCustomTableViewCell.swift deve ser semelhante a

 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) } } 

Passo 5: No seu ViewController, crie um Outlet para o seu TableView e defina a conexão do storyboard. Além disso, você precisa adicionar o UITableViewDelegate e o UITableViewDataSource na definição de class como a lista de protocolos. Então, sua definição de class deve parecer

 class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource { 

Depois disso, anexe o UITableViewDelegate e o UITableViewDatasource de sua exibição de tabela ao seu controlador. Neste ponto o seu viewController.swift deve parecer

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

PS: Se você fosse usar um TableViewController em vez de um TableView dentro de um ViewController, você poderia ter pulado esta etapa.

Etapa 6: arraste e solte as visualizações de imagem e os labels em sua célula de acordo com a class Cell. e, em seguida, fornecer conexão para suas saídas do storyboard.

Etapa 7: Agora, escreva os methods obrigatórios do UITableViewDatasource no controlador de exibição.

 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 + atualização com código mínimo

Conceito básico: crie uma exibição de tabela com protótipos de células dinâmicas. Atribuir identificador e criar class de célula de visualização de tabela personalizada para cada protótipo de célula. Inicie e mostre células personalizadas no método delegado da visão de tabela.

1. Crie células no storyboard

Arraste um tableView para o controlador de visualização, adicione células protótipo a ele e, em seguida, solte o elemento da interface do usuário nas células de exibição de tabela, adicione a restrição adequadamente, se necessário.

insira a descrição da imagem aqui

2. Crie classs UITableViewCell personalizadas

Adicione o seguinte código ao seu projeto. Eu estou colocando-o logo acima da class de controle de visualização.

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

3. Atribuir class e identificador personalizados aos protótipos das células

Para cada um dos protótipos de célula no storyboard, atribua a class personalizada criada na etapa 2 e insira um identificador exclusivo.

insira a descrição da imagem aqui

4. Conecte os elementos da interface do usuário ao código rápido

Controle arrastar a visualização de tabela e conectar-se à class do controlador de visualização. Controle arrastar os elementos da interface do usuário que são adicionados aos protótipos de célula na etapa 1 e conectar-se à class de célula de exibição de tabela correspondente.

insira a descrição da imagem aqui

5. Adicione o código para visualizar o controlador e controlar a exibição da tabela

Torne seu controlador de visualização compatível com o delegado da visualização de tabela

 class YourViewController: UIViewController, UITableViewDataSource, UITableViewDelegate 

No viewDidLoad , configure o delegate e a origem de dados da visualização de tabela.

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

Por fim, adicione dois methods delegates para controlar sua exibição de tabela, conforme o requisito mínimo.

 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. Experimente 🙂

insira a descrição da imagem aqui

As respostas acima são as melhores respostas, mas existem TONELADAS de motivos para resolver esse problema. Aqui está outra solução em potencial para qualquer um com esse problema:

Meu problema era que eu estava seguindo para a class ViewController e não para a visualização de storyboard. Então minha referência à célula do storyboard não tinha sentido, já que o storyboard não estava sendo usado.

Eu estava fazendo isso:

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

E eu precisava fazer algo assim:

 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) 

Espero que isso ajude alguém.

UITableViewController está herdando o UIViewController que já possui UITableviewDataSource & UITableviewDelegate mapeado em si mesmo.

Você pode subclassificar o UITableViewController ou usar um TableView dentro do seu ViewController . Depois disso, você deve implementar os methods necessários ( cellForRowAtIndexPath and numberOfRowsInSection ) que são declarados no UITableviewDataSource .

Também no storyboard, você precisa criar protótipos de células com um ID único.

Existem tipos básicos de célula, com (título, subtítulo, por exemplo) – você também pode usá-los se não precisar de configuração especial.

Então, para o selecionador, sim, você precisa criar sua própria célula personalizada. Crie o selecionador de data de armazenamento de class UITableViewCell personalizado e certifique-se de usar o delegado para enviar de volta o resultado desejado para o ViewController .