UITableView - changer la couleur de l'en-tête de section


Réponses:


393

Espérons que cette méthode du UITableViewDelegateprotocole vous aidera à démarrer:

Objectif c:

- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section 
{
  UIView *headerView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 30)] autorelease];
  if (section == integerRepresentingYourSectionOfInterest)
     [headerView setBackgroundColor:[UIColor redColor]];
  else 
     [headerView setBackgroundColor:[UIColor clearColor]];
  return headerView;
}

Rapide:

func tableView(_ tableView: UITableView!, viewForHeaderInSection section: Int) -> UIView!
{
  let headerView = UIView(frame: CGRect(x: 0, y: 0, width: tableView.bounds.size.width, height: 30))
  if (section == integerRepresentingYourSectionOfInterest) {
    headerView.backgroundColor = UIColor.redColor()
  } else {
    headerView.backgroundColor = UIColor.clearColor()
  }
  return headerView
}

Mise à jour 2017:

Swift 3:

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?
    {
        let headerView = UIView(frame: CGRect(x: 0, y: 0, width: tableView.bounds.size.width, height: 30))
        if (section == integerRepresentingYourSectionOfInterest) {
            headerView.backgroundColor = UIColor.red
        } else {
            headerView.backgroundColor = UIColor.clear
        }
        return headerView
    }

Remplacez-le [UIColor redColor]par celui que UIColorvous souhaitez. Vous pouvez également ajuster les dimensions de headerView.


17
Il peut également aider à ajuster la taille de l'en-tête de section à l'aide de self.tableView.sectionHeaderHeight. Sinon, vous pourriez avoir du mal à voir le texte que vous affichez pour le titre de la section.
Tony Lenzi

Fonctionne bien avec [UIColor xxxColor]cependant quand j'essaie une couleur personnalisée comme celles que je peux obtenir de Photoshop (donc en utilisant le UIColor red:green:blue:alpha:, c'est juste du blanc. Suis-je en train de faire quelque chose de mal?
Matej

Postez une question distincte et nous essaierons de vous aider. Incluez le code source.
Alex Reynolds

12
Notez que cette réponse (bien que correcte) retournera simplement une UIView sans contenu.
Greg M. Krsak

7
Il s'agit d'informations assez obsolètes et la simple création d'une autre vue n'est pas la meilleure réponse. L'idée est d'obtenir la bonne vue et de changer la couleur ou la teinte. La réponse ci-dessous en utilisant willDisplayHeaderView est une bien meilleure approche.
Alex Zavatone

741

C'est une vieille question, mais je pense que la réponse doit être mise à jour.

Cette méthode n'implique pas de définir et de créer votre propre vue personnalisée. Dans iOS 6 et versions ultérieures, vous pouvez facilement modifier la couleur d'arrière-plan et la couleur du texte en définissant

-(void)tableView:(UITableView *)tableView 
    willDisplayHeaderView:(UIView *)view 
    forSection:(NSInteger)section

méthode déléguée de section

Par exemple:

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
{
    // Background color
    view.tintColor = [UIColor blackColor];

    // Text Color
    UITableViewHeaderFooterView *header = (UITableViewHeaderFooterView *)view;
    [header.textLabel setTextColor:[UIColor whiteColor]];

    // Another way to set the background color
    // Note: does not preserve gradient effect of original header
    // header.contentView.backgroundColor = [UIColor blackColor];
}

Tiré de mon message ici: https://happyteamlabs.com/blog/ios-how-to-customize-table-view-header-and-footer-colors/

Swift 3/4

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int){
    view.tintColor = UIColor.red
    let header = view as! UITableViewHeaderFooterView
    header.textLabel?.textColor = UIColor.white
}

2
Je n'avais aucune idée que cela avait même été ajouté au SDK. Brillant! Absolument la bonne réponse.
JRod

1
OP - Veuillez mettre à jour la réponse acceptée à celle-ci. Beaucoup plus propre que les anciennes approches.
Kyle Clegg

