UITableView: cambia il colore dell'intestazione della sezione


331

Come posso cambiare il colore di un'intestazione di sezione in UITableView?

EDIT : la risposta fornita da DJ-S dovrebbe essere considerata per iOS 6 e versioni successive. La risposta accettata non è aggiornata.


3
Apprezzo molto le versioni RE iOS più recenti di modifica.
— Suz

Risposte:


393

Spero che questo metodo dal UITableViewDelegate protocollo ti farà iniziare:

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

Swift:

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
}

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

Sostituisci [UIColor redColor]con UIColorquello che desideri. Potresti anche voler regolare le dimensioni di headerView.


17
Può anche aiutare a regolare le dimensioni dell'intestazione della sezione usando self.tableView.sectionHeaderHeight. Altrimenti, potresti avere problemi a visualizzare il testo visualizzato per il titolo della sezione.
— Tony Lenzi,

Funziona bene con [UIColor xxxColor]quando provo un colore personalizzato come quelli che posso ottenere da Photoshop (quindi usando il UIColor red:green:blue:alpha:, è solo bianco. Sto facendo qualcosa di sbagliato?
— Matej

Pubblica una domanda separata e cercheremo di aiutarti. Includi il codice sorgente.
— Alex Reynolds,

12
Nota che questa risposta (se corretta) restituirà semplicemente una UIView senza contenuto.
— Greg M. Krsak,

7
Si tratta di informazioni piuttosto obsolete e semplicemente creare un'altra vista non è la risposta migliore. L'idea è quella di ottenere la visione corretta e cambiare il colore o la tinta su di esso. La risposta che segue, usando willDisplayHeaderView, è un approccio molto migliore.
— Alex Zavatone,

741

Questa è una vecchia domanda, ma penso che la risposta debba essere aggiornata.

Questo metodo non implica la definizione e la creazione di una vista personalizzata. In iOS 6 e versioni successive, puoi facilmente cambiare il colore di sfondo e il colore del testo definendo

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

metodo delegato di sezione

Per esempio:

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

Tratto dal mio post qui: 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
Non avevo idea che questo fosse stato aggiunto all'SDK. Brillante! Assolutamente la risposta corretta.
— JRod

1
OP - Aggiorna la risposta accettata a questa. Molto più pulito dei vecchi approcci.
— Kyle Clegg,

10
Questo non sembra funzionare per me. Il colore del testo funziona ma non la tinta per lo sfondo dell'intestazione. Sono su iOS 7.0.4
— zeeple

10
user1639164, è possibile utilizzare header.backgroundView.backgroundColor = [UIColor blackColor]; per impostare la tinta per lo sfondo dell'intestazione.
— 慭 慭 流 觞

2
@Kent è passato un po 'di tempo ovviamente, ma per le persone future l' header.contentView.backgroundColor = [UIColor blackColor];opzione ti darà un'intestazione opaca
— SparkyRobinson

98

Ecco come cambiare il colore del testo.

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
Grazie DoctorG - Questo è stato utile. A proposito: per mantenere l'etichetta esistente fornita da dataSource, ho modificato la seconda riga in questo modo: label.text = [tableView.dataSource tableView: tableView titleForHeaderInSection: section]; Potrebbe essere una cattiva forma, ma ha funzionato per me. Forse questo può aiutare qualcun altro.
— JJ Rohrer,

1
@JJ Questo modulo in realtà va bene, dal momento che stai chiamando lo stesso metodo che inizialmente utilizzeresti per definire l'intestazione della sezione della tabella.
— Tim

3
Ho rimosso il rilascio automatico e l'ho modificato in una versione esplicita. I metodi di formattazione UITableView sono chiamati molte, molte volte. Evitare di utilizzare il rilascio automatico quando possibile.
— Memmons

@Harkonian, piuttosto che cambiare la risposta inviata, si prega di raccomandare la modifica in un commento alla risposta. È considerato una cattiva forma cambiare il codice di altre persone con una modifica. Errori di ortografia, formattazione e grammatica errate sono un gioco equo.
— Tin Man,

1
Invece di addSubview: UILabel, dovresti semplicemente restituire UILabel in viewForHeaderInSection. UILable is-a UIView già :)
— Nas Banov,

52

Puoi farlo se vuoi un'intestazione con colore personalizzato:

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

Questa soluzione funziona benissimo da iOS 6.0.


1
hm ... non funziona per me. provato simulatore iOS 6 e dispositivo iOS 7. Hai provato in questo modo? Dove dovrei posizionarlo?
— Maxim Kholyavkin,

Può essere fatto nell'applicazione: didFinishLaunchingWithOptions: metodo del delegato dell'applicazione.
— Leszek Zarna,

colpa mia: ho cercato di usare in questo modo, mentre UITableViewStyleGrouped BTW: per cambiare il colore del testo in questo modo deve essere utilizzato stackoverflow.com/a/20778406/751932
— Maxim Kholyavkin

Se è in UIView personalizzato, basta inserirlo in - metodo init.
— felixwcf,

31

La seguente soluzione funziona per Swift 1.2 con 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

L'impostazione del colore di sfondo su UITableViewHeaderFooterView è stata deprecata. Si prega di utilizzare contentView.backgroundColorinvece.


