Comment implémenter des en-têtes et des pieds de page de section de vue de table personnalisée avec Storyboard

Sans utiliser de storyboard, nous pourrions simplement faire glisser un UIViewsur le canevas, le mettre en page, puis le définir dans les méthodes tableView:viewForHeaderInSectionou tableView:viewForFooterInSectiondéléguer.

Comment y parvenir avec un StoryBoard où nous ne pouvons pas faire glisser un UIView sur le canevas

Je sais que cette question concernait iOS 5, mais pour le bénéfice des futurs lecteurs, notez que l'iOS 6 efficace que nous pouvons maintenant utiliser à la dequeueReusableHeaderFooterViewWithIdentifierplace dequeueReusableCellWithIdentifier.

Alors viewDidLoad, appelez soit registerNib:forHeaderFooterViewReuseIdentifier:ou registerClass:forHeaderFooterViewReuseIdentifier:. Ensuite viewForHeaderInSection, appelez tableView:dequeueReusableHeaderFooterViewWithIdentifier:. Vous n'utilisez pas de prototype de cellule avec cette API (il s'agit d'une vue basée sur NIB ou d'une vue créée par programme), mais il s'agit de la nouvelle API pour les en-têtes et pieds de page retirés de la file d'attente.

Utilisez simplement une cellule prototype comme en-tête et / ou pied de page de votre section.

• ajoutez une cellule supplémentaire et mettez-y les éléments souhaités.
• définir l'identifiant sur quelque chose de spécifique (dans mon cas SectionHeader)
• implémenter la tableView:viewForHeaderInSection:méthode ou la tableView:viewForFooterInSection:méthode
• utiliser [tableView dequeueReusableCellWithIdentifier:]pour obtenir l'en-tête
• mettre en œuvre la tableView:heightForHeaderInSection:méthode.

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

Edit: Comment changer le titre de l'en-tête (question commentée):

1. Ajouter une étiquette à la cellule d'en-tête
2. définir l'étiquette de l'étiquette sur un numéro spécifique (par exemple 123)
3. Dans votre tableView:viewForHeaderInSection:méthode, obtenez l'étiquette en appelant:

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

4. Vous pouvez maintenant utiliser l'étiquette pour définir un nouveau titre:

    [label setText:@"New Title"];

Dans iOS 6.0 et supérieur, les choses ont changé avec la nouvelle dequeueReusableHeaderFooterViewWithIdentifierAPI.

J'ai rédigé un guide (testé sur iOS 9), qui peut se résumer ainsi:

1. Sous-classe UITableViewHeaderFooterView
2. Créez Nib avec la vue de sous-classe et ajoutez 1 vue de conteneur qui contient toutes les autres vues dans l'en-tête / pied de page
3. Enregistrez la plume dans viewDidLoad
4. Implémenter viewForHeaderInSectionet utiliser dequeueReusableHeaderFooterViewWithIdentifierpour récupérer l'en-tête / pied de page

Je l'ai fait fonctionner dans iOS7 en utilisant une cellule prototype dans le storyboard. J'ai un bouton dans ma vue d'en-tête de section personnalisée qui déclenche une séquence configurée dans le storyboard.

Commencez avec la solution de Tieme

Comme le souligne pedro.m, le problème avec ceci est que le fait d'appuyer sur l'en-tête de section provoque la sélection de la première cellule de la section.

Comme le souligne Paul Von, cela est résolu en renvoyant le contentView de la cellule au lieu de la cellule entière.

Cependant, comme le souligne Hons, un appui long sur ledit en-tête de section plantera l'application.

La solution consiste à supprimer tous les gestureRecognizers de 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; }

Si vous n'utilisez pas de gestes dans vos vues d'en-tête de section, ce petit hack semble le faire.

Si vous utilisez des storyboards, vous pouvez utiliser une cellule prototype dans la vue tableau pour mettre en page votre vue d'en-tête. Définissez un identifiant unique et viewForHeaderInSection, vous pouvez retirer la cellule avec cet ID et la convertir en UIView.

Si vous avez besoin d'une implémentation Swift de ceci, suivez les instructions sur la réponse acceptée, puis dans vous UITableViewController implémentez les méthodes suivantes:

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 solution que j'ai proposée est fondamentalement la même solution utilisée avant l'introduction des storyboards.