10
Cela ne semble pas fonctionner pour moi. La couleur du texte fonctionne mais pas la teinte de l'arrière-plan de l'en-tête. Je suis sur iOS 7.0.4
Zeeple

10
user1639164, vous pouvez utiliser header.backgroundView.backgroundColor = [UIColor blackColor]; pour définir la teinte de l'arrière-plan de l'en-tête.
慭 慭 流 觞

2
@Kent, cela fait un moment, bien sûr, mais pour les futures personnes, l' header.contentView.backgroundColor = [UIColor blackColor];option vous donnera un en-tête opaque
SparkyRobinson

98

Voici comment changer la couleur du texte.

UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(10, 3, tableView.bounds.size.width - 10, 18)] autorelease];
label.text = @"Section Header Text Here";
label.textColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.75];
label.backgroundColor = [UIColor clearColor];
[headerView addSubview:label];

18
Merci DoctorG - C'était utile. BTW - pour conserver l'étiquette existante fournie par la source de données, j'ai modifié la 2e ligne comme suit: label.text = [tableView.dataSource tableView: tableView titleForHeaderInSection: section]; Ça peut être une mauvaise forme, mais ça a marché pour moi. Peut-être que cela peut aider quelqu'un d'autre.
JJ Rohrer

1
@JJ Ce formulaire est très bien, car vous appelez la même méthode que vous utiliseriez initialement pour définir l'en-tête de section de la table.
Tim

3
J'ai supprimé la libération automatique et l'ai changé en une version explicite. Les méthodes de formatage UITableView sont appelées plusieurs fois. Évitez d'utiliser la libération automatique lorsque cela est possible.
memmons

@Harkonian, plutôt que de modifier la réponse soumise, veuillez recommander la modification dans un commentaire à la réponse. Il est considéré comme une mauvaise forme de modifier le code d'autres personnes avec une modification. Les fautes d'orthographe, le mauvais formatage et la grammaire sont un jeu équitable.
The Tin Man

1
Au lieu de addSubview: UILabel, vous devez simplement renvoyer UILabel dans viewForHeaderInSection. UILable est déjà une UIView :)
Nas Banov

52

Vous pouvez le faire si vous souhaitez un en-tête avec une couleur personnalisée:

[[UITableViewHeaderFooterView appearance] setTintColor:[UIColor redColor]];

Cette solution fonctionne très bien depuis iOS 6.0.


1
hm ... ça ne marche pas pour moi. essayé simulateur iOS 6 et appareil iOS 7. Avez-vous testé de cette façon? Où dois-je le placer?
Maxim Kholyavkin

Cela peut être fait dans l'application: didFinishLaunchingWithOptions: méthode de délégué d'application.
Leszek Zarna

ma faute: j'ai essayé d'utiliser cette méthode alors que UITableViewStyleGrouped BTW: pour changer la couleur du texte de cette façon, il fallait l'utiliser stackoverflow.com/a/20778406/751932
Maxim Kholyavkin

S'il est dans UIView personnalisé, il suffit de le mettre dans la méthode - init.
felixwcf

31

La solution suivante fonctionne pour Swift 1.2 avec iOS 8+

override func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {

    // This changes the header background
    view.tintColor = UIColor.blueColor()

    // Gets the header view as a UITableViewHeaderFooterView and changes the text colour
    var headerView: UITableViewHeaderFooterView = view as! UITableViewHeaderFooterView
    headerView.textLabel.textColor = UIColor.redColor()

}

22

La définition de la couleur d'arrière-plan sur UITableViewHeaderFooterView est obsolète. Veuillez utiliser à la contentView.backgroundColorplace.


21

N'oubliez pas d'ajouter ce morceau de code du délégué ou votre vue sera coupée ou apparaîtra derrière la table dans certains cas, par rapport à la hauteur de votre vue / étiquette.

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

Cela n'est plus nécessaire si vous suivez l'iOS6 et la réponse ultérieure de Dj S.
Bjinse