21

Non dimenticare di aggiungere questo pezzo di codice dal delegato o la tua vista verrà tagliata o apparirà dietro il tavolo in alcuni casi, relativamente all'altezza della tua vista / etichetta.

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

Questo non è più necessario se segui iOS6 e successivamente rispondi di Dj S.
— Bjinse

21

Puoi farlo su main.storyboard in circa 2 secondi.

  1. Seleziona la vista tabella
  2. Vai a Impostazioni attributi
  3. Voce di elenco
  4. Scorri verso il basso fino a visualizzare il sottotitolo
  5. Cambia sfondo"

Dai un'occhiata qui


18

Se non vuoi creare una vista personalizzata, puoi anche cambiare il colore in questo modo (richiede 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

Imposta lo sfondo e il colore del testo dell'area della sezione: (Grazie a William Jockusche 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

Per modificare il colore di sfondo , il colore dell'etichetta del testo e il carattere per la vista dell'intestazione di una sezione UITableView, basta sostituire willDisplayHeaderViewla vista della tabella in questo modo:

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

Ha funzionato perfettamente per me; spero che ti aiuti anche tu!


L'impostazione del colore di sfondo su UITableViewHeaderFooterView è stata deprecata. È invece necessario impostare un UIView personalizzato con il colore di sfondo desiderato sulla proprietà backgroundView.
— Mojtaba al Moussawi,

10

Ecco come aggiungere un'immagine nella vista dell'intestazione:

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

Per iOS8 (Beta) e Swift scegli il colore RGB che desideri e prova questo:

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

}

(La "sostituzione" è presente poiché sto usando UITableViewController invece di un normale UIViewController nel mio progetto, ma non è obbligatorio per cambiare il colore dell'intestazione della sezione)

Il testo dell'intestazione sarà comunque visualizzato. Nota che dovrai regolare l'altezza dell'intestazione della sezione.

In bocca al lupo.


6

SWIFT 2

Sono stato in grado di cambiare con successo il colore di sfondo della sezione con un effetto di sfocatura aggiunto (che è davvero fantastico). Per cambiare facilmente il colore di sfondo della sezione:

  1. Prima vai su Storyboard e seleziona la vista tabella
  2. Vai a Impostazioni attributi
  3. Voce di elenco
  4. Scorri verso il basso fino a Visualizza
  5. Cambia sfondo"

Quindi per l'effetto sfocatura, aggiungi al codice:

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

So che ha una risposta, per ogni evenienza, in Swift usa quanto segue

    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

Basato sulla risposta di @Dj S, usando Swift 3. Funziona benissimo su 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

Ho un progetto che utilizza celle di visualizzazione di tabelle statiche, in iOS 7.x. willDisplayHeaderView non si attiva. Tuttavia, questo metodo funziona bene:

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

Penso che questo codice non sia poi così male.

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 lo rende molto semplice. Basta aggiungere questo alla tua classe e impostare il colore secondo necessità.

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

o se un colore semplice

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

Aggiornato per 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)
    }

o se un colore semplice

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

4
in iOS 13 sostituire "view.backgroundColor" in "view.tintColor".
— Bogdan Razvan,

2

In iOS 7.0.4 ho creato un'intestazione personalizzata con il proprio XIB. Nulla di menzionato qui prima ha funzionato. Doveva essere la sottoclasse di UITableViewHeaderFooterView per funzionare con dequeueReusableHeaderFooterViewWithIdentifier:e sembra che la classe sia molto testarda riguardo al colore di sfondo. Quindi alla fine ho aggiunto un UIView (potresti farlo con codice o IB) con il nome customBackgroudView, e quindi ho impostato la proprietà backgroundColor. In layoutSubviews: ho impostato la cornice di quella vista su limiti. Funziona con iOS 7 e non dà problemi.

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

Basta cambiare il colore del livello della vista dell'intestazione

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


2

Se qualcuno ha bisogno di rapidità, mantiene il titolo:

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

Ho ricevuto un messaggio da Xcode attraverso il registro della console

[TableView] L'impostazione del colore di sfondo su UITableViewHeaderFooterView è diventata obsoleta. Si prega di impostare una UIView personalizzata con il colore di sfondo desiderato sulla proprietà backgroundView.

Quindi creo una nuova UIView e la poso come sfondo di HeaderView. Non è una buona soluzione ma è facile come diceva Xcode.


2

Nel mio caso, ha funzionato in questo modo:

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

2

Basta impostare il colore di sfondo della vista di sfondo:

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

1

Con RubyMotion / RedPotion, incollalo nella TableScreen:

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

Funziona come un fascino!


1

Per rapido 5 +

Nel willDisplayHeaderViewmetodo

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
}

Spero che questo ti aiuta :]


0

Anche se func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int)funzionerà anche tu, puoi ottenerlo senza implementare un altro metodo delegato. nel tuo func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?metodo, puoi usare al view.contentView.backgroundColor = UIColor.whiteposto del view.backgroundView?.backgroundColor = UIColor.whitequale non funziona. (So ​​che backgroundViewè facoltativo, ma anche quando è lì, questo non si sveglia senza l'implementazionewillDisplayHeaderView

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.