UITableView - изменить цвет заголовка раздела


331

Как я могу изменить цвет заголовка раздела в UITableView?

РЕДАКТИРОВАТЬ : Ответ, предоставленный DJ-S следует рассмотреть для iOS 6 и выше. Принятый ответ устарел.


3
Я действительно ценю редактировать RE более новые версии iOS.
Суз

Ответы:


393

Надеюсь, этот метод из UITableViewDelegateпротокола поможет вам начать:

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
}

Обновлено 2017:

Свифт 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
    }

Замените [UIColor redColor]на то, что UIColorвы хотите. Вы также можете настроить размеры headerView.


17
Это также может помочь отрегулировать размер заголовка раздела, используя self.tableView.sectionHeaderHeight. В противном случае у вас могут возникнуть проблемы с отображением текста, отображаемого для заголовка раздела.
Тони Лензи

[UIColor xxxColor]Тем не менее, работает нормально, когда я пытаюсь использовать пользовательский цвет, подобный тому, который можно получить из фотошопа (поэтому, используя UIColor red:green:blue:alpha:, он просто белый. Я что-то не так делаю?
Matej

Разместите отдельный вопрос, и мы постараемся помочь. Включить исходный код
Алекс Рейнольдс

12
Обратите внимание, что этот ответ (хотя и правильный) просто вернет UIView без содержимого.
Грег М. Krsak

7
Это довольно устаревшая информация, и просто создание другого представления не лучший ответ. Идея состоит в том, чтобы получить правильный вид и изменить цвет или оттенок на нем. Ответ ниже с использованием willDisplayHeaderView - намного лучший подход.
Алекс Заватоне

741

Это старый вопрос, но я думаю, что ответ должен быть обновлен.

Этот метод не включает определение и создание собственного пользовательского представления. В iOS 6 и выше вы можете легко изменить цвет фона и цвет текста, определив

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

метод делегата секции

Например:

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

Взято из моего поста здесь: https://happyteamlabs.com/blog/ios-how-to-customize-table-view-header-and-footer-colors/

Свифт 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
Я понятия не имел, что это было даже добавлено в SDK. Brilliant! Абсолютно правильный ответ.
JRod

1
ОП - Пожалуйста, обновите принятый ответ на этот. Гораздо чище, чем старые подходы.
Кайл Клегг

10
Кажется, это не работает для меня. Цвет текста работает, но не оттенок для фона заголовка. Я на iOS 7.0.4
Zeeple

10
user1639164, вы можете использовать header.backgroundView.backgroundColor = [UIColor blackColor]; установить оттенок для фона заголовка.
觞 慭 流 觞

2
@ Кент, очевидно, уже давно, но для будущих людей header.contentView.backgroundColor = [UIColor blackColor];опция даст вам непрозрачный заголовок
SparkyRobinson

98

Вот как можно изменить цвет текста.

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
Спасибо DoctorG - Это было полезно. Кстати, чтобы сохранить существующую метку, предоставленную источником данных, я изменил 2-ю строку следующим образом: label.text = [tableView.dataSource tableView: tableView titleForHeaderInSection: section]; Может быть плохая форма, но у меня это сработало. Может быть, это может помочь кому-то еще.
Джей Джей Рорер

1
@JJ Эта форма на самом деле в порядке, так как вы вызываете тот же метод, который изначально использовали для определения заголовка раздела таблицы.
Тим

3
Я удалил авто-релиз и изменил его на явный выпуск. Методы форматирования UITableView вызываются много, много раз. Избегайте использования автоматического выпуска, когда это возможно.
меммон

@ Harkonian, вместо того, чтобы изменить представленный ответ, пожалуйста, порекомендуйте изменить комментарий к ответу. Это считается плохой формой, чтобы изменить код других людей с помощью редактирования. Орфографические ошибки, а также плохое форматирование и грамматика являются честной игрой.
Жестянщик

1
Вместо addSubview: UILabel вы должны просто возвращать UILabel в viewForHeaderInSection. UILable - это уже UIView :)
Nas Banov

52

Вы можете сделать это, если вы хотите заголовок с пользовательским цветом:

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

Это решение прекрасно работает с iOS 6.0.


1
хм ... это не работает для меня. попробовал симулятор iOS 6 и устройство iOS 7. Вы проверяли этот способ? Где я должен это разместить?
Максим Холявкин

Это можно сделать в приложении: didFinishLaunchingWithOptions: метод делегата приложения.
Лешек Зарна

моя ошибка: я пытался использовать этот способ, пока UITableViewStyleGrouped BTW: для изменения цвета текста этим способом следует использовать stackoverflow.com/a/20778406/751932
Максим Холявкин

Если это в пользовательском UIView, просто поместите его в метод - init.
felixwcf

31

Следующее решение работает для Swift 1.2 с 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