21

Vous pouvez le faire sur main.storyboard en environ 2 secondes.

  1. Sélectionnez la vue Table
  2. Accédez à l'inspecteur d'attributs
  3. Élément de liste
  4. Faites défiler vers le bas pour afficher le sous-titre
  5. Changement de fond"

Jetez un oeil ici


18

Si vous ne souhaitez pas créer une vue personnalisée, vous pouvez également modifier la couleur comme ceci (nécessite iOS 6):

-(void) tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section {
    if ([view isKindOfClass: [UITableViewHeaderFooterView class]]) {
        UITableViewHeaderFooterView* castView = (UITableViewHeaderFooterView*) view;
        UIView* content = castView.contentView;
        UIColor* color = [UIColor colorWithWhite:0.85 alpha:1.]; // substitute your color here
        content.backgroundColor = color;
    }
}

13

Définissez l'arrière-plan et la couleur du texte de la section: (Merci à William Jockuschet Dj S)

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
{
    if ([view isKindOfClass: [UITableViewHeaderFooterView class]]) {
        UITableViewHeaderFooterView* castView = (UITableViewHeaderFooterView*) view;
        castView.contentView.backgroundColor = [UIColor grayColor];
        [castView.textLabel setTextColor:[UIColor grayColor]];
    }
}

13

Swift 4

Pour changer la couleur de fond , couleur de l' étiquette de texte et la police pour l' en- tête Vue d'une section UITableView, substituez simplement willDisplayHeaderViewpour votre point de vue de la table comme ceci:

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        let header = view as! UITableViewHeaderFooterView
        header.backgroundView?.backgroundColor = .white
        header.textLabel?.textColor = .black
        header.textLabel?.font = UIFont(name: "Helvetica-Bold", size: 14)
} 

Cela a parfaitement fonctionné pour moi; j'espère que cela vous aidera aussi!


La définition de la couleur d'arrière-plan sur UITableViewHeaderFooterView est obsolète. Vous devez plutôt définir une UIView personnalisée avec la couleur d'arrière-plan souhaitée sur la propriété backgroundView.
mojtaba al moussawi

10

Voici comment ajouter une image dans la vue d'en-tête:

- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section 
{
    UIView *headerView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 30)] autorelease];
    UIImageView *headerImage = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"top-gery-bar.png"]] autorelease];

    headerImage.frame = CGRectMake(0, 0, tableView.bounds.size.width, 30);

    [headerView addSubview:headerImage];

    return headerView;
}

8

Pour iOS8 (Beta) et Swift, choisissez la couleur RVB souhaitée et essayez ceci:

override func tableView(tableView: UITableView!, viewForHeaderInSection section: Int) -> UIView! {
    var header :UITableViewHeaderFooterView = UITableViewHeaderFooterView()

    header.contentView.backgroundColor = UIColor(red: 254.0/255.0, green: 190.0/255.0, blue: 127.0/255.0, alpha: 1)
    return header

}

(Le "remplacement" est là puisque j'utilise le UITableViewController au lieu d'un UIViewController normal dans mon projet, mais ce n'est pas obligatoire pour changer la couleur de l'en-tête de section)

Le texte de votre en-tête sera toujours visible. Notez que vous devrez ajuster la hauteur de l'en-tête de section.

Bonne chance.


6

SWIFT 2

J'ai réussi à changer la couleur d'arrière-plan de la section avec un effet de flou supplémentaire (ce qui est vraiment cool). Pour modifier facilement la couleur d'arrière-plan de la section:

  1. Allez d'abord dans Storyboard et sélectionnez la vue Table
  2. Accédez à l'inspecteur d'attributs
  3. Élément de liste
  4. Faites défiler vers le bas pour voir
  5. Changement de fond"

Ensuite, pour un effet de flou, ajoutez au code:

