Come implementare le intestazioni e i piè di pagina della sezione Vista tabella personalizzata con Storyboard

Senza usare uno storyboard, potremmo semplicemente trascinare un oggetto UIViewsulla tela, disporlo e quindi impostarlo nei metodi tableView:viewForHeaderInSectiono tableView:viewForFooterInSectiondelegare.

Come possiamo ottenere questo risultato con uno StoryBoard in cui non possiamo trascinare un UIView sulla tela

So che questa domanda era per iOS 5, ma a beneficio dei futuri lettori, nota che iOS 6 efficace ora possiamo usare al dequeueReusableHeaderFooterViewWithIdentifierposto di dequeueReusableCellWithIdentifier.

Quindi viewDidLoad, chiama registerNib:forHeaderFooterViewReuseIdentifier:o registerClass:forHeaderFooterViewReuseIdentifier:. Quindi viewForHeaderInSection, chiama tableView:dequeueReusableHeaderFooterViewWithIdentifier:. Non usi un prototipo di cella con questa API (è una vista basata su NIB o una vista creata a livello di programmazione), ma questa è la nuova API per intestazioni e piè di pagina dequeued.

Basta usare una cella prototipo come intestazione di sezione e / o piè di pagina.

• aggiungi una cella in più e inserisci gli elementi desiderati in essa.
• impostare l'identificatore su qualcosa di specifico (nel mio caso SectionHeader)
• implementare il tableView:viewForHeaderInSection:metodo o il tableView:viewForFooterInSection:metodo
• usare [tableView dequeueReusableCellWithIdentifier:]per ottenere l'intestazione
• implementare il tableView:heightForHeaderInSection:metodo

-(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;
}  

Modifica: come modificare il titolo dell'intestazione (domanda commentata):

1. Aggiungi un'etichetta alla cella dell'intestazione
2. imposta il tag dell'etichetta su un numero specifico (es. 123)
3. Nel tuo tableView:viewForHeaderInSection:metodo ottieni l'etichetta chiamando:

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

4. Ora puoi usare l'etichetta per impostare un nuovo titolo:

    [label setText:@"New Title"];

In iOS 6.0 e versioni successive, le cose sono cambiate con la nuova dequeueReusableHeaderFooterViewWithIdentifierAPI.

Ho scritto una guida (testata su iOS 9), che può essere riassunta come tale:

1. sottoclasse UITableViewHeaderFooterView
2. Crea pennino con la vista della sottoclasse e aggiungi 1 vista contenitore che contiene tutte le altre viste nell'intestazione / piè di pagina
3. Registrare il pennino in viewDidLoad
4. Implementare viewForHeaderInSectione utilizzare dequeueReusableHeaderFooterViewWithIdentifierper ripristinare l'intestazione / piè di pagina

L'ho fatto funzionare in iOS7 usando una cellula prototipo nello storyboard. Ho un pulsante nella vista intestazione della sezione personalizzata che attiva un seguito impostato nello storyboard.

Inizia con la soluzione di Tieme

Come sottolinea pedro.m, il problema è che toccando l'intestazione della sezione si seleziona la prima cella della sezione.

Come sottolinea Paul Von, questo problema viene risolto restituendo contentView della cella anziché l'intera cella.

Tuttavia, come sottolineato da Hons, una lunga pressione sull'intestazione della sezione provoca l'arresto anomalo dell'app.

La soluzione è rimuovere qualsiasi gestoRecognizer da 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 non stai usando i gesti nelle viste dell'intestazione della sezione, questo piccolo trucco sembra averlo fatto.

Se usi gli storyboard, puoi utilizzare una cella prototipo nella vista tabella per impaginare la vista intestazione. Imposta un ID univoco e viewForHeaderInSection puoi dequeue la cella con quell'ID e trasmetterlo a una vista UIV.

Se hai bisogno di un'implementazione rapida di questo segui le indicazioni sulla risposta accettata e poi in UITableViewController implementa i seguenti metodi:

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
}

La soluzione che ho trovato è sostanzialmente la stessa soluzione utilizzata prima dell'introduzione degli storyboard.

