Como implementar cabeçalhos e rodapés de seção de exibição de tabela personalizada com storyboard

Sem usar um storyboard, poderíamos simplesmente arrastar um UIViewpara a tela, colocá-lo em um layout e depois defini-lo nos métodos tableView:viewForHeaderInSectionou tableView:viewForFooterInSectiondelegar.

Como podemos fazer isso com um StoryBoard em que não podemos arrastar um UIView para a tela

Eu sei que essa pergunta foi para o iOS 5, mas para o benefício de futuros leitores, observe que o iOS 6 eficaz agora podemos usar em dequeueReusableHeaderFooterViewWithIdentifiervez de dequeueReusableCellWithIdentifier.

Então viewDidLoad, ligue para registerNib:forHeaderFooterViewReuseIdentifier:ou registerClass:forHeaderFooterViewReuseIdentifier:. Então viewForHeaderInSection, ligue tableView:dequeueReusableHeaderFooterViewWithIdentifier:. Você não usa um protótipo de célula com essa API (é uma visão baseada em NIB ou uma visão criada programaticamente), mas essa é a nova API para cabeçalhos e rodapés desenfileirados.

Basta usar uma célula protótipo como cabeçalho e / ou rodapé da seção.

• adicione uma célula extra e coloque os elementos desejados nela.
• defina o identificador para algo específico (no meu caso, SectionHeader)
• implementar o tableView:viewForHeaderInSection:método ou o tableView:viewForFooterInSection:método
• use [tableView dequeueReusableCellWithIdentifier:]para obter o cabeçalho
• implementar o tableView:heightForHeaderInSection:método

-(UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    static NSString *CellIdentifier = @"SectionHeader"; 
    UITableViewCell *headerView = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (headerView == nil){
        [NSException raise:@"headerView == nil.." format:@"No cells with matching CellIdentifier loaded from your storyboard"];
    }
    return headerView;
}  

Editar: Como alterar o título do cabeçalho (pergunta comentada):

1. Adicione um rótulo à célula do cabeçalho
2. defina a etiqueta da etiqueta para um número específico (por exemplo, 123)
3. No seu tableView:viewForHeaderInSection:método, obtenha o rótulo chamando:

    UILabel *label = (UILabel *)[headerView viewWithTag:123]; 

4. Agora você pode usar o rótulo para definir um novo título:

    [label setText:@"New Title"];

No iOS 6.0 e superior, as coisas mudaram com a nova dequeueReusableHeaderFooterViewWithIdentifierAPI.

Escrevi um guia (testado no iOS 9), que pode ser resumido da seguinte forma:

1. Subclasse UITableViewHeaderFooterView
2. Crie Nib com a visualização de subclasse e adicione 1 visualização de contêiner que contém todas as outras visualizações no cabeçalho / rodapé
3. Registre a ponta em viewDidLoad
4. Implementar viewForHeaderInSectione usar dequeueReusableHeaderFooterViewWithIdentifierpara recuperar o cabeçalho / rodapé

Eu consegui trabalhar no iOS7 usando uma célula protótipo no storyboard. Eu tenho um botão na visualização de cabeçalho de seção personalizada que aciona uma sequência configurada no storyboard.

Comece com a solução do Tieme

Como aponta pedro.m, o problema é que tocar no cabeçalho da seção faz com que a primeira célula da seção seja selecionada.

Como Paul Von aponta, isso é corrigido retornando o contentView da célula em vez da célula inteira.

No entanto, como Hons aponta, uma pressão longa no cabeçalho da seção travará o aplicativo.

A solução é remover qualquer gestor de reconhecimento do contentView.

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
     static NSString *CellIdentifier = @"SectionHeader";
     UITableViewCell *sectionHeaderView = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

     while (sectionHeaderView.contentView.gestureRecognizers.count) {
         [sectionHeaderView.contentView removeGestureRecognizer:[sectionHeaderView.contentView.gestureRecognizers objectAtIndex:0]];
     }

     return sectionHeaderView.contentView; }

Se você não estiver usando gestos nas visualizações do cabeçalho da seção, esse pequeno truque parece ser feito.

Se você usa storyboards, pode usar uma célula protótipo na tableview para fazer o layout da visualização do cabeçalho. Defina um ID exclusivo e viewForHeaderInSection. Você pode desenfileirar a célula com esse ID e convertê-lo em um UIView.

Se você precisar de uma implementação rápida, siga as instruções na resposta aceita e, em seguida, no UITableViewController, implemente os seguintes métodos:

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    return tableView.dequeueReusableCell(withIdentifier: "CustomHeader")
}

override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 75
}

