UITableView - Ändert die Farbe der Abschnittsüberschrift

331

Wie kann ich die Farbe eines Abschnittskopfes in UITableView ändern?

BEARBEITEN : Die Antwort von DJ-S sollte für iOS 6 und höher berücksichtigt werden. Die akzeptierte Antwort ist veraltet.

Ilya Suzdalnitski
quelle
3
Ich schätze die Bearbeitung neuer RE-iOS-Versionen sehr.
Suz

Antworten:

393

Hoffentlich diese Methode aus dem UITableViewDelegate Protokoll beginnen:

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

Schnell:

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
}

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

Ersetzen Sie [UIColor redColor]durch was auch immer UIColorSie möchten. Möglicherweise möchten Sie auch die Abmessungen von anpassen headerView.

Alex Reynolds
quelle
17
Es kann auch hilfreich sein, die Größe der Abschnittsüberschriften mithilfe von self.tableView.sectionHeaderHeight anzupassen. Andernfalls haben Sie möglicherweise Probleme, den Text anzuzeigen, den Sie für den Abschnittstitel anzeigen.
Tony Lenzi
Funktioniert [UIColor xxxColor]jedoch gut, wenn ich eine benutzerdefinierte Farbe probiere, wie ich sie von Photoshop erhalten kann (mit der UIColor red:green:blue:alpha:ist sie also nur weiß. Mache ich etwas falsch?
Matej
Stellen Sie eine separate Frage und wir werden versuchen zu helfen. Quellcode einschließen.
Alex Reynolds
12
Beachten Sie, dass diese Antwort (solange sie korrekt ist) einfach eine UIView ohne Inhalt zurückgibt.
Greg M. Krsak
7
Dies sind ziemlich veraltete Informationen, und das Erstellen einer anderen Ansicht ist nicht die beste Antwort. Die Idee ist, die richtige Ansicht zu erhalten und die Farbe oder den Farbton darauf zu ändern. Die Antwort unten mit willDisplayHeaderView ist ein viel besserer Ansatz.
Alex Zavatone
741

Dies ist eine alte Frage, aber ich denke, die Antwort muss aktualisiert werden.

Bei dieser Methode müssen Sie keine eigene benutzerdefinierte Ansicht definieren und erstellen. In iOS 6 und höher können Sie die Hintergrundfarbe und die Textfarbe einfach ändern, indem Sie die definieren

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

Abschnitt delegieren Methode

Zum Beispiel:

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

Entnommen aus meinem Beitrag hier: https://happyteamlabs.com/blog/ios-how-to-customize-table-view-header-and-footer-colors/

Schnelles 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.
quelle
2
Ich hatte keine Ahnung, dass dies überhaupt zum SDK hinzugefügt wurde. Brillant! Absolut die richtige Antwort.
JRod
1
OP - Bitte aktualisieren Sie die akzeptierte Antwort auf diese. Viel sauberer als die alten Ansätze.
Kyle Clegg
10
Das scheint bei mir nicht zu funktionieren. Die Textfarbe funktioniert, aber nicht der Farbton für den Header-Hintergrund. Ich bin auf iOS 7.0.4
Zeeple
10
user1639164, Sie können header.backgroundView.backgroundColor = [UIColor blackColor] verwenden; um den Farbton für den Header-Hintergrund festzulegen.
8 慭 流 觞
2
@ Kent es ist offensichtlich eine Weile her, aber für zukünftige Leute wird die header.contentView.backgroundColor = [UIColor blackColor];Option Ihnen einen undurchsichtigen Header geben
SparkyRobinson
98

So ändern Sie die Textfarbe.

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
quelle
18
Danke DoctorG - Das war nützlich. Übrigens - um das von der dataSource bereitgestellte vorhandene Label beizubehalten, habe ich die zweite Zeile folgendermaßen geändert: label.text = [tableView.dataSource tableView: tableView titleForHeaderInSection: section]; Könnte eine schlechte Form sein, aber es hat bei mir funktioniert. Vielleicht kann das jemand anderem helfen.
JJ Rohrer
1
@JJ Dieses Formular ist in Ordnung, da Sie dieselbe Methode aufrufen, die Sie ursprünglich zum Definieren des Abschnittskopfs der Tabelle verwendet haben.
Tim
3
Ich habe die Autorelease entfernt und in eine explizite Version geändert. UITableView-Formatierungsmethoden werden viele, viele Male aufgerufen. Vermeiden Sie nach Möglichkeit die Verwendung von Autorelease.
Memmons
@Harkonian, anstatt die übermittelte Antwort zu ändern, empfehlen Sie bitte die Änderung in einem Kommentar zur Antwort. Es wird als schlechte Form angesehen, den Code anderer Leute mit einer Bearbeitung zu ändern. Rechtschreibfehler, schlechte Formatierung und Grammatik sind Freiwild.
der Blechmann
1
Anstelle von addSubview: UILabel sollten Sie UILabel nur in viewForHeaderInSection zurückgeben. UILable ist-ein UIView bereits :)
Nas Banov
52