Установка цвета фона для UITableViewHeaderFooterView устарела. Пожалуйста, используйте contentView.backgroundColorвместо этого.


21

Не забудьте добавить этот фрагмент кода от делегата, иначе ваше представление будет обрезано или появится в некоторых случаях за столом, относительно высоты вашего представления / метки.

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

Это больше не нужно, если вы следуете iOS6 и последующему ответу Dj S.
Bjinse

21

Вы можете сделать это на main.storyboard примерно за 2 секунды.

  1. Выберите вид таблицы
  2. Перейти к атрибуту инспектора
  3. Элемент списка
  4. Прокрутите вниз, чтобы просмотреть подзаголовок
  5. Изменить «фон»

Посмотрите здесь


18

Если вы не хотите создавать пользовательский вид, вы также можете изменить цвет следующим образом (требуется 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

Установите фон и цвет текста области раздела: (Спасибо William Jockuschи 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

Чтобы изменить цвет фона , цвет текста этикетки и шрифт для заголовка Вид в разделе UITableView, просто переопределить willDisplayHeaderViewдля представления таблицы , как так:

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

Это отлично сработало для меня; надеюсь, это вам тоже поможет!


Установка цвета фона для UITableViewHeaderFooterView устарела. Вместо этого вы должны установить пользовательский UIView с желаемым цветом фона для свойства backgroundView.
Мойтаба аль Мусави

10

Вот как добавить изображение в заголовок:

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

Для iOS8 (бета-версия) и Swift выберите нужный цвет RGB и попробуйте это:

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

}

(«Переопределение» существует, поскольку я использую UITableViewController вместо обычного UIViewController в моем проекте, но это не обязательно для изменения цвета заголовка раздела)

Текст вашего заголовка все равно будет виден. Обратите внимание, что вам нужно будет отрегулировать высоту заголовка раздела.

Удачи.


6

SWIFT 2

Мне удалось успешно изменить цвет фона раздела с добавленным эффектом размытия (что действительно здорово). Чтобы легко изменить цвет фона раздела:

  1. Сначала перейдите к раскадровке и выберите вид таблицы
  2. Перейти к атрибуту инспектора
  3. Элемент списка
  4. Прокрутите вниз, чтобы посмотреть
  5. Изменить «Фон»

Затем для эффекта размытия добавьте в код:

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

Я знаю его ответ, на всякий случай, в Swift используйте следующее

    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

Основываясь на ответе @Dj S, используя Swift 3. Это прекрасно работает на 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

У меня есть проект, использующий статические ячейки табличного представления, в iOS 7.x. willDisplayHeaderView не срабатывает. Тем не менее, этот метод работает нормально:

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

Я думаю, что этот код не так уж и плох.

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 делает это очень просто. Просто добавьте это в свой класс и установите цвет по мере необходимости.

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

или если простой цвет

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

Обновлено для 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)
    }

или если простой цвет

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

4
в iOS 13 замените «view.backgroundColor» на «view.tintColor».
Богдан Разван

2

В iOS 7.0.4 я создал собственный заголовок с собственным XIB. Ничто из упомянутого здесь раньше не работало. Это должен был быть подкласс UITableViewHeaderFooterView, чтобы работать с ним, dequeueReusableHeaderFooterViewWithIdentifier:и кажется, что класс очень упрям ​​в отношении цвета фона. Наконец, я добавил UIView (вы можете сделать это с помощью кода или IB) с именем customBackgroudView, а затем установил его свойство backgroundColor. В layoutSubviews: я установил рамку этого вида на границы. Работает с iOS 7 и не дает глюков.

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

Просто измените цвет слоя представления заголовка

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


2

Если кому-то нужен swift, сохраните заголовок:

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

Я получил сообщение от Xcode через консольный журнал

[TableView] Установка цвета фона для UITableViewHeaderFooterView устарела. Пожалуйста, установите вместо этого свойство UIView с желаемым цветом фона для свойства backgroundView.

Затем я просто создаю новый UIView и кладу его в качестве фона HeaderView. Не хорошее решение, но оно простое, как сказал Xcode.


2

В моем случае это сработало так:

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

2

Просто установите цвет фона для фона:

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

1

С RubyMotion / RedPotion вставьте это в свой настольный экран:

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

Работает как шарм!


1

Для быстрой 5+

В willDisplayHeaderViewметоде

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
}

Я надеюсь, это поможет вам :]


0

Хотя func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int)это также будет работать, вы можете добиться этого без реализации другого метода делегата. в вашем func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?методе вы можете использовать view.contentView.backgroundColor = UIColor.whiteвместо view.backgroundView?.backgroundColor = UIColor.whiteкоторого не работает. (Я знаю, что backgroundViewэто необязательно, но даже когда он есть, это не просыпается без реализацииwillDisplayHeaderView

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.