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.