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

331

Comment puis-je changer la couleur d'un en-tête de section dans UITableView?

EDIT : La réponse fournie par DJ-S doit être prise en compte pour iOS 6 et supérieur. La réponse acceptée est obsolète.

Ilya Suzdalnitski
la source
3
J'apprécie vraiment les nouvelles versions iOS de RE.
Suz

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.

Alex Reynolds
la source
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
}
Dj S
la source
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];
DoctorG
la source
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.

Leszek Zarna
la source
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()

}
Max
la source
22

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

Alex
la source
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;
}
pourquoi
la source
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

Steve
la source
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;
    }
}
William Jockusch
la source
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]];
    }
}
Roozbeh Zabihollahi
la source
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!

Nii Mantse
la source
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;
}
Maulik
la source
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.

Couronne
la source
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

}
AJ Hernandez
la source
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
    }
arango_86
la source
4

iOS 8+

func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        tableView.tableHeaderView?.backgroundColor = UIColor.blue()
}
Gentian Sadiku
la source
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
}
tesla
la source
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];
David DelMonte
la source
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]];
        }
 }
Vinoth
la source
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
}
mmtootmm
la source
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
    }
David Sanford
la source
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;
}
Maksymilian Wojakowski
la source
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
}

Ramesh
la source
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
}
Cmar
la source
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.

Pokotuz
la source
2

Dans mon cas, cela a fonctionné comme ceci:

let headerIdentifier = "HeaderIdentifier"
let header = self.tableView.dequeueReusableHeaderFooterView(withIdentifier: headerIdentifier)
header.contentView.backgroundColor = UIColor.white
Idrees Ashraf
la source
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     
}
Lukas Mohs
la source
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!

Eli Duke
la source
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 :]

Sree Ramana
la source
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

gutte
la source