override func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {

    // This is the blur effect

    let blurEffect = UIBlurEffect(style: .Light)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)

    // Gets the header view as a UITableViewHeaderFooterView and changes the text colour and adds above blur effect
    let headerView: UITableViewHeaderFooterView = view as! UITableViewHeaderFooterView
    headerView.textLabel!.textColor = UIColor.darkGrayColor()
    headerView.textLabel!.font = UIFont(name: "HelveticaNeue-Light", size: 13)
    headerView.tintColor = .groupTableViewBackgroundColor()
    headerView.backgroundView = blurEffectView

}

5

Je sais que sa réponse, juste au cas où, dans Swift utiliser ce qui suit

    override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let tableViewWidth = self.tableView.bounds

        let headerView = UIView(frame: CGRectMake(0, 0, tableViewWidth.size.width, self.tableView.sectionHeaderHeight))
        headerView.backgroundColor = UIColor.greenColor()

        return headerView
    }

4

iOS 8+

func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        tableView.tableHeaderView?.backgroundColor = UIColor.blue()
}

4

Basé sur la réponse de @Dj S, en utilisant Swift 3. Cela fonctionne très bien sur iOS 10.

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    // Background color
    view.tintColor = UIColor.black

    // Text Color
    let headerView = view as! UITableViewHeaderFooterView
    headerView.textLabel?.textColor = UIColor.white
}

3

J'ai un projet utilisant des cellules de vue tabulaire statique, dans iOS 7.x. willDisplayHeaderView ne se déclenche pas. Cependant, cette méthode fonctionne bien:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    NSLog(@"%s", __FUNCTION__);
    CGRect headerFrame = CGRectMake(x, y, w, h);    
    UIView *headerView = [[UIView alloc] initWithFrame:headerFrame];  
    headerView.backgroundColor = [UIColor blackColor];

3
 -(void) tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view
  forSection:(NSInteger)section
  {
        if ([view isKindOfClass: [UITableViewHeaderFooterView class]])
        {
             UITableViewHeaderFooterView *castView = (UITableViewHeaderFooterView *) view;
             UIView *content = castView.contentView;
             UIColor *color = [UIColor whiteColor]; // substitute your color here
             content.backgroundColor = color;
             [castView.textLabel setTextColor:[UIColor blackColor]];
        }
 }

3

Je pense que ce code n'est pas si mal.

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView = tableView.dequeueReusableHeaderFooterViewWithIdentifier(MyHeaderView.reuseIdentifier) as MyHeaderView
    let backgroundView = UIView()
    backgroundView.backgroundColor = UIColor.whiteColor()
    headerView.backgroundView = backgroundView
    headerView.textLabel.text = "hello"
    return headerView
}

3

Swift 4 le rend très facile. Ajoutez-le simplement à votre classe et définissez la couleur selon vos besoins.

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        view.backgroundColor = UIColor(red: 0.094, green: 0.239, blue: 0.424, alpha: 1.0)
    }

ou si une couleur simple

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        view.backgroundColor = UIColor.white
    }

Mis à jour pour Swift 5

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        view.tintColor = UIColor(red: 0.094, green: 0.239, blue: 0.424, alpha: 1.0)
    }

ou si une couleur simple

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        view.tintColor = UIColor.white
    }

4
dans iOS 13, remplacez "view.backgroundColor" par "view.tintColor".
Bogdan Razvan

2

Dans iOS 7.0.4, j'ai créé un en-tête personnalisé avec son propre XIB. Rien de mentionné ici avant n'a fonctionné. Cela devait être la sous-classe de UITableViewHeaderFooterView pour fonctionner avec le dequeueReusableHeaderFooterViewWithIdentifier:et il semble que la classe soit très têtue en ce qui concerne la couleur d'arrière-plan. J'ai finalement ajouté une UIView (vous pouvez le faire avec du code ou IB) avec le nom customBackgroudView, puis définir sa propriété backgroundColor. Dans layoutSubviews: j'ai défini le cadre de cette vue sur des limites. Il fonctionne avec iOS 7 et ne donne aucun problème.

