UITableView - ubah warna tajuk bagian

331

Bagaimana saya bisa mengubah warna header bagian di UITableView?

EDIT : Jawaban yang diberikan oleh DJ-S harus dipertimbangkan untuk iOS 6 ke atas. Jawaban yang diterima sudah usang.

Ilya Suzdalnitski
sumber
3
Saya sangat menghargai hasil edit RE versi iOS yang lebih baru.
Suz

Jawaban:

393

Semoga metode dari UITableViewDelegateprotokol ini akan membantu Anda memulai:

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

Cepat:

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
}

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

Ganti [UIColor redColor]dengan mana yang UIColorAnda inginkan. Anda mungkin juga ingin menyesuaikan dimensi headerView.

Alex Reynolds
sumber
17
Ini juga dapat membantu untuk menyesuaikan ukuran header bagian menggunakan self.tableView.sectionHeaderHeight. Jika tidak, Anda mungkin mengalami kesulitan melihat teks yang Anda tampilkan untuk judul bagian.
Tony Lenzi
Bekerja dengan baik [UIColor xxxColor]namun ketika saya mencoba warna kustom seperti yang bisa saya dapatkan dari photoshop (jadi menggunakan UIColor red:green:blue:alpha:, itu hanya putih. Apakah saya melakukan sesuatu yang salah?
Matej
Posting pertanyaan terpisah dan kami akan mencoba membantu. Sertakan kode sumber.
Alex Reynolds
12
Perhatikan bahwa jawaban ini (walaupun benar) hanya akan mengembalikan UIView tanpa konten.
Greg M. Krsak
7
Ini adalah informasi yang cukup usang dan hanya membuat tampilan lain bukanlah jawaban terbaik. Idenya adalah untuk mendapatkan tampilan yang tepat dan mengubah warna atau rona di atasnya. Jawaban di bawah ini menggunakan willDisplayHeaderView adalah pendekatan yang jauh lebih baik.
Alex Zavatone
741

Ini adalah pertanyaan lama, tetapi saya pikir jawabannya perlu diperbarui.

Metode ini tidak melibatkan mendefinisikan dan membuat tampilan kustom Anda sendiri. Di iOS 6 dan yang lebih tinggi, Anda dapat dengan mudah mengubah warna latar dan warna teks dengan mendefinisikan

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

metode delegasi bagian

Sebagai contoh:

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

Diambil dari posting saya di sini: https://happyteamlabs.com/blog/ios-how-to-customize-table-view-header-and-footer-colors/

Cepat 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
sumber
2
Saya tidak tahu ini bahkan telah ditambahkan ke SDK. Cemerlang! Benar-benar jawaban yang benar.
JRod
1
OP - Harap perbarui jawaban yang diterima untuk yang ini. Jauh lebih bersih daripada pendekatan lama.
Kyle Clegg
10
Ini sepertinya tidak bekerja untuk saya. Warna teks berfungsi tetapi tidak untuk latar belakang header. Saya menggunakan iOS 7.0.4
zeeple
10
user1639164, Anda dapat menggunakan header.backgroundView.backgroundColor = [UIColor blackColor]; untuk mengatur warna latar belakang tajuk.
慭 慭 流 觞
2
@Kent sudah lama jelas, tetapi untuk orang-orang masa depan header.contentView.backgroundColor = [UIColor blackColor];opsi akan memberi Anda sundulan buram
SparkyRobinson
98

Berikut cara mengubah warna teks.

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
sumber
18
Terima kasih DoctorG - Ini bermanfaat. BTW - untuk menjaga label yang ada disediakan oleh dataSource, saya memodifikasi baris ke-2 seperti: label.text = [tableView.dataSource tableView: tableView titleForHeaderInSection: section]; Mungkin ini bentuk yang buruk, tetapi itu berhasil untuk saya. Mungkin ini bisa membantu orang lain.
JJ Rohrer
1
@JJ Bentuk itu sebenarnya baik-baik saja, karena Anda memanggil metode yang sama yang awalnya Anda gunakan untuk mendefinisikan header bagian tabel.
Tim
3
Saya menghapus autorelease dan mengubahnya menjadi rilis eksplisit. Metode pemformatan UITableView disebut berkali-kali. Hindari menggunakan autorelease jika memungkinkan.
memmons
@Harkonian, alih-alih mengubah jawaban yang dikirimkan, harap sarankan perubahan dalam komentar ke jawabannya. Ini dianggap bentuk yang buruk untuk mengubah kode orang lain dengan suntingan. Kesalahan pengejaan, dan pemformatan dan tata bahasa yang buruk adalah permainan yang adil.
the Tin Man
1
Alih-alih addSubview: UILabel, Anda harus mengembalikan UILabel dalam viewForHeaderInSection. UILable is-a UIView :)
Nas Banov
52

Anda dapat melakukan ini jika Anda ingin tajuk dengan warna khusus:

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

Solusi ini berfungsi dengan baik sejak iOS 6.0.

Leszek Zarna
sumber
1
hm ... itu tidak berhasil untuk saya. mencoba iOS 6 simulator dan perangkat iOS 7. Apakah Anda diuji dengan cara ini? Di mana saya harus meletakkannya?
Maxim Kholyavkin
Ini dapat dilakukan dalam aplikasi: didFinishLaunchingWithOptions: metode delegasi aplikasi.
Leszek Zarna
kesalahan saya: Saya mencoba menggunakan cara ini sementara UITableViewStyleGrouped BTW: untuk mengubah warna teks dengan cara ini harus digunakan stackoverflow.com/a/20778406/751932
Maxim Kholyavkin
Jika dalam UIView khusus, cukup masukkan metode in-init.
felixwcf
31

Solusi berikut ini berfungsi untuk Swift 1.2 dengan 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()

}
Maks
sumber
22

Mengatur warna latar belakang pada UITableViewHeaderFooterView telah ditinggalkan. Silakan gunakan contentView.backgroundColorsebagai gantinya.

Alex
sumber
21

Jangan lupa untuk menambahkan potongan kode ini dari delegasi atau tampilan Anda akan terpotong atau muncul di belakang tabel dalam beberapa kasus, relatif terhadap ketinggian tampilan / label Anda.

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 30;
}
whyoz
sumber
Ini tidak diperlukan lagi jika Anda mengikuti iOS6 dan kemudian menjawab oleh Dj S.
Bjinse
21

Anda dapat melakukannya di main.storyboard dalam sekitar 2 detik.

  1. Pilih Tampilan Tabel
  2. Pergi ke Inspektur Atribut
  3. Daftar barang
  4. Gulir ke bawah untuk Lihat subjudul
  5. Ubah "latar belakang"

Silahkan lihat di sini

Steve
sumber
18

Jika Anda tidak ingin membuat tampilan khusus, Anda juga dapat mengubah warna seperti ini (memerlukan 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
sumber
13

Tetapkan latar belakang dan warna teks area bagian: (Terima kasih kepada William Jockuschdan 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
sumber
13

Cepat 4

Untuk mengubah warna latar belakang , warna label teks dan font untuk Tampilan Header dari Bagian UITableView, cukup timpa willDisplayHeaderViewuntuk tampilan tabel Anda seperti:

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

Ini bekerja dengan baik untuk saya; harap itu membantu Anda juga!

Nii Mantse
sumber
Mengatur warna latar belakang pada UITableViewHeaderFooterView telah ditinggalkan. Anda harus mengatur UIView khusus dengan warna latar belakang yang Anda inginkan ke properti backgroundView.
mojtaba al moussawi
10

Berikut cara menambahkan gambar dalam tampilan tajuk:

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

Untuk iOS8 (Beta) dan Swift pilih Warna RGB yang Anda inginkan dan coba ini:

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

}

("Override" sudah ada sejak saya menggunakan UITableViewController alih-alih UIViewController normal dalam proyek saya, tetapi itu tidak wajib untuk mengubah warna bagian header)

Teks tajuk Anda masih akan terlihat. Perhatikan bahwa Anda harus menyesuaikan tinggi tajuk bagian.

Semoga berhasil.

Korona
sumber
6

SWIFT 2

Saya berhasil mengubah warna latar belakang bagian dengan efek blur tambahan (yang sangat keren). Untuk mengubah warna latar belakang bagian dengan mudah:

  1. Pertama pergi ke Storyboard dan pilih Table View
  2. Pergi ke Inspektur Atribut
  3. Daftar barang
  4. Gulir ke bawah untuk Lihat
  5. Ubah "Latar Belakang"

Kemudian untuk efek blur, tambahkan ke kode:

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

Saya tahu jawabannya, kalau-kalau, In Swift menggunakan yang berikut ini

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

iOS 8+

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

Berdasarkan jawaban @Dj S, menggunakan Swift 3. Ini berfungsi baik di 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
sumber
3

Saya punya proyek menggunakan sel tampilan tabel statis, di iOS 7.x. willDisplayHeaderView tidak menyala. Namun, metode ini berfungsi dengan baik:

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

Saya pikir kode ini tidak terlalu buruk.

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

Swift 4 membuatnya sangat mudah. Cukup tambahkan ini ke kelas Anda dan atur warnanya sesuai kebutuhan.

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

atau jika warnanya sederhana

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

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

atau jika warnanya sederhana

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

Di iOS 7.0.4 saya membuat header khusus dengan XIB itu sendiri. Tidak ada yang disebutkan di sini sebelum bekerja. Itu harus menjadi subclass dari UITableViewHeaderFooterView untuk bekerja dengan dequeueReusableHeaderFooterViewWithIdentifier:dan tampaknya kelas sangat keras kepala mengenai warna latar belakang. Jadi akhirnya saya menambahkan UIView (Anda bisa melakukannya dengan kode atau IB) dengan nama customBackgroudView, dan kemudian mengatur properti backgroundColor. Di layoutSubviews: Saya mengatur bingkai tampilan itu menjadi batas. Ini bekerja dengan iOS 7 dan tidak memberikan gangguan.

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

Ubah saja warna layer dari tampilan header

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

Ramesh
sumber
2

Jika ada yang butuh cepat, pertahankan judul:

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

Saya mendapat pesan dari Xcode melalui konsol log

[TableView] Mengatur warna latar belakang pada UITableViewHeaderFooterView telah ditinggalkan. Harap tetapkan UIView khusus dengan warna latar belakang yang Anda inginkan sebagai properti backgroundView.

Lalu saya hanya membuat UIView baru dan meletakkannya sebagai latar belakang HeaderView. Bukan solusi yang baik tetapi mudah seperti kata Xcode.

Pokotuz
sumber
2

Dalam kasus saya, ini berfungsi seperti ini:

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

Cukup atur warna latar belakang tampilan latar belakang:

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

Dengan RubyMotion / RedPotion, rekatkan ini ke TableScreen Anda:

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

Bekerja seperti pesona!

Eli Duke
sumber
1

Untuk swift 5+

Dalam willDisplayHeaderViewMetode

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
}

Saya harap ini membantu Anda:]

Sree Ramana
sumber
0

Meskipun func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int)akan bekerja dengan baik, Anda dapat mencapainya tanpa menerapkan metode delegasi lain. dalam func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?metode Anda , Anda dapat menggunakan view.contentView.backgroundColor = UIColor.whitealih-alih view.backgroundView?.backgroundColor = UIColor.whiteyang tidak berfungsi. (Saya tahu itu backgroundViewopsional, tetapi bahkan ketika itu ada, ini tidak terbangun tanpa implementasiwillDisplayHeaderView

usus
sumber