web-dev-qa-db-fra.com

Personnaliser la section d'en-tête UITableView

Je veux personnaliser l'en-tête UITableView pour chaque section. Jusqu'à présent, j'ai mis en place 

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section

cette méthode UITabelViewDelegate. Ce que je veux faire est d’obtenir l’en-tête actuel de chaque section et d’ajouter simplement UILabel comme sous-vue. 

Jusqu'ici, je ne suis pas capable d'accomplir cela. Parce que, je n'ai rien trouvé pour obtenir l'en-tête de section par défaut. Première question, existe-t-il un moyen d'obtenir un en-tête de section par défaut ?

Si ce n'est pas possible, je dois créer une vue de conteneur qui est une UIView, mais cette fois, je dois définir la couleur d'arrière-plan, la couleur de l'ombre, etc., par défaut. 

Comment puis-je obtenir ces valeurs par défaut pour chaque en-tête de section? 

Merci à tous.

iosobjective-cswiftuitableview
131
limon

Vous pouvez essayer ceci:

 -(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.frame.size.width, 18)];
    /* Create custom view to display section header... */
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 5, tableView.frame.size.width, 18)];
    [label setFont:[UIFont boldSystemFontOfSize:12]];
     NSString *string =[list objectAtIndex:section];
    /* Section header is in 0th index... */
    [label setText:string];
    [view addSubview:label];
    [view setBackgroundColor:[UIColor colorWithRed:166/255.0 green:177/255.0 blue:186/255.0 alpha:1.0]]; //your background color...
    return view;
}
271
Lochana Ragupathy

La réponse sélectionnée en utilisant tableView :viewForHeaderInSection: est correcte.

Juste pour partager un conseil ici. 

Si vous utilisez storyboard/xib, vous pouvez créer un autre prototype de cellule et l’utiliser pour votre "cellule de section". Le code pour configurer l'en-tête est similaire à celui que vous configurez pour les cellules de ligne.

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

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:HeaderCellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:HeaderCellIdentifier];
    }

    // Configure the cell title etc
    [self configureHeaderCell:cell inSection:section];

    return cell;
}
42
samwize

Version rapide de Lochana Tejas answer:

override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let view = UIView(frame: CGRectMake(0, 0, tableView.frame.size.width, 18))
    let label = UILabel(frame: CGRectMake(10, 5, tableView.frame.size.width, 18))
    label.font = UIFont.systemFontOfSize(14)
    label.text = list.objectAtIndex(indexPath.row) as! String
    view.addSubview(label)
    view.backgroundColor = UIColor.grayColor() // Set your background color

    return view
}
29
estemendoza

Si vous utilisez la vue en-tête par défaut, vous ne pouvez modifier le texte dessus qu'avec

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section

Pour Swift:

override func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {

Si vous souhaitez personnaliser l'affichage, vous devez en créer un vous-même.

17
Mert

pourquoi ne pas utiliser UITableViewHeaderFooterView ?

11
user836773

Si headerInSection n'est pas affiché, vous pouvez essayer ceci.

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

Cela retourne une hauteur pour l'en-tête d'une section donnée.

8
Kathen

Essaye ça......

override func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) 
{
    // Background view is at index 0, content view at index 1
    if let bgView = view.subviews[0] as? UIView
    {
        // do your stuff
    }

    view.layer.borderColor = UIColor.magentaColor().CGColor
    view.layer.borderWidth = 1
}
5
Gigi

Swift 3 version de lochana et estemendoza répond:

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {

    let view = UIView(frame: CGRect(x:0, y:0, width:tableView.frame.size.width, height:18))
    let label = UILabel(frame: CGRect(x:10, y:5, width:tableView.frame.size.width, height:18))
    label.font = UIFont.systemFont(ofSize: 14)
    label.text = "This is a test";
    view.addSubview(label);
    view.backgroundColor = UIColor.gray;
    return view

}

De plus, sachez que vous devez AUSSI implémenter:

override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 100;
}
5
Adam
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    //put your values, this is part of my code
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 30.0f)];
    [view setBackgroundColor:[UIColor redColor]];
    UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(20, 5, 150, 20)];
    [lbl setFont:[UIFont systemFontOfSize:18]];
    [lbl setTextColor:[UIColor blueColor]];
    [view addSubview:lbl];

    [lbl setText:[NSString stringWithFormat:@"Section: %ld",(long)section]];

    return view;
}
4
Boris Nikolić