Creare un nuovo file di classe di interfaccia vuoto. Trascina un UIView sulla tela, layout come desiderato.

Caricare manualmente il pennino, assegnare alla sezione intestazione / piè di pagina appropriata nei metodi delegati viewForHeaderInSection o viewForFooterInSection.

Speravo che Apple semplificasse questo scenario con gli storyboard e continuasse a cercare una soluzione migliore o più semplice. Ad esempio, le intestazioni e i piè di pagina personalizzati della tabella sono semplici da aggiungere.

Quando restituisci il contenuto della cella Visualizza avrai 2 problemi:

1. incidente legato ai gesti
2. non riutilizzare contentView (ogni volta che si viewForHeaderInSectionchiama, si crea una nuova cella)

Soluzione:

Classe wrapper per l'intestazione della tabella \ piè di pagina. È solo un contenitore, ereditato da UITableViewHeaderFooterView, che contiene la cellula all'interno

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

Registrare la classe in UITableView (ad esempio in viewDidLoad)

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

Nel tuo 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;
}

In passato ho usato pigramente le visualizzazioni di intestazione / piè di pagina:

• Aggiungi un controller di visualizzazione a mano libera per l'intestazione / piè di pagina della sezione nello storyboard
• Gestisci tutte le cose per l'intestazione nel controller di visualizzazione
• Nel controller della vista tabella fornire un array mutabile di controller di vista per le intestazioni / piè di pagina delle sezioni ripopolate con [NSNull null]
• In viewForHeaderInSection / viewForFooterInSection se il controller della vista non esiste ancora, crealo con gli storyboard istanziatiViewControllerWithIdentifier, ricordalo nell'array e restituisci la vista dei controller della vista

Sono stato nei guai in uno scenario in cui Header non è mai stato riutilizzato nemmeno facendo tutti i passi giusti.

Quindi, come nota di suggerimento per tutti coloro che vogliono raggiungere la situazione di mostra sezioni vuote (0 righe), avvisa che:

dequeueReusableHeaderFooterViewWithIdentifier non riutilizzerà l'intestazione finché non si restituisce almeno una riga

Spero che sia d'aiuto

Per dare seguito al suggerimento di Damon , ecco come ho reso l'intestazione selezionabile proprio come una riga normale con un indicatore di divulgazione.

Ho aggiunto un pulsante subclassato da UIButton (nome della sottoclasse "ButtonWithArgument") alla cella del prototipo dell'intestazione e cancellato il testo del titolo (il testo in grassetto "Title" è un altro UILabel nella cella del prototipo)

quindi imposta il pulsante sull'intera vista dell'intestazione e aggiunge un indicatore di divulgazione con il trucco di 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

Dovresti usare la soluzione di Tieme come base, ma dimentica gli viewWithTag:altri approcci di pesce, invece prova a ricaricare l'intestazione (ricaricando quella sezione).

Quindi, dopo aver aperto la visualizzazione della tua intestazione di cella personalizzata con tutte le AutoLayoutcose fantasiose , basta rimuoverlo e restituire il contenuto Visualizza dopo la configurazione, come:

-(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;
}  

Che dire di una soluzione in cui l'intestazione si basa su un array di visualizzazione:

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

Il prossimo nel delegato:

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

1. Aggiungi cella StoryBoarde impostareuseidentified

   

2. Codice

   class TP_TaskViewTableViewSectionHeader: UITableViewCell{
   }
   

   e

   

3. Uso:

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

Simile alla risposta laszlo ma è possibile riutilizzare la stessa cella prototipo sia per le celle della tabella che per la cella dell'intestazione della sezione. Aggiungi le prime due funzioni seguenti alla sottoclasse di 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
}

Ecco la risposta di @Vitaliy Gozhenko , in Swift.
Per riassumere creerai un UITableViewHeaderFooterView che contiene un UITableViewCell. Questo UITableViewCell sarà "dequeuabile" e puoi progettarlo nello storyboard.

1. Creare una 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. Collega la tabella con questa classe nella funzione viewDidLoad:

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

3. Quando chiedi, per un'intestazione di sezione, dequeue un CustomHeaderFooterView e inserisci una cella in esso

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