Sie können dies tun, wenn Sie eine Kopfzeile mit einer benutzerdefinierten Farbe wünschen:

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

Diese Lösung funktioniert seit iOS 6.0 hervorragend.

Leszek Zarna
quelle
1
hm ... es funktioniert bei mir nicht. versuchte iOS 6 Simulator und iOS 7 Gerät. Hast du so getestet? Wo soll ich es platzieren?
Maxim Kholyavkin
Dies kann in der Anwendung erfolgen: didFinishLaunchingWithOptions: Methode des Anwendungsdelegierten.
Leszek Zarna
Mein Fehler: Ich habe versucht, diesen Weg zu verwenden, während UITableViewStyleGrouped BTW: Um die Textfarbe auf diese Weise zu ändern, sollte stackoverflow.com/a/20778406/751932
Maxim Kholyavkin
Wenn es sich um ein benutzerdefiniertes UIView handelt, geben Sie es einfach in die Methode init ein.
felixwcf
31

Die folgende Lösung funktioniert für Swift 1.2 mit 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
quelle
22

Das Festlegen der Hintergrundfarbe in UITableViewHeaderFooterView ist veraltet. Bitte verwenden Sie contentView.backgroundColorstattdessen.

Alex
quelle
21

Vergessen Sie nicht, diesen Code vom Delegaten hinzuzufügen, da sonst Ihre Ansicht in einigen Fällen im Verhältnis zur Höhe Ihrer Ansicht / Beschriftung abgeschnitten wird oder hinter der Tabelle angezeigt wird.

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 30;
}
Whyoz
quelle
Dies wird nicht mehr benötigt, wenn Sie dem iOS6 folgen und später von Dj S. antworten
Bjinse
21

Sie können dies in ca. 2 Sekunden auf main.storyboard tun.

  1. Wählen Sie Tabellenansicht
  2. Gehen Sie zum Attributinspektor
  3. Listenpunkt
  4. Scrollen Sie nach unten zur Unterüberschrift Ansicht
  5. Hintergrund ändern"

Schauen Sie hier

Steve
quelle
18

Wenn Sie keine benutzerdefinierte Ansicht erstellen möchten, können Sie die Farbe auch folgendermaßen ändern (erfordert 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
quelle
13

Stellen Sie den Hintergrund und die Textfarbe des Abschnittsbereichs ein: (Dank an William Jockuschund 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
quelle
13

Swift 4

Um die zu ändern Hintergrundfarbe , Textbeschriftung Farbe und Schriftart für die Header - Ansicht eines UITableView Abschnitts, außer Kraft setzt einfach willDisplayHeaderViewfür Ihre Tabellenansicht wie folgt:

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

Das hat bei mir perfekt funktioniert; hoffe es hilft dir auch!

Nii Mantse
quelle
Das Festlegen der Hintergrundfarbe in UITableViewHeaderFooterView ist veraltet. Sie müssen stattdessen eine benutzerdefinierte UIView mit Ihrer gewünschten Hintergrundfarbe für die Eigenschaft backgroundView festlegen.
Mojtaba al Moussawi
10

So fügen Sie ein Bild in der Kopfzeile hinzu:

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

Wählen Sie für iOS8 (Beta) und Swift die gewünschte RGB-Farbe und versuchen Sie Folgendes:

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

}}

(Die "Überschreibung" ist vorhanden, da ich in meinem Projekt den UITableViewController anstelle eines normalen UIViewControllers verwende, aber es ist nicht zwingend erforderlich, um die Farbe der Abschnittsüberschriften zu ändern.)

Der Text Ihrer Kopfzeile wird weiterhin angezeigt. Beachten Sie, dass Sie die Höhe der Abschnittsüberschriften anpassen müssen.

