Implementieren von Kopf- und Fußzeilen für benutzerdefinierte Tabellenansichtsabschnitte mit Storyboard

Ohne ein Storyboard könnten wir einfach ein UIViewauf die Leinwand ziehen, es auslegen und dann in den Methoden tableView:viewForHeaderInSectionoder tableView:viewForFooterInSectiondelegieren festlegen .

Wie erreichen wir dies mit einem StoryBoard, bei dem wir kein UIView auf die Leinwand ziehen können?

Ich weiß, dass diese Frage für iOS 5 war, aber zum Nutzen zukünftiger Leser beachten Sie, dass wir jetzt effektives iOS 6 dequeueReusableHeaderFooterViewWithIdentifieranstelle von verwenden können dequeueReusableCellWithIdentifier.

Also viewDidLoad, rufen Sie entweder registerNib:forHeaderFooterViewReuseIdentifier:oder registerClass:forHeaderFooterViewReuseIdentifier:. Dann viewForHeaderInSectionrufen Sie an tableView:dequeueReusableHeaderFooterViewWithIdentifier:. Sie verwenden mit dieser API keinen Zellenprototyp (es handelt sich entweder um eine NIB-basierte Ansicht oder eine programmgesteuert erstellte Ansicht), dies ist jedoch die neue API für Kopf- und Fußzeilen in der Warteschlange.

Verwenden Sie einfach eine Prototypzelle als Kopf- und / oder Fußzeile Ihres Abschnitts.

• Fügen Sie eine zusätzliche Zelle hinzu und fügen Sie die gewünschten Elemente ein.
• Setzen Sie den Bezeichner auf einen bestimmten Wert (in meinem Fall SectionHeader).
• Implementieren Sie die tableView:viewForHeaderInSection:Methode oder die tableView:viewForFooterInSection:Methode
• Verwenden Sie [tableView dequeueReusableCellWithIdentifier:], um den Header zu erhalten
• Implementieren Sie die tableView:heightForHeaderInSection:Methode.

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

Bearbeiten: So ändern Sie den Header-Titel (kommentierte Frage):

1. Fügen Sie der Kopfzelle eine Beschriftung hinzu
2. Setzen Sie das Etikett auf eine bestimmte Nummer (z. B. 123).
3. In Ihrer tableView:viewForHeaderInSection:Methode erhalten Sie das Label, indem Sie Folgendes aufrufen:

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

4. Jetzt können Sie mit der Bezeichnung einen neuen Titel festlegen:

    [label setText:@"New Title"];

In iOS 6.0 und höher haben sich die Dinge mit der neuen dequeueReusableHeaderFooterViewWithIdentifierAPI geändert .

Ich habe einen Leitfaden geschrieben (getestet auf iOS 9), der als solcher zusammengefasst werden kann:

1. Unterklasse UITableViewHeaderFooterView
2. Erstellen Sie Nib mit der Unterklassenansicht und fügen Sie 1 Containeransicht hinzu, die alle anderen Ansichten in der Kopf- / Fußzeile enthält
3. Registrieren Sie die Feder in viewDidLoad
4. Implementieren viewForHeaderInSectionund verwenden Sie dequeueReusableHeaderFooterViewWithIdentifier, um die Kopf- / Fußzeile zurückzugewinnen

Ich habe es in iOS7 mit einer Prototypzelle im Storyboard zum Laufen gebracht. In meiner benutzerdefinierten Abschnittsüberschriftenansicht befindet sich eine Schaltfläche, die einen im Storyboard eingerichteten Übergang auslöst.

Beginnen Sie mit der Lösung von Tieme

Wie pedro.m hervorhebt, besteht das Problem darin, dass durch Tippen auf die Abschnittsüberschrift die erste Zelle im Abschnitt ausgewählt wird.

Wie Paul Von betont, wird dies behoben, indem die Inhaltsansicht der Zelle anstelle der gesamten Zelle zurückgegeben wird.

Wie Hons jedoch betont, stürzt die App durch langes Drücken auf den Abschnittskopf ab.

Die Lösung besteht darin, alle gestureRecognizers aus contentView zu entfernen.

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

Wenn Sie in Ihren Abschnittsüberschriften keine Gesten verwenden, scheint dieser kleine Hack es zu schaffen.

Wenn Sie Storyboards verwenden, können Sie eine Prototypzelle in der Tabellenansicht verwenden, um Ihre Kopfzeilenansicht zu gestalten. Legen Sie eine eindeutige ID und viewForHeaderInSection fest. Sie können die Zelle mit dieser ID aus der Warteschlange entfernen und in eine UIView umwandeln.

Wenn Sie eine schnelle Implementierung benötigen, befolgen Sie die Anweisungen auf der akzeptierten Antwort und implementieren Sie dann in Ihrem UITableViewController die folgenden Methoden:

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
}

Die Lösung, die ich mir ausgedacht habe, ist im Grunde dieselbe, die vor der Einführung von Storyboards verwendet wurde.