Les autres réponses recréent bien la vue en-tête par défaut, mais ne répondez pas à votre question principale:

est-il possible d'obtenir un en-tête de section par défaut?

Il existe un moyen - implémentez simplement tableView:willDisplayHeaderView:forSection: dans votre délégué. La vue en-tête par défaut sera transmise au deuxième paramètre et à partir de là, vous pourrez la convertir en UITableViewHeaderFooterView puis ajouter/modifier les sous-vues à votre guise.

Obj-C

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
{
    UITableViewHeaderFooterView *headerView = (UITableViewHeaderFooterView *)view;

    // Do whatever with the header view... e.g.
    // headerView.textLabel.textColor = [UIColor whiteColor]
}

Rapide

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int)
{
    let headerView = view as! UITableViewHeaderFooterView

    // Do whatever with the header view... e.g.
    // headerView.textLabel?.textColor = UIColor.white
}
4
Craig Brown

C'est la solution la plus simple possible. Le code suivant peut être utilisé directement pour créer un en-tête de section personnalisé. 

 -(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    SectionHeaderTableViewCell *headerView = [tableView dequeueReusableCellWithIdentifier:@"sectionHeader"];

    //For creating a drop menu of rows from the section
    //==THIS IS JUST AN EXAMPLE. YOU CAN REMOVE THIS IF-ELSE.==
    if (![self.sectionCollapsedArray[section] boolValue])
    {
        headerView.imageView.image = [UIImage imageNamed:@"up_icon"];
    }
    else
    {
        headerView.imageView.image = [UIImage imageNamed:@"drop_icon"];
    }

    //For button action inside the custom cell
    headerView.dropButton.tag = section;
    [headerView.dropButton addTarget:self action:@selector(sectionTapped:) forControlEvents:UIControlEventTouchUpInside];

    //For removing long touch gestures.
    for (UIGestureRecognizer *recognizer in headerView.contentView.gestureRecognizers)
    {
        [headerView.contentView removeGestureRecognizer:recognizer];
        [headerView removeGestureRecognizer:recognizer];
    }

    return headerView.contentView;
}

REMARQUE: SectionHeaderTableViewCell est un UITableViewCell personnalisé créé dans Storyboard.

3
Anish Kumar

Si j'étais vous, je ferais une méthode qui renvoie une UIView à une NSString. Par exemple

+ (UIView *) sectionViewWithTitle:(NSString *)title;

Dans l'implémentation de cette méthode, créez un UIView, ajoutez-lui un UILabel avec les propriétés que vous souhaitez définir et, bien sûr, définissez son titre sur celui indiqué.

2
cpprulez
- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
{
    if([view isKindOfClass:[UITableViewHeaderFooterView class]]){

        UITableViewHeaderFooterView *headerView = view;

        [[headerView textLabel] setTextColor:[UIColor colorWithHexString:@"666666"]];
        [[headerView textLabel] setFont:[UIFont fontWithName:@"fontname" size:10]];
    }
}

Si vous souhaitez modifier la police de la variable textLabel dans l'en-tête de votre section, vous souhaitez le faire dans willDisplayHeaderView. Pour définir le texte, vous pouvez le faire dans viewForHeaderInSection ou titleForHeaderInSection. Bonne chance!

2
John Ottenlips

Ajouter comme par magie l'en-tête de la vue tableau dans Swift

Récemment j'ai essayé ceci.

J'avais besoin d'un et un seul en-tête dans l'ensemble de UITableView. 

Comme si je voulais un UIImageView sur le dessus de la table. J'ai donc ajouté un UIImageView au-dessus de UITableViewCell et, automatiquement, il a été ajouté en tant que tableViewHeader. Maintenant, je connecte ImageView au ViewController et ajoute l'image.

J'étais confus parce que j'ai fait quelque chose comme ça pour la première fois. Donc, pour dissiper toute confusion, ouvrez le format XML du MainStoryBoard et découvrez que la vue d'image a été ajoutée en tant qu'en-tête.

Cela a fonctionné pour moi. Merci xCode et Swift.

1
Somir Saikia

swif 4.2 

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    guard let header = view as? UITableViewHeaderFooterView else { return }

    header.textLabel?.textAlignment = .center // for all sections

    switch section {
    case 1:  //only section No.1
        header.textLabel?.textColor = .black
    case 3:  //only section No.3
        header.textLabel?.textColor = .red
    default: //
        header.textLabel?.textColor = .yellow
    }
}
1
flowGlen