Viel Glück.

Corona
quelle
6

SWIFT 2

Ich konnte die Hintergrundfarbe des Abschnitts erfolgreich mit einem zusätzlichen Unschärfeeffekt ändern (was wirklich cool ist). So ändern Sie die Hintergrundfarbe des Abschnitts einfach:

  1. Gehen Sie zuerst zum Storyboard und wählen Sie die Tabellenansicht aus
  2. Gehen Sie zum Attributinspektor
  3. Listenpunkt
  4. Scrollen Sie nach unten zu Ansicht
  5. Hintergrund ändern"

Fügen Sie dann für den Unschärfeeffekt dem Code hinzu:

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

Ich weiß, dass es beantwortet wird, nur für den Fall, dass Sie in Swift Folgendes verwenden

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

iOS 8+

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

Basierend auf der Antwort von @Dj S mit Swift 3. Dies funktioniert hervorragend unter 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
quelle
3

Ich habe ein Projekt mit statischen Tabellenansichtszellen in iOS 7.x. willDisplayHeaderView wird nicht ausgelöst. Diese Methode funktioniert jedoch in Ordnung:

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

Ich denke, dieser Code ist nicht so schlecht.

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

Swift 4 macht es sehr einfach. Fügen Sie dies einfach Ihrer Klasse hinzu und stellen Sie die Farbe nach Bedarf ein.

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

oder wenn eine einfache Farbe

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

Aktualisiert für 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)
    }

oder wenn eine einfache Farbe

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        view.tintColor = UIColor.white
    }
David Sanford
quelle
1
Dies scheint nicht mehr zu funktionieren in iOS 13
GarySabo
4
In iOS 13 ersetzen Sie "view.backgroundColor" durch "view.tintColor".
Bogdan Razvan
2

In iOS 7.0.4 habe ich einen benutzerdefinierten Header mit einem eigenen XIB erstellt. Nichts, was hier zuvor erwähnt wurde, hat funktioniert. Es musste die Unterklasse von UITableViewHeaderFooterView sein, um mit dem zu arbeiten, dequeueReusableHeaderFooterViewWithIdentifier:und es scheint, dass die Klasse in Bezug auf die Hintergrundfarbe sehr hartnäckig ist. Schließlich habe ich eine UIView (Sie können dies entweder mit Code oder IB tun) mit dem Namen customBackgroudView hinzugefügt und dann die backgroundColor-Eigenschaft festgelegt. In layoutSubviews: Ich habe den Rahmen dieser Ansicht auf Grenzen gesetzt. Es funktioniert mit iOS 7 und gibt keine Störungen.

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

Ändern Sie einfach die Farbe der Ebene der Kopfansicht

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

Ramesh
quelle
2

Wenn jemand schnell braucht, behält Titel:

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

Ich habe eine Nachricht von Xcode über das Konsolenprotokoll erhalten

[TableView] Das Festlegen der Hintergrundfarbe in UITableViewHeaderFooterView ist veraltet. Bitte setzen Sie stattdessen eine benutzerdefinierte UIView mit Ihrer gewünschten Hintergrundfarbe auf die Eigenschaft backgroundView.

Dann erstelle ich einfach ein neues UIView und lege es als Hintergrund für HeaderView. Keine gute Lösung, aber es ist einfach, wie Xcode sagte.

Pokotuz
quelle
2

In meinem Fall hat es so funktioniert:

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

Stellen Sie einfach die Hintergrundfarbe der Hintergrundansicht ein:

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

Fügen Sie dies mit RubyMotion / RedPotion in Ihren TableScreen ein:

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

Klappt wunderbar!

Eli Duke
quelle
1

Für schnelle 5 +

In willDisplayHeaderViewMethode

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
}

Ich hoffe das hilft dir :]

Sree Ramana
quelle
0

Obwohl dies func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int)auch funktioniert, können Sie dies erreichen, ohne eine andere Delegatmethode zu implementieren. In Ihrer func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?Methode können Sie view.contentView.backgroundColor = UIColor.whitestattdessen verwenden, view.backgroundView?.backgroundColor = UIColor.whitewas nicht funktioniert. (Ich weiß, dass dies backgroundViewoptional ist, aber selbst wenn es vorhanden ist, wird dies nicht ohne Implementierung aktiviertwillDisplayHeaderView

gutte
quelle