UITableView - cambia el color del encabezado de la sección

331

¿Cómo puedo cambiar el color de un encabezado de sección en UITableView?

EDITAR : La respuesta proporcionada por DJ-S debe considerarse para iOS 6 y superior. La respuesta aceptada no está actualizada.

Ilya Suzdalnitski
fuente
3
Realmente aprecio la edición RE más nuevas versiones de iOS.
Suz

Respuestas:

393

Esperemos que este método del UITableViewDelegateprotocolo lo ayude a comenzar:

C objetivo:

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

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

Reemplace [UIColor redColor]con lo UIColorque quiera. También es posible que desee ajustar las dimensiones de headerView.

Alex Reynolds
fuente
17
También puede ayudar a ajustar el tamaño del encabezado de sección usando self.tableView.sectionHeaderHeight. De lo contrario, puede tener problemas para ver el texto que muestra para el título de la sección.
Tony Lenzi el
[UIColor xxxColor]Sin embargo, funciona bien cuando pruebo un color personalizado como los que puedo obtener de Photoshop (así que usando el UIColor red:green:blue:alpha:, es solo blanco. ¿Estoy haciendo algo mal?
Matej
Publica una pregunta por separado e intentaremos ayudarte. Incluir código fuente.
Alex Reynolds el
12
Tenga en cuenta que esta respuesta (aunque correcta) simplemente devolverá una UIView sin contenido.
Greg M. Krsak
77
Esta es información bastante desactualizada y simplemente crear otra vista no es la mejor respuesta. La idea es obtener la vista adecuada y cambiar el color o el tinte. La respuesta a continuación con willDisplayHeaderView es un enfoque mucho mejor.
Alex Zavatone
741

Esta es una vieja pregunta, pero creo que la respuesta debe actualizarse.

Este método no implica definir y crear su propia vista personalizada. En iOS 6 y versiones posteriores, puede cambiar fácilmente el color de fondo y el color del texto definiendo el

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

método de delegado de sección

Por ejemplo:

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

Tomado de mi publicación aquí: 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
fuente
2
No tenía idea de que esto se hubiera agregado al SDK. ¡Brillante! Absolutamente la respuesta correcta.
JRod
1
OP: actualice la respuesta aceptada a esta. Mucho más limpio que los viejos enfoques.
Kyle Clegg
10
Esto no parece estar funcionando para mí. El color del texto funciona pero no el tinte del fondo del encabezado. Estoy en iOS 7.0.4
zeeple
10
user1639164, puede usar header.backgroundView.backgroundColor = [UIColor blackColor]; para establecer el tinte para el fondo del encabezado.
慭 慭 流 觞
2
@Kent obviamente ha pasado un tiempo, pero para las personas futuras la header.contentView.backgroundColor = [UIColor blackColor];opción te dará un encabezado opaco
SparkyRobinson
98

Aquí se explica cómo cambiar el color del 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
fuente
18
Gracias DoctorG - Esto fue útil. Por cierto, para mantener la etiqueta existente proporcionada por dataSource, modifiqué la segunda línea de la siguiente manera: label.text = [tableView.dataSource tableView: tableView titleForHeaderInSection: section]; Podría ser una mala forma, pero funcionó para mí. Quizás esto pueda ayudar a alguien más.
JJ Rohrer
1
@JJ Ese formulario está realmente bien, ya que está llamando al mismo método que usaría inicialmente para definir el encabezado de sección de la tabla.
Tim
3
Eliminé el lanzamiento automático y lo cambié a un lanzamiento explícito. Los métodos de formateo de UITableView se llaman muchas, muchas veces. Evite usar la liberación automática cuando sea posible.
memmons
@Harkonian, en lugar de cambiar la respuesta enviada, recomiende el cambio en un comentario a la respuesta. Se considera mala forma de cambiar el código de otras personas con una edición. Los errores ortográficos, el mal formato y la gramática son juegos justos.
The Tin Man
1
En lugar de addSubview: UILabel, debería devolver UILabel en viewForHeaderInSection. UILable ya es una UIView :)
Nas Banov
52

Puede hacer esto si desea un encabezado con color personalizado:

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

Esta solución funciona muy bien desde iOS 6.0.

Leszek Zarna
fuente
1
hm ... no me funciona. Probé el simulador de iOS 6 y el dispositivo iOS 7. ¿Probaste de esta manera? ¿Dónde debería colocarlo?
Maxim Kholyavkin
Se puede hacer en la aplicación: didFinishLaunchingWithOptions: método de delegado de la aplicación.
Leszek Zarna
mi culpa: intenté usarlo de esta manera mientras UITableViewStyleGrouped BTW: para cambiar el color del texto de esta manera debería usarse stackoverflow.com/a/20778406/751932
Maxim Kholyavkin
Si está en UIView personalizado, simplemente colóquelo en el método init.
felixwcf
31

La siguiente solución funciona para 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()

}
Max
fuente
22

La configuración del color de fondo en UITableViewHeaderFooterView ha quedado en desuso. Por favor, use contentView.backgroundColoren su lugar.

