Mengubah Ukuran Font Untuk Header Bagian UITableView

138

Dapatkah seseorang tolong ajari saya tentang cara termudah untuk mengubah ukuran font teks di header bagian UITableView?

Saya memiliki judul bagian diimplementasikan menggunakan metode berikut:

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section

Lalu, saya mengerti bagaimana cara berhasil mengubah tinggi bagian tajuk menggunakan metode ini:

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section

Saya memiliki sel UITableView yang diisi menggunakan metode ini:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

Namun, saya buntu bagaimana cara benar-benar meningkatkan ukuran font - atau dalam hal gaya font - teks header bagian?

Bisakah seseorang tolong? Terima kasih.

JRD8
sumber
1
Swift versi
Juan Boero

Jawaban:

118

Sayangnya, Anda mungkin harus menimpa ini:

Dalam Objective-C:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section

Dalam Swift:

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?

Coba sesuatu seperti ini:

Dalam Objective-C:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {

    UILabel *myLabel = [[UILabel alloc] init];
    myLabel.frame = CGRectMake(20, 8, 320, 20);
    myLabel.font = [UIFont boldSystemFontOfSize:18];
    myLabel.text = [self tableView:tableView titleForHeaderInSection:section];

    UIView *headerView = [[UIView alloc] init];
    [headerView addSubview:myLabel];

    return headerView;
}

Dalam Swift:

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {

    let myLabel = UILabel()
    myLabel.frame = CGRect(x: 20, y: 8, width: 320, height: 20)
    myLabel.font = UIFont.boldSystemFont(ofSize: 18)
    myLabel.text = self.tableView(tableView, titleForHeaderInSection: section)

    let headerView = UIView()
    headerView.addSubview(myLabel)

    return headerView
}
mosca1337
sumber
1
Terima kasih. Ini bekerja dengan sempurna. Sangat dihargai.
JRD8
5
Meskipun ini solusi yang tepat, berhati-hatilah dengan metode ini. Untuk tajuk yang lebih panjang dari satu baris, Anda harus melakukan perhitungan ketinggian tajuk tableView:heightForHeaderInSection:yang dapat menjadi rumit.
Leo Natan
3
Sudah mencoba ini dan selagi berfungsi jika Anda menggulir tabel ke atas, Label Header tetap berada di layar dan menindih sel. :(
Plasma
2
@trss Saya pikir Anda akan menemukan ini bukan perilaku yang diharapkan. Saya tidak berbicara tentang bagian header yang tetap di sana, hanya label, dan supernya dikenakan pada sel ketika mereka lewat di bawahnya sehingga terlihat berantakan. Saya memang menemukan cara yang lebih baik untuk mencapai ini dan akan mempostingnya kembali setelah saya menemukannya lagi.
Plasma
1
@ mosca1337 tidak perlu membuat tampilan lain, Anda bisa mendapatkan 'UITableViewHeaderFooterView' yang sebenarnya ditampilkan dan menyesuaikan parameter.
Juan Boero
367

Cara lain untuk melakukan ini adalah menanggapi UITableViewDelegatemetode willDisplayHeaderView. Tampilan yang berlalu sebenarnya adalah instance dari a UITableViewHeaderFooterView.

Contoh di bawah ini mengubah font, dan juga menempatkan teks judul di tengah secara vertikal dan horizontal di dalam sel. Perhatikan bahwa Anda juga harus merespons agar heightForHeaderInSectionperubahan ketinggian header Anda dicatat dalam tata letak tampilan tabel. (Yaitu, jika Anda memutuskan untuk mengubah tinggi header dalam willDisplayHeaderViewmetode ini .)

Anda kemudian dapat menanggapi titleForHeaderInSectionmetode untuk menggunakan kembali header yang dikonfigurasi ini dengan judul bagian yang berbeda.

Objektif-C

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section {
    UITableViewHeaderFooterView *header = (UITableViewHeaderFooterView *)view;

    header.textLabel.textColor = [UIColor redColor];
    header.textLabel.font = [UIFont boldSystemFontOfSize:18];
    CGRect headerFrame = header.frame;
    header.textLabel.frame = headerFrame;
    header.textLabel.textAlignment = NSTextAlignmentCenter;
}

Cepat 1.2

(Catatan: jika view controller Anda adalah turunan dari a UITableViewController, ini harus dinyatakan sebagai override func.)

override func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) 
{
    let header:UITableViewHeaderFooterView = view as! UITableViewHeaderFooterView

    header.textLabel.textColor = UIColor.redColor()
    header.textLabel.font = UIFont.boldSystemFontOfSize(18)
    header.textLabel.frame = header.frame
    header.textLabel.textAlignment = NSTextAlignment.Center
}