Erstellen Sie eine neue, leere Schnittstellenklassendatei. Ziehen Sie eine UIView auf die Leinwand, Layout wie gewünscht.

Laden Sie die Schreibfeder manuell und weisen Sie sie in den Delegate-Methoden viewForHeaderInSection oder viewForFooterInSection dem entsprechenden Kopf- / Fußzeilenabschnitt zu.

Ich hatte die Hoffnung, dass Apple dieses Szenario mit Storyboards vereinfachte und nach einer besseren oder einfacheren Lösung suchte. Zum Beispiel können benutzerdefinierte Tabellenkopf- und -fußzeilen einfach hinzugefügt werden.

Wenn Sie die Inhaltsansicht der Zelle zurückgeben, treten zwei Probleme auf:

1. Absturz im Zusammenhang mit Gesten
2. Sie verwenden contentView nicht wieder (jedes Mal viewForHeaderInSection, wenn Sie auf Abruf eine neue Zelle erstellen)

Lösung:

Wrapper-Klasse für Tabellenkopf \ Fußzeile. Es ist nur ein geerbter Container UITableViewHeaderFooterView, der die Zelle enthält

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

Registrieren Sie die Klasse in Ihrer UITableView (z. B. in viewDidLoad).

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

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

Ich habe Folgendes getan, um träge Kopf- / Fußzeilenansichten zu erstellen:

• Fügen Sie dem Storyboard einen Freiform-Ansichts-Controller für die Kopf- / Fußzeile des Abschnitts hinzu
• Behandeln Sie alle Inhalte für den Header im View Controller
• Stellen Sie in der Tabellenansichtssteuerung ein veränderbares Array von Ansichtssteuerungen für die mit neu gefüllten Abschnittsüberschriften / -fußzeilen bereit [NSNull null]
• Wenn in viewForHeaderInSection / viewForFooterInSection noch kein Ansichts-Controller vorhanden ist, erstellen Sie ihn mit den Storyboards instantiateViewControllerWithIdentifier, merken Sie ihn sich im Array und geben Sie die Ansicht des Ansichts-Controllers zurück

Ich war in einem Szenario in Schwierigkeiten, in dem der Header nie wiederverwendet wurde, selbst wenn alle richtigen Schritte ausgeführt wurden.

Als Tipp für alle, die die Situation erreichen möchten, leere Abschnitte (0 Zeilen) anzuzeigen, sollten Sie Folgendes warnen:

dequeueReusableHeaderFooterViewWithIdentifier verwendet den Header erst wieder, wenn Sie mindestens eine Zeile zurückgeben

Ich hoffe es hilft

Um Damons Vorschlag zu folgen , habe ich den Header wie eine normale Zeile mit einem Offenlegungsindikator auswählbar gemacht.

Ich habe der Prototypzelle des Headers eine von UIButton untergeordnete Schaltfläche (Unterklassenname "ButtonWithArgument") hinzugefügt und den Titeltext gelöscht (der fett gedruckte "Titel" -Text ist ein weiteres UILabel in der Prototypzelle).

Setzen Sie dann die Schaltfläche auf die gesamte Kopfansicht und fügen Sie mit Avarios Trick einen Offenlegungsindikator hinzu

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

Sie sollten die Lösung von Tieme als Basis verwenden, aber die viewWithTag:und andere fischartige Ansätze vergessen. Versuchen Sie stattdessen, Ihren Header neu zu laden (indem Sie diesen Abschnitt neu laden).

Nachdem Sie Ihre benutzerdefinierte Zellen-Header-Ansicht mit all den ausgefallenen AutoLayoutDingen eingerichtet haben, müssen Sie sie einfach aus der Warteschlange entfernen und die Inhaltsansicht nach der Einrichtung zurückgeben, z.

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

Was ist mit einer Lösung, bei der der Header auf einem Ansichtsarray basiert:

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

Weiter im Delegierten:

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

1. Zelle hinzufügen StoryBoardund einstellenreuseidentified

   

2. Code

   class TP_TaskViewTableViewSectionHeader: UITableViewCell{
   }
   

   und

   

3. Verwenden:

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

Ähnlich wie bei Laszlo Answer, aber Sie können dieselbe Prototypzelle sowohl für die Tabellenzellen als auch für die Abschnittskopfzelle wiederverwenden. Fügen Sie Ihrer UIViewController-Unterklasse die ersten beiden Funktionen hinzu

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
}

Hier ist die Antwort von @Vitaliy Gozhenko in Swift.
Zusammenfassend erstellen Sie eine UITableViewHeaderFooterView, die eine UITableViewCell enthält. Diese UITableViewCell ist "dequeuable" und Sie können sie in Ihrem Storyboard entwerfen.

1. Erstellen Sie eine UITableViewHeaderFooterView-Klasse

   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. Fügen Sie Ihre Tabellenansicht mit dieser Klasse in Ihre viewDidLoad-Funktion ein:

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

3. Wenn Sie nach einem Abschnittsheader fragen, entfernen Sie eine CustomHeaderFooterView und fügen Sie eine Zelle ein

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