Alex
fuente
21

No olvide agregar este fragmento de código del delegado o, en algunos casos, su vista se cortará o aparecerá detrás de la tabla, en relación con la altura de su vista / etiqueta.

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 30;
}
whyoz
fuente
Esto ya no es necesario si sigues el iOS6 y luego respondes por Dj S.
Bjinse
21

Puede hacerlo en main.storyboard en aproximadamente 2 segundos.

  1. Seleccionar vista de tabla
  2. Ir al inspector de atributos
  3. Elemento de la lista
  4. Desplácese hacia abajo para Ver subtítulo
  5. Cambiar el fondo"

Echa un vistazo aquí

Steve
fuente
18

Si no desea crear una vista personalizada, también puede cambiar el color de esta manera (requiere 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
fuente
13

Establezca el fondo y el color del texto del área de sección: (Gracias a William Jockuschy 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
fuente
13

Swift 4

Para cambiar el color de fondo , el color de la etiqueta de texto y la fuente para la Vista de encabezado de una sección UITableView, simplemente anule willDisplayHeaderViewla vista de la tabla de la siguiente manera:

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

Esto funcionó perfectamente para mí; Espero que te ayude también!

Nii Mantse
fuente
La configuración del color de fondo en UITableViewHeaderFooterView ha quedado en desuso. En su lugar, debe establecer una UIView personalizada con el color de fondo deseado en la propiedad backgroundView.
mojtaba al moussawi
10

Aquí le mostramos cómo agregar una imagen en la vista de encabezado:

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

Para iOS8 (Beta) y Swift, elija el color RGB que desee y pruebe esto:

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 "anulación" está ahí ya que estoy usando el UITableViewController en lugar de un UIViewController normal en mi proyecto, pero no es obligatorio para cambiar el color del encabezado de la sección)

El texto de su encabezado aún se verá. Tenga en cuenta que deberá ajustar la altura del encabezado de sección.

Buena suerte.

Corona
fuente
6

SWIFT 2

Pude cambiar con éxito el color de fondo de la sección con un efecto de desenfoque agregado (que es realmente genial). Para cambiar fácilmente el color de fondo de la sección:

  1. Primero vaya a Storyboard y seleccione la Vista de tabla
  2. Ir al inspector de atributos
  3. Elemento de la lista
  4. Desplácese hacia abajo para ver
  5. Cambiar el fondo"

Luego, para el efecto de desenfoque, agregue al 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 Hernández
fuente
5

Sé que se respondió, por si acaso, en Swift use lo siguiente

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

iOS 8+

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

Basado en la respuesta de @Dj S, usando Swift 3. Esto funciona muy bien en 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
fuente
3

Tengo un proyecto que usa celdas de vista de tabla estática, en iOS 7.x. willDisplayHeaderView no se dispara. Sin embargo, este método funciona 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
fuente
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
fuente
3

Creo que este código no es tan malo.

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

Swift 4 lo hace muy fácil. Simplemente agregue esto a su clase y configure el color según sea necesario.

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 si un color simple

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

Actualizado para 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 si un color simple

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

En iOS 7.0.4 creé un encabezado personalizado con su propio XIB. Nada de lo mencionado aquí funcionó antes. Tenía que ser la subclase de UITableViewHeaderFooterView para trabajar con dequeueReusableHeaderFooterViewWithIdentifier:y parece que la clase es muy terca con respecto al color de fondo. Así que finalmente agregué una UIView (puede hacerlo con código o IB) con el nombre customBackgroudView, y luego configuré su propiedad backgroundColor. En layoutSubviews: establecí el marco de esa vista en los límites. Funciona con iOS 7 y no presenta fallas técnicas.

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

Simplemente cambie el color de la capa de la vista de encabezado

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

Ramesh
fuente
2

Si alguien necesita rapidez, mantiene el 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
fuente
2

Recibí un mensaje de Xcode a través del registro de la consola

[TableView] La configuración del color de fondo en UITableViewHeaderFooterView ha quedado en desuso. En su lugar, configure una UIView personalizada con el color de fondo deseado para la propiedad backgroundView.

Luego, creo un nuevo UIView y lo coloco como fondo de HeaderView. No es una buena solución, pero es fácil como dijo Xcode.

Pokotuz
fuente
2

En mi caso, funcionó así:

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

Simplemente configure el color de fondo de la vista de fondo:

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

Con RubyMotion / RedPotion, pegue esto en su 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 de maravilla!

Eli Duke
fuente
1

Para swift 5 +

En el 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 esto te ayude :]

Sree Ramana
fuente
0

Aunque func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int)funcionará bien, puede lograr esto sin implementar otro método de delegado. en su func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?método, puede usar en view.contentView.backgroundColor = UIColor.whitelugar de lo view.backgroundView?.backgroundColor = UIColor.whiteque no funciona. (Sé que backgroundViewes opcional, pero incluso cuando está allí, no funciona sin implementarwillDisplayHeaderView

gutte
fuente