Swift 3.0

Kode ini juga memastikan bahwa aplikasi tidak macet jika tampilan tajuk Anda adalah sesuatu selain UITableViewHeaderFooterView:

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    guard let header = view as? UITableViewHeaderFooterView else { return }
    header.textLabel?.textColor = UIColor.red
    header.textLabel?.font = UIFont.boldSystemFont(ofSize: 18)
    header.textLabel?.frame = header.frame
    header.textLabel?.textAlignment = .center
}
Mark Semsel
sumber
3
Metode ini bekerja jauh lebih baik bagi saya daripada yang di atas
Plasma
6
Jawaban terbaik yang pernah saya lihat.
phatmann
2
Ini akan menjadi cara yang "tepat" untuk menyesuaikan informasi, dengan asumsi tidak ada alasan lain untuk subkelas (misalnya menambahkan tampilan, misalnya). Selain itu, metode ini dapat digunakan untuk memperbarui teks header untuk Tipe Dinamis. Cukup gunakan: header.textLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleHeadline];dan / atau header.detailTextLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleHeadline];bersama dengan langkah-langkah lain yang diperlukan (lihat di sini: captechconsulting.com/blog/john-szumski/… )
leanne
3
Ini tidak mengubah ukuran tampilan header, jadi jika font Anda lebih besar atau berbeda secara signifikan, seperti Zapfino (jangan tanya mengapa), itu akan memotong teks. Jika Anda harus menghitung sendiri ukurannya, itu berantakan dan Anda tidak boleh melakukannya.
Leo Natan
@ CocoaPriest Tidak menabrak di versi beta saya, tho. (Benih GM 2)
Patrick Bassut
96

Sementara jawaban mosca1337 adalah solusi yang benar, berhati-hatilah dengan metode itu. Untuk tajuk dengan teks lebih panjang dari satu baris, Anda harus melakukan perhitungan ketinggian tajuk tableView:heightForHeaderInSection:yang rumit.

Metode yang lebih disukai adalah menggunakan API penampilan:

[[UILabel appearanceWhenContainedIn:[UITableViewHeaderFooterView class], nil] setFont:[UIFont boldSystemFontOfSize:28]];

Ini akan mengubah font, sementara masih meninggalkan meja untuk mengelola ketinggian itu sendiri.

Untuk hasil yang optimal, subkelas tampilan tabel, dan tambahkan ke rantai penahanan (dalam appearanceWhenContainedIn:) untuk memastikan font hanya diubah untuk tampilan tabel tertentu.

Leo Natan
sumber
1
Jika subklasifikasi maka Anda tetap akan mengembalikan tampilan kustom dari - tableView:viewForHeaderInSection:kanan? Dalam hal ini font dapat diatur di sana. Inilah yang dilakukan solusi @ mosca1337.
trss
1
Haha, well, saya woozey setelah kemarin. Subkelas tampilan tabel dan tambahkan ke daftar kontainer. ;-)
Leo Natan
2
Solusi ini menyebabkan banyak bug dengan menghitung ukuran footer / header nyata. Saya dapat menunjukkan beberapa contoh saat judul terpotong saat font khusus disiapkan.
kas-kad
5
Swift 3 :UILabel.appearance(whenContainedInInstancesOf: [UITableViewHeaderFooterView.self]).font = UIFont.boldSystemFont(ofSize: 28)
Eric Hodgins
3
Ini tidak mengubah ukuran label dengan benar agar sesuai dengan font pada iOS 11. Selain itu, menggulir ke atas dan ke bawah setelah memuat tampilan akan meresetnya ke font default.
nickdnk
25