A solução que eu criei é basicamente a mesma solução usada antes da introdução dos storyboards.

Crie um novo arquivo de classe de interface vazio. Arraste um UIView para a tela, layout conforme desejado.

Carregue a ponta manualmente, atribua à seção apropriada de cabeçalho / rodapé nos métodos delegados viewForHeaderInSection ou viewForFooterInSection.

Eu esperava que a Apple simplificasse esse cenário com storyboards e continuasse procurando uma solução melhor ou mais simples. Por exemplo, cabeçalhos e rodapés de tabelas personalizados são fáceis de adicionar.

Ao retornar o contentView da célula, você terá 2 problemas:

1. acidente relacionado a gestos
2. você não reutiliza o contentView (sempre que está de viewForHeaderInSectionplantão, está criando uma nova célula)

Solução:

Classe de wrapper para cabeçalho da tabela \ rodapé. É apenas um recipiente, herdado de UITableViewHeaderFooterView, que mantém a célula dentro

https://github.com/Magnat12/MGTableViewHeaderWrapperView.git

Registre a classe no seu UITableView (por exemplo, em viewDidLoad)

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.tableView registerClass:[MGTableViewHeaderWrapperView class] forHeaderFooterViewReuseIdentifier:@"ProfileEditSectionHeader"];
}

No seu UITableViewDelegate:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    MGTableViewHeaderWrapperView *view = [tableView dequeueReusableHeaderFooterViewWithIdentifier:@"ProfileEditSectionHeader"];

    // init your custom cell
    ProfileEditSectionTitleTableCell *cell = (ProfileEditSectionTitleTableCell * ) view.cell;
    if (!cell) {
        cell = [tableView dequeueReusableCellWithIdentifier:@"ProfileEditSectionTitleTableCell"];
        view.cell = cell;
    }

    // Do something with your cell

    return view;
}

Eu costumava fazer o seguinte para criar vistas de cabeçalho / rodapé preguiçosamente:

• Adicione um controlador de exibição de forma livre para o cabeçalho / rodapé da seção ao storyboard
• Manipular todas as coisas para o cabeçalho no controlador de exibição
• Na tabela, o controlador de visualização fornece uma matriz mutável de controladores de visualização para os cabeçalhos / rodapés da seção preenchidos novamente com [NSNull null]
• Em viewForHeaderInSection / viewForFooterInSection se o controlador de exibição ainda não existir, crie-o com storyboards instantiateViewControllerWithIdentifier, lembre-se dele na matriz e retorne a exibição de controladores de exibição

Eu estive com problemas em um cenário em que o Header nunca foi reutilizado, mesmo executando todas as etapas adequadas.

Portanto, como uma dica para todos que desejam alcançar a situação de mostrar seções vazias (0 linhas), lembre-se de que:

dequeueReusableHeaderFooterViewWithIdentifier não reutilizará o cabeçalho até você retornar pelo menos uma linha

Espero que ajude

Para acompanhar a sugestão de Damon , aqui está como tornei o cabeçalho selecionável como uma linha normal com um indicador de divulgação.

Adicionei um botão subclassificado de UIButton (nome da subclasse "ButtonWithArgument") à célula protótipo do cabeçalho e excluí o texto do título (o texto em negrito "Título" é outro UILabel na célula protótipo)

em seguida, defina o botão para a visualização inteira do cabeçalho e adicione um indicador de divulgação com o truque de Avario

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    static NSString *CellIdentifier = @"PersonGroupHeader";
    UITableViewCell *headerView = (UITableViewCell *) [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if(headerView == nil)
    {
        [NSException raise:@"headerView == nil, PersonGroupTableViewController" format:[NSString stringWithFormat:@"Storyboard does not have prototype cell with identifier %@",CellIdentifier]];
    }

    //  https://stackoverflow.com/a/24044628/3075839
    while(headerView.contentView.gestureRecognizers.count)
    {
        [headerView.contentView removeGestureRecognizer:[headerView.contentView.gestureRecognizers objectAtIndex:0]];
    }


    ButtonWithArgument *button = (ButtonWithArgument *)[headerView viewWithTag:4];
    button.frame = headerView.bounds; // set tap area to entire header view
    button.argument = [[NSNumber alloc] initWithInteger:section]; // from ButtonWithArguments subclass
    [button addTarget:self action:@selector(headerViewTap:) forControlEvents:UIControlEventTouchUpInside];

    // https://stackoverflow.com/a/20821178/3075839
    UITableViewCell *disclosure = [[UITableViewCell alloc] init];
    disclosure.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
    disclosure.userInteractionEnabled = NO;
    disclosure.frame = CGRectMake(button.bounds.origin.x + button.bounds.size.width - 20 - 5, // disclosure 20 px wide, right margin 5 px
          (button.bounds.size.height - 20) / 2,
          20,
          20);
    [button addSubview:disclosure];

    // configure header title text

    return headerView.contentView;
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 35.0f;
}