La solution de @ samwize dans Swift (alors invoquez-le!). Brilliant utilisant le même mécanisme de recyclage également pour les sections d'en-tête/pied de page:

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let settingsHeaderSectionCell:SettingsHeaderSectionCell = self.dequeueReusableCell(withIdentifier: "SettingsHeaderSectionCell") as! SettingsHeaderSectionCell

    return settingsHeaderSectionCell
}
1
Javier Calatrava Llavería

Pour revenir à la question initiale (4 ans plus tard), au lieu de reconstruire votre propre en-tête de section, iOS peut simplement vous appeler (avec willDisplayHeaderView: forSection :) juste après la construction de celle par défaut. Par exemple, je voulais ajouter un bouton graphique à droite de l'en-tête de la section:

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section {
    UITableViewHeaderFooterView * header = (UITableViewHeaderFooterView *) view;
    if (header.contentView.subviews.count >  0) return; //in case of reuse
    CGFloat rightEdge = CGRectGetMaxX(header.contentView.bounds);
    UIButton * button = [[UIButton alloc] initWithFrame:CGRectMake(rightEdge - 44, 0, 44, CGRectGetMaxY(header.contentView.bounds))];
    [button setBackgroundImage:[UIImage imageNamed:@"graphIcon"] forState:UIControlStateNormal];
    [button addTarget:self action:@selector(graphButtonPressed:) forControlEvents:UIControlEventTouchUpInside];
    [view addSubview:button];
}
0
mackworth

Utilisez tableView: willDisplayHeaderView: pour personnaliser la vue au moment de son affichage. 

Cela vous donne l'avantage de pouvoir afficher et étendre la vue déjà créée pour la vue d'en-tête, au lieu de devoir recréer vous-même l'intégralité de la vue d'en-tête.

Voici un exemple qui colore la section d'en-tête en fonction d'un BOOL et ajoute un élément de texte de détail à l'en-tête.

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
{
//    view.tintColor = [UIColor colorWithWhite:0.825 alpha:1.0]; // gray
//    view.tintColor = [UIColor colorWithRed:0.825 green:0.725 blue:0.725 alpha:1.0]; // reddish
//    view.tintColor = [UIColor colorWithRed:0.925 green:0.725 blue:0.725 alpha:1.0]; // pink

    // Conditionally tint the header view
    BOOL isMyThingOnOrOff = [self isMyThingOnOrOff];

    if (isMyThingOnOrOff) {
        view.tintColor = [UIColor colorWithRed:0.725 green:0.925 blue:0.725 alpha:1.0];
    } else {
        view.tintColor = [UIColor colorWithRed:0.925 green:0.725 blue:0.725 alpha:1.0];
    }

    /* Add a detail text label (which has its own view to the section header… */
    CGFloat xOrigin = 100; // arbitrary
    CGFloat hInset = 20;
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(xOrigin + hInset, 5, tableView.frame.size.width - xOrigin - (hInset * 2), 22)];

    label.textAlignment = NSTextAlignmentRight;

    [label setFont:[UIFont fontWithName:@"Helvetica-Bold" size:14.0]
    label.text = @"Hi.  I'm the detail text";

    [view addSubview:label];
}
0
Alex Zavatone

appeler cette méthode déléguée 

-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{

return @"Some Title";
}

cela donnera une chance d'ajouter automatiquement un en-tête par défaut avec un titre dynamique.

Vous pouvez utiliser un en-tête/pied de page réutilisable et personnalisable. 

https://github.com/sourov2008/UITableViewCustomHeaderFooterSection

0
Shourob Datta

Si vous voulez juste ajouter un titre à l'en-tête de la table, ne pas ajouter de vue. Dans Swift 3.x, le code est le suivant:

override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    var lblStr = ""
    if section == 0 {
        lblStr = "Some String 1"
    }
    else if section == 1{
        lblStr = "Some String 2"
    }
    else{
        lblStr = "Some String 3"
    }
    return lblStr
}

Vous pouvez implémenter un tableau pour récupérer le titre des en-têtes.

0
abhishek chakrabartti

en plus de titleForHeaderInSection, vous pouvez simplement changer la vue de l'en-tête, du pied de page . Vérifiez mon commentaire ici: Change la section UITCableColorColor sans perdre le titre de la section

0
dimpiax