Créez un nouveau fichier de classe d'interface vide. Faites glisser un UIView sur la toile, mise en page comme vous le souhaitez.

Chargez la pointe manuellement, affectez à la section d'en-tête / pied de page appropriée dans les méthodes déléguées viewForHeaderInSection ou viewForFooterInSection.

J'avais espéré qu'Apple simplifiait ce scénario avec des storyboards et continuait à chercher une solution meilleure ou plus simple. Par exemple, les en-têtes et pieds de page de tableau personnalisés sont faciles à ajouter.

Lorsque vous renvoyez le contenu de la cellule, vous aurez 2 problèmes:

1. crash lié aux gestes
2. vous ne réutilisez pas contentView (à chaque viewForHeaderInSectionappel, vous créez une nouvelle cellule)

Solution:

Classe wrapper pour l'en-tête \ pied de page de la table. C'est juste un conteneur, hérité de UITableViewHeaderFooterView, qui contient la cellule

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

Enregistrez la classe dans votre UITableView (par exemple, dans viewDidLoad)

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

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

J'avais l'habitude de faire ce qui suit pour créer paresseusement des vues d'en-tête / pied de page:

• Ajouter un contrôleur de vue de forme libre pour l'en-tête / pied de page de la section au storyboard
• Gérez tous les éléments de l'en-tête dans le contrôleur de vue
• Dans le contrôleur de vue de table, fournissez un tableau mutable de contrôleurs de vue pour les en-têtes / pieds de page de section repeuplés avec [NSNull null]
• Dans viewForHeaderInSection / viewForFooterInSection si le contrôleur de vue n'existe pas encore, créez-le avec les storyboards instantiateViewControllerWithIdentifier, mémorisez-le dans le tableau et renvoyez la vue des contrôleurs de vue

J'ai eu des problèmes dans un scénario où Header n'a jamais été réutilisé, même en effectuant toutes les étapes appropriées.

Donc, comme une note de conseil à tous ceux qui veulent obtenir la situation de montrer les sections vides (0 lignes), soyez averti que:

dequeueReusableHeaderFooterViewWithIdentifier ne réutilise pas l'en-tête tant que vous n'avez pas renvoyé au moins une ligne

J'espère que cela aide

Similaire à laszlo answer mais vous pouvez réutiliser la même cellule prototype pour les cellules du tableau et la cellule d'en-tête de section. Ajoutez les deux premières fonctions ci-dessous à votre sous-classe 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
}

Pour faire suite à la suggestion de Damon , voici comment j'ai rendu l'en-tête sélectionnable comme une ligne normale avec un indicateur de divulgation.

J'ai ajouté un Button sous-classé de UIButton (nom de sous-classe "ButtonWithArgument") à la cellule prototype de l'en-tête et supprimé le texte du titre (le texte en gras "Titre" est un autre UILabel dans la cellule prototype)

puis définissez le bouton sur la vue entière de l'en-tête et ajouté un indicateur de divulgation avec l'astuce d' 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

Vous devriez utiliser la solution de Tieme comme base, mais oubliez les viewWithTag:approches louche et les autres, essayez plutôt de recharger votre en-tête (en rechargeant cette section).

Donc, après avoir installé votre vue d'en-tête de cellule personnalisée avec tous les AutoLayoutéléments sophistiqués , retirez-la simplement de la file d'attente et renvoyez le contentView après votre configuration, comme:

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

Qu'en est-il d'une solution où l'en-tête est basé sur un tableau de vues:

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

Suivant dans le délégué:

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

1. Ajouter une cellule StoryBoardet définirreuseidentified

   

2. Code

   class TP_TaskViewTableViewSectionHeader: UITableViewCell{
   }
   

   et

   

3. Utilisation:

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

Voici la réponse de @Vitaliy Gozhenko , dans Swift.
Pour résumer, vous allez créer un UITableViewHeaderFooterView qui contient un UITableViewCell. Ce UITableViewCell sera "retirable" et vous pourrez le concevoir dans votre storyboard.

1. Créer une 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. Branchez votre tableview avec cette classe dans votre fonction viewDidLoad:

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

3. Lorsque vous demandez un en-tête de section, retirez un CustomHeaderFooterView de la file d'attente et insérez-y une cellule

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