// in MyTableHeaderView.xib drop an UIView at top of the first child of the owner
// first child becomes contentView

// in MyTableHeaderView.h
@property (nonatomic, weak) IBOutlet UIView * customBackgroundView;

// in MyTableHeaderView.m
-(void)layoutSubviews;
{
    [super layoutSubviews];

    self.customBackgroundView.frame = self.bounds;
}
// if you don't have XIB / use IB, put in the initializer:
-(id)initWithReuseIdentifier:(NSString *)reuseIdentifier
{
    ...
    UIView * customBackgroundView = [[UIView alloc] init];
    [self.contentView addSubview:customBackgroundView];
    _customBackgroundView = customBackgroundView;
    ...
}


// in MyTableViewController.m
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    MyTableHeaderView * header = [self.tableView
                                          dequeueReusableHeaderFooterViewWithIdentifier:@"MyTableHeaderView"];
    header.customBackgroundView.backgroundColor = [UIColor redColor];
    return header;
}

2

Il suffit de changer la couleur du calque de la vue d'en-tête

- (UIView *) tableView: (UITableView *) tableView viewForHeaderInSection: section (NSInteger) 
{
  UIView * headerView = [[[UIView alloc] initWithFrame: CGRectMake (0, 0, tableView.bounds.size.width, 30)] autorelease];
 headerView.layer.backgroundColor = [UIColor clearColor] .CGColor
}


2

Si quelqu'un a besoin de rapidité, conserve le titre:

override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let view = UIView(frame: CGRect(x: 0,y: 0,width: self.tableView.frame.width, height: 30))
    view.backgroundColor = UIColor.redColor()
    let label = UILabel(frame: CGRect(x: 15,y: 5,width: 200,height: 25))
    label.text = self.tableView(tableView, titleForHeaderInSection: section)
    view.addSubview(label)
    return view
}

2

J'ai reçu un message de Xcode via le journal de la console

[TableView] La définition de la couleur d'arrière-plan sur UITableViewHeaderFooterView est obsolète. Veuillez définir une UIView personnalisée avec la couleur d'arrière-plan souhaitée sur la propriété backgroundView à la place.

Ensuite, je crée simplement un nouvel UIView et le mets en arrière-plan de HeaderView. Ce n'est pas une bonne solution mais c'est aussi simple que le dit Xcode.


2

Dans mon cas, cela a fonctionné comme ceci:

let headerIdentifier = "HeaderIdentifier"
let header = self.tableView.dequeueReusableHeaderFooterView(withIdentifier: headerIdentifier)
header.contentView.backgroundColor = UIColor.white

2

Définissez simplement la couleur d'arrière-plan de la vue d'arrière-plan:

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int){         
  let tableHeader = view as! UITableViewHeaderFooterView        
  tableHeader.backgroundView?.backgroundColor = UIColor.white     
}

1

Avec RubyMotion / RedPotion, collez-le dans votre TableScreen:

  def tableView(_, willDisplayHeaderView: view, forSection: section)
    view.textLabel.textColor = rmq.color.your_text_color
    view.contentView.backgroundColor = rmq.color.your_background_color
  end

Fonctionne comme un charme!


1

Pour swift 5 +

Dans la willDisplayHeaderViewméthode

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {

     //For Header Background Color
     view.tintColor = .black

    // For Header Text Color
    let header = view as! UITableHeaderFooterView
    header.textLabel?.textColor = .white
}

J'espère que ceci vous aide :]


0

Bien que func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int)cela fonctionne également, vous pouvez y parvenir sans implémenter une autre méthode déléguée. dans votre func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?méthode, vous pouvez utiliser view.contentView.backgroundColor = UIColor.whiteau lieu de celui view.backgroundView?.backgroundColor = UIColor.whitequi ne fonctionne pas. (Je sais que backgroundViewc'est facultatif, mais même quand c'est là, ça ne se réveille pas sans implémenterwillDisplayHeaderView

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.