-(void) headerViewTap:(UIGestureRecognizer *)gestureRecognizer;
{
    NSLog(@"header tap");
    NSInteger section = ((NSNumber *)sender.argument).integerValue;
    // do something here
}

ButtonWithArgument.h

#import <UIKit/UIKit.h>

@interface ButtonWithArgument : UIButton
@property (nonatomic, strong) NSObject *argument;
@end

ButtonWithArgument.m

#import "ButtonWithArgument.h"
@implementation ButtonWithArgument
@end

Você deve usar a solução do Tieme como base, mas esqueça oviewWithTag: abordagens suspeitas e outras, em vez disso, tente recarregar o cabeçalho (recarregando essa seção).

Então, depois de exibir sua visualização de cabeçalho de célula personalizada com todas as AutoLayoutcoisas sofisticadas , basta desenfileirá-la e retornar o contentView após a configuração, como:

-(UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
 static NSString *CellIdentifier = @"SectionHeader"; 

    SettingsTableViewCell *sectionHeaderCell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    sectionHeaderCell.myPrettyLabel.text = @"Greetings";
    sectionHeaderCell.contentView.backgroundColor = [UIColor whiteColor]; // don't leave this transparent

    return sectionHeaderCell.contentView;
}  

Que tal uma solução em que o cabeçalho é baseado em uma matriz de exibição:

class myViewController: UIViewController {
    var header: [UILabel] = myStringArray.map { (thisTitle: String) -> UILabel in
        let headerView = UILabel()
            headerView.text = thisTitle
    return(headerView)
}

Em seguida no delegado:

extension myViewController: UITableViewDelegate {
    func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        return(header[section])
    }
}

1. Adicione célula StoryBoarde definareuseidentified

   

2. Código

   class TP_TaskViewTableViewSectionHeader: UITableViewCell{
   }
   

   e

   

3. Usar:

   func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
       let header = tableView.dequeueReusableCell(withIdentifier: "header", for: IndexPath.init(row: 0, section: section))
       return header
   }
   

Semelhante à resposta laszlo, mas você pode reutilizar a mesma célula protótipo para as células da tabela e a célula do cabeçalho da seção. Adicione as duas primeiras funções abaixo à sua subclasse UIViewController

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let cell = tableView.dequeueReusableCell(withIdentifier: "DataCell") as! DataCell
    cell.data1Label.text = "DATA KEY"
    cell.data2Label.text = "DATA VALUE"
    return cell
}

override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 75
}

// Example of regular data cell dataDelegate to round out the example
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "DataCell", for: indexPath) as! PlayerCell

    cell.data1Label.text = "\(dataList[indexPath.row].key)"
    cell.data2Label.text = "\(dataList[indexPath.row].value)"
    return cell
}

Aqui está a resposta de @Vitaliy Gozhenko , em Swift.
Para resumir, você criará um UITableViewHeaderFooterView que contém um UITableViewCell. Este UITableViewCell será "dequeuable" e você poderá projetá-lo em seu storyboard.

1. Crie uma classe UITableViewHeaderFooterView

   class CustomHeaderFooterView: UITableViewHeaderFooterView {
   var cell : UITableViewCell? {
       willSet {
           cell?.removeFromSuperview()
       }
       didSet {
           if let cell = cell {
               cell.frame = self.bounds
               cell.autoresizingMask = [UIViewAutoresizing.FlexibleHeight, UIViewAutoresizing.FlexibleWidth]
               self.contentView.backgroundColor = UIColor .clearColor()
               self.contentView .addSubview(cell)
           }
       }
   }
   

2. Conecte seu tableview com esta classe na sua função viewDidLoad:

   self.tableView.registerClass(CustomHeaderFooterView.self, forHeaderFooterViewReuseIdentifier: "SECTION_ID")
   

3. Ao solicitar um cabeçalho de seção, desenfileire um CustomHeaderFooterView e insira uma célula nele

   func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
       let view = self.tableView.dequeueReusableHeaderFooterViewWithIdentifier("SECTION_ID") as! CustomHeaderFooterView
       if view.cell == nil {
           let cell = self.tableView.dequeueReusableCellWithIdentifier("Cell")
           view.cell = cell;
       }
   
       // Fill the cell with data here
   
       return view;
   }