Untuk iOS 7 saya menggunakan ini,


-(void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
{
    UITableViewHeaderFooterView *header = (UITableViewHeaderFooterView *)view;

    header.textLabel.font = [UIFont boldSystemFontOfSize:10.0f];
    header.textLabel.textColor = [UIColor orangeColor];
}

Berikut adalah versi Swift 3.0 dengan mengubah ukuran header

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    if let header = view as? UITableViewHeaderFooterView {
        header.textLabel!.font = UIFont.systemFont(ofSize: 24.0)
        header.textLabel!.textColor = UIColor.orange          
    }
}
Maria
sumber
6
Ini tidak akan mengukur tampilan tajuk agar sesuai dengan font baru.
Leo Natan
@LeoNatan Bagaimana kita bisa mengukur tampilan header agar sesuai dengan font baru - dapatkah ini dilakukan dengan metode ini?
SAHM
Saya ingin mengklarifikasi bahwa saya memang melihat jawaban Anda di atas, tetapi saya hanya ingin mengubah font untuk membatasi ukuran ketika font yang dipilih pengguna (aksesibilitas) melebihi ukuran tertentu (jadi, tidak semua waktu). Saya percaya saya perlu memeriksa dan mungkin mengubah font di willDisplayHeaderView, jadi apakah ada cara saya bisa mengatur ulang ketinggian tampilan jika font diubah?
SAHM
19

Swift 3:

Cara termudah untuk menyesuaikan ukuran saja :

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {

    let header = view as! UITableViewHeaderFooterView

    if let textlabel = header.textLabel {
        textlabel.font = textlabel.font.withSize(15)
    }
}
jeff-ziligy
sumber
Itu adalah cara termudah yang saya cari.
Ryan
Bekerja dengan cepat 4! Jangan lupa "timpa fungsi .."
Matvey
8

Swift 2.0 :

  1. Ganti header bagian default dengan UILabel yang dapat disesuaikan sepenuhnya.

Terapkan viewForHeaderInSection, seperti:

  override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {

    let sectionTitle: String = self.tableView(tableView, titleForHeaderInSection: section)!
    if sectionTitle == "" {
      return nil
    }

    let title: UILabel = UILabel()

    title.text = sectionTitle
    title.textColor = UIColor(red: 0.0, green: 0.54, blue: 0.0, alpha: 0.8)
    title.backgroundColor = UIColor.clearColor()
    title.font = UIFont.boldSystemFontOfSize(15)

    return title
  }
  1. Ubah tajuk default (tetap default).

Terapkan willDisplayHeaderView, seperti:

  override func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {

    if let view = view as? UITableViewHeaderFooterView {
      view.backgroundView?.backgroundColor = UIColor.blueColor()
      view.textLabel!.backgroundColor = UIColor.clearColor()
      view.textLabel!.textColor = UIColor.whiteColor()
      view.textLabel!.font = UIFont.boldSystemFontOfSize(15)
    }
  }

Ingat: Jika Anda menggunakan sel statis, header bagian pertama diisi lebih tinggi daripada header bagian lainnya karena bagian atas UITableView; untuk memperbaiki ini:

Terapkan heightForHeaderInSection, seperti:

  override func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {

    return 30.0 // Or whatever height you want!
  }
Elliott Davies
sumber
4

Swift 4 versi Leo Natan jawabannya adalah

UILabel.appearance(whenContainedInInstancesOf: [UITableViewHeaderFooterView.self]).font = UIFont.boldSystemFont(ofSize: 28)

Jika Anda ingin mengatur font khusus yang dapat Anda gunakan

if let font = UIFont(name: "font-name", size: 12) {
    UILabel.appearance(whenContainedInInstancesOf: [UITableViewHeaderFooterView.self]).font = font
}
Giorgio
sumber
Sayangnya, ini tidak mengubah ukuran bingkai.
nickdnk
3

