UITableView - alterar a cor do cabeçalho da seção

331

Como posso alterar a cor de um cabeçalho de seção no UITableView?

EDIT : A resposta fornecida pelo DJ-S deve ser considerada para o iOS 6 e superior. A resposta aceita está desatualizada.

Ilya Suzdalnitski
fonte
3
Eu realmente aprecio a edição de versões mais recentes do iOS para iOS.
Suz

Respostas:

393

Esperamos que este método do UITableViewDelegateprotocolo o inicie:

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

Rápido:

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
}

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

Substitua [UIColor redColor]pelo que UIColorvocê desejar. Você também pode querer ajustar as dimensões de headerView.

Alex Reynolds
fonte
17
Também pode ajudar a ajustar o tamanho do cabeçalho da seção usando self.tableView.sectionHeaderHeight. Caso contrário, você poderá ter problemas para visualizar o texto exibido para o título da seção.
Tony Lenzi
Funciona bem com [UIColor xxxColor]no entanto, quando tento uma cor personalizada como que eu posso começar a partir de photoshop (isso usando o UIColor red:green:blue:alpha:, é apenas branco Estou fazendo algo errado.?
Matej
Poste uma pergunta separada e tentaremos ajudar. Inclua código fonte.
Alex Reynolds
12
Observe que esta resposta (enquanto correta) retornará simplesmente um UIView sem conteúdo.
Greg M. Krsak
7
Esta é uma informação bastante desatualizada e simplesmente criar outra visualização não é a melhor resposta. A idéia é obter a visão correta e alterar a cor ou a tonalidade. A resposta abaixo usando o willDisplayHeaderView é uma abordagem muito melhor.
Alex Zavatone #
741

Esta é uma pergunta antiga, mas acho que a resposta precisa ser atualizada.

Este método não envolve a definição e a criação de sua própria visualização personalizada. No iOS 6 e superior, você pode alterar facilmente a cor do plano de fundo e a cor do texto, definindo o

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

método delegado de seção

Por exemplo:

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

Retirado do meu post aqui: 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
fonte
2
Eu não fazia ideia de que isso havia sido adicionado ao SDK. Brilhante! Absolutamente a resposta correta.
jrod
1
OP - Atualize a resposta aceita para esta. Muito mais limpo do que as abordagens antigas.
precisa saber é o seguinte
10
Isso não parece estar funcionando para mim. A cor do texto funciona, mas não a tonalidade do plano de fundo do cabeçalho. Estou no iOS 7.0.4
zeeple
10
user1639164, você pode usar header.backgroundView.backgroundColor = [UIColor blackColor]; para definir a tonalidade do plano de fundo do cabeçalho.
慭慭流觞
2
@Kent faz um tempo, obviamente, mas para futuras pessoas a header.contentView.backgroundColor = [UIColor blackColor];opção fornecerá um cabeçalho opaco #
SparkyRobinson 10/10
98

Veja como alterar a cor do texto.

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
fonte
18
Obrigado DoctorG - Isso foi útil. BTW - para manter o rótulo existente fornecido pelo dataSource, modifiquei a 2ª linha da seguinte maneira: label.text = [tableView.dataSource tableView: tableView titleForHeaderInSection: section]; Pode ser uma má forma, mas funcionou para mim. Talvez isso possa ajudar outra pessoa.
JJ Rohrer
1
@JJ Esse formulário é realmente bom, já que você está chamando o mesmo método que usaria inicialmente para definir o cabeçalho da seção da tabela.
Tim
3
Eu removi o autorelease e mudei para um release explícito. Os métodos de formatação UITableView são chamados muitas e muitas vezes. Evite usar o autorelease quando possível.
memmons
@Harkonian, em vez de alterar a resposta enviada, recomende a alteração em um comentário da resposta. É considerado ruim alterar o código de outras pessoas com uma edição. Erros de ortografia, formatação e gramática incorretas são um jogo justo.
o homem de lata
1
Em vez de addSubview: UILabel, você deve retornar o UILabel em viewForHeaderInSection. UILable é-a já UIView :)
Nas Banov
52

Você pode fazer isso se desejar um cabeçalho com cor personalizada:

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

Esta solução funciona muito bem desde o iOS 6.0.

Leszek Zarna
fonte
1
hm ... não funciona para mim. tentei o simulador iOS 6 e o ​​dispositivo iOS 7. Você testou desta maneira? Onde devo colocá-lo?
Maxim Kholyavkin
Isso pode ser feito no aplicativo: didFinishLaunchingWithOptions: método de delegação do aplicativo.
Leszek Zarna
minha culpa: Eu tentei usar este caminho, enquanto UITableViewStyleGrouped BTW: a cor mudança de texto desta forma deve ser usado stackoverflow.com/a/20778406/751932
Maxim Kholyavkin
Se estiver no UIView personalizado, basta colocá-lo no método - init.
Felixwcf 23/03
31

A solução a seguir funciona no Swift 1.2 com iOS 8 ou superior

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

}
Máx.
fonte
22

A configuração da cor de plano de fundo no UITableViewHeaderFooterView foi preterida. Por favor, use em seu contentView.backgroundColorlugar.

Alex
fonte
21

Não se esqueça de adicionar esse código ao delegado ou, em alguns casos, sua visualização será cortada ou, por vezes, exibida atrás da tabela, em relação à altura da visualização / etiqueta.

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 30;
}
whyoz
fonte
Este não é mais necessário se você seguir a resposta iOS6 e mais tarde por Dj S.
Bjinse
21

Você pode fazer isso no main.storyboard em cerca de 2 segundos.

  1. Selecionar exibição de tabela
  2. Ir para o Inspetor de atributos
  3. Item da lista
  4. Role para baixo até Visualizar subtítulo
  5. Mude o fundo"

Dê uma olhada aqui

Steve
fonte
18

Se você não deseja criar uma visualização personalizada, também pode alterar a cor desta forma (requer 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
fonte
13

Defina a cor do plano de fundo e do texto da área de seção: (Agradecimentos 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]];
    }
}
Roozbeh Zabihollahi
fonte
13

Swift 4

Para alterar a cor do plano de fundo , a cor do rótulo de texto e a fonte da Visualização do cabeçalho de uma seção UITableView, substitua simplesmente willDisplayHeaderViewa visualização da tabela da seguinte maneira:

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

Isso funcionou perfeitamente para mim; espero que ajude você também!

Nii Mantse
fonte
A configuração da cor de plano de fundo no UITableViewHeaderFooterView foi preterida. Você deve definir um UIView personalizado com a cor de plano de fundo desejada para a propriedade backgroundView.
Mojtaba al moussawi
10

Veja como adicionar uma imagem na exibição de cabeçalho:

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

Para iOS8 (Beta) e Swift, escolha a cor RGB desejada e tente o seguinte:

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

}

(A "substituição" existe desde que eu estou usando o UITableViewController em vez de um UIViewController normal no meu projeto, mas não é obrigatório alterar a cor do cabeçalho da seção)

O texto do seu cabeçalho ainda será visto. Observe que você precisará ajustar a altura do cabeçalho da seção.

Boa sorte.

Corona
fonte
6

SWIFT 2

Consegui alterar com êxito a cor de fundo da seção com um efeito de desfoque adicional (o que é muito legal). Para alterar facilmente a cor de fundo da seção:

  1. Primeiro, vá para o Storyboard e selecione a Visualização da tabela
  2. Ir para o Inspetor de atributos
  3. Item da lista
  4. Role para baixo até Visualizar
  5. Mude o fundo"

Em seguida, para efeito de desfoque, adicione ao código:

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
fonte
5

Eu sei que é respondido, apenas no caso, In Swift use o seguinte

    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
fonte
4

iOS 8 ou superior

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

Com base na resposta do @Dj S, usando o Swift 3. Isso funciona muito bem no 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
fonte
3

Eu tenho um projeto usando células de exibição de tabela estática, no iOS 7.x. O willDisplayHeaderView não é acionado. No entanto, este método funciona bem:

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

Eu acho que esse código não é tão ruim.

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
fonte
3

Swift 4 facilita muito. Basta adicionar isso à sua turma e definir a cor conforme necessário.

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 se uma cor simples

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

Atualizado para o 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 se uma cor simples

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        view.tintColor = UIColor.white
    }
David Sanford
fonte
4
no iOS 13, substitua "view.backgroundColor" por "view.tintColor".
Bogdan Razvan
2

No iOS 7.0.4, criei um cabeçalho personalizado com seu próprio XIB. Nada mencionado aqui antes funcionou. Tinha que ser a subclasse do UITableViewHeaderFooterView para trabalhar com o dequeueReusableHeaderFooterViewWithIdentifier:e parece que a classe é muito teimosa em relação à cor do plano de fundo. Então, finalmente, adicionei um UIView (você pode fazê-lo com código ou IB) com o nome customBackgroudView e, em seguida, defina sua propriedade backgroundColor. Em layoutSubviews: defino os limites dessa exibição como limites. Ele funciona com o iOS 7 e não oferece falhas.

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

Apenas mude a cor da camada da vista do cabeçalho

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

Ramesh
fonte
2

Se alguém precisar de agilidade, mantenha o título:

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
fonte
2

Recebi uma mensagem do Xcode através do log do console

[TableView] A configuração da cor de plano de fundo no UITableViewHeaderFooterView foi preterida. Em vez disso, defina um UIView personalizado com a cor de fundo desejada para a propriedade backgroundView.

Depois, apenas crio um novo UIView e o coloco como plano de fundo do HeaderView. Não é uma boa solução, mas fácil como o Xcode disse.

Pokotuz
fonte
2

No meu caso, funcionou assim:

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

Basta definir a cor do plano de fundo da vista de plano de fundo:

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

Com o RubyMotion / RedPotion, cole-o no seu TableScreen:

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

Funciona como um encanto!

Eli Duke
fonte
1

Para rápido 5 +

No willDisplayHeaderViewmétodo

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
}

Espero que isso ajude você :]

Sree Ramana
fonte
0

Embora func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int)funcione bem, você pode conseguir isso sem implementar outro método delegado. no seu func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?método, você pode usar em view.contentView.backgroundColor = UIColor.whitevez do view.backgroundView?.backgroundColor = UIColor.whiteque não está funcionando. (Eu sei que backgroundViewé opcional, mas mesmo quando existe, isso não é possível sem a implementaçãowillDisplayHeaderView

gutte
fonte