Dengan metode ini Anda dapat mengatur ukuran font, gaya font dan latar belakang Header juga. ada 2 metode untuk ini

Metode pertama

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section{
        UITableViewHeaderFooterView *header = (UITableViewHeaderFooterView *)view;
        header.backgroundView.backgroundColor = [UIColor darkGrayColor];
        header.textLabel.font=[UIFont fontWithName:@"Open Sans-Regular" size:12];
        [header.textLabel setTextColor:[UIColor whiteColor]];
    }

Metode Kedua

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    UILabel *myLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, tableView.frame.size.width, 30)];
//    myLabel.frame = CGRectMake(20, 8, 320, 20);
    myLabel.font = [UIFont fontWithName:@"Open Sans-Regular" size:12];
    myLabel.text = [NSString stringWithFormat:@"   %@",[self tableView:FilterSearchTable titleForHeaderInSection:section]];

    myLabel.backgroundColor=[UIColor blueColor];
    myLabel.textColor=[UIColor whiteColor];
    UIView *headerView = [[UIView alloc] init];
    [headerView addSubview:myLabel];
    return headerView;
}
Anup Gupta
sumber
1

Swift 2:

Sebagai OP bertanya, hanya menyesuaikan ukuran, tidak menetapkan itu sebagai sistem huruf tebal atau apa pun:

func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        if let headerView = view as? UITableViewHeaderFooterView, textLabel = headerView.textLabel {

            let newSize = CGFloat(16)
            let fontName = textLabel.font.fontName
            textLabel.font = UIFont(name: fontName, size: newSize)
        }
    }
Juan Boero
sumber
0

Ini solusi saya dengan cepat 5.

Untuk sepenuhnya mengontrol tampilan bagian tajuk, Anda perlu menggunakan metode tableView (: viewForHeaderInsection: :) di controller Anda, seperti yang ditunjukkan oleh posting sebelumnya. Namun, ada langkah lebih lanjut: untuk meningkatkan kinerja, apple merekomendasikan untuk tidak menghasilkan tampilan baru setiap kali tetapi untuk menggunakan kembali tampilan header, seperti menggunakan kembali sel tabel. Ini dengan metode tableView.dequeueReusableHeaderFooterView (withIdentifier:). Tetapi masalah yang saya miliki adalah setelah Anda mulai menggunakan fungsi penggunaan kembali ini, font tidak akan berfungsi seperti yang diharapkan. Hal-hal lain seperti warna, penjajaran semua baik-baik saja tetapi hanya font Ada beberapa diskusi tetapi saya membuatnya bekerja seperti berikut.

Masalahnya adalah tableView.dequeueReusableHeaderFooterView (withIdentifier :) tidak seperti tableView.dequeneReuseCell (:) yang selalu mengembalikan sel. Yang pertama akan mengembalikan nol jika tidak ada yang tersedia. Bahkan jika itu mengembalikan tampilan header kembali, itu bukan tipe kelas asli Anda, tetapi UITableHeaderFooterView. Jadi, Anda perlu melakukan penilaian dan bertindak sesuai dengan kode Anda sendiri. Pada dasarnya, jika nihil, dapatkan tampilan tajuk baru. Jika tidak nol, paksakan untuk melakukan cast agar Anda dapat mengontrol.

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let reuse_header = tableView.dequeueReusableHeaderFooterView(withIdentifier: "yourHeaderID")
        if (reuse_header == nil) {
            let new_sec_header = YourTableHeaderViewClass(reuseIdentifier:"yourHeaderID")
            new_section_header.label.text="yourHeaderString"
            //do whatever to set color. alignment, etc to the label view property
            //note: the label property here should be your custom label view. Not the build-in labelView. This way you have total control.
            return new_section_header
        }
        else {
            let new_section_header = reuse_section_header as! yourTableHeaderViewClass
            new_sec_header.label.text="yourHeaderString"
            //do whatever color, alignment, etc to the label property
            return new_sec_header}

    }